Тег TEXTAREA

Поле TEXTAREA представляет собой элемент формы, для создания области, в которую можно вводить несколько строк текста. В отличие от тега INPUT в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.

Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля.

Синтаксис
<form>
<textarea ...>
текст
</textarea>
</form>

Закрывающий тег
Обязателен.

Параметры
cols — ширина поля в символах.
disabled — блокирует доступ и изменение элемента.
name — имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
readonly — устанавливает, что поле не может изменяться пользователем.
rows — высота поля в строках текста.
wrap — параметры переноса строк.

Пример 1. Использование тега TEXTAREA

<html>
<body>

<form action=/cgi-bin/handler.cgi>
<b>Введите ваш отзыв:</b><br>
<textarea rows=10 cols=45></textarea>
</form>

</body>
</html>

Описание параметров тега TEXTAREA

Параметр COLS

Описание
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.

Синтаксис
<textarea cols=число></textarea>

Аргументы
Любое целое положительное число.

Значение по умолчанию
Зависит от настроек браузера и операционной системы.

Пример 2. Ширина поля

<html>
<body>

<form>
<textarea rows=10 cols=20></textarea>
</form>

</body>
</html>


Параметр DISABLED

Описание
Блокирует доступ и изменение текстового поля. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.

Синтаксис
<textarea disabled></textarea>

Аргументы
Нет.

Значение по умолчанию
По умолчанию это значение выключено.

Пример 3. Блокирование текстового поля

<html>
<body>

<form>
<textarea rows=10 cols=20>Активное поле</textarea>
<textarea rows=10 cols=20 disabled>Неактивное поле</textarea>
</form>

</body>
</html>


Параметр NAME

Описание
Определяет уникальное имя элемента TEXTAREA. Как правило, это имя используется при отправке данных на сервер или для доступа к полю через скрипты.

Синтаксис
<textarea name=имя></textarea>

Аргументы
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу TEXTAREA по имени соблюдайте ту же форму написания, что и в параметре name.

Значение по умолчанию
Нет.

Пример 4. Обращение к полю по его имени

<html>
<head>
<script language="JavaScript">

function dataField(f) {
alert("Вы ввели: " + f.comment.value);

}

</script>
</head>
<body>

<form>
<b>Введите комментарий</b><br>
<textarea rows=10 cols=20 name=comment></textarea><br>
<input type=button value="ОК" onClick="dataField(this.form)">
</form>

</body>
</html>

Параметр READONLY

Описание
Когда к тегу TEXTAREA добавляется параметр readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.

Синтаксис
<textarea readonly></textarea>

Аргументы
Нет.

Значение по умолчанию
По умолчанию это значение выключено.

Пример 5. Текстовое поле только для чтения

<html>
<body>

<form>
<textarea rows=10 cols=20 readonly>Поле недоступно для изменения</textarea><br>
</form>

</body>
</html>


Параметр ROWS

Описание
Высота текстового поля, которое определяется количеством отображаемых строк без прокрутки содержимого. Если размер шрифта изменяется с помощью стилей, высота поля также соответственно меняется.

Синтаксис
<textarea rows=число></textarea>

Аргументы
Любое положительное число.

Значение по умолчанию
Зависит от настроек браузера и операционной системы.

Пример 6. Высота текстового поля

<html>
<body>

<form>
<textarea rows=10 cols=20></textarea>
</form>

</body>
</html>


Параметр WRAP

Описание
Параметр wrap говорит браузеру, как осуществлять перенос текста в поле TEXTAREA и в каком виде отправлять данные на сервер. Если этот параметр отсутствует, текст в поле набирается одной строкой, когда число введенных символов превышает ширину области, появляется горизонтальная полоса прокрутки. Нажатие кнопки <Enter> переносит текст на новую строку, и курсор устанавливается у левого края поля.

Синтаксис
<textarea wrap></textarea>
<textarea wrap=значение></textarea>

Аргументы
hard — При этом параметре длинный текст, который самостоятельно не помещается в поле по ширине, будет автоматически перенесен на новую строку, однако передаваться на сервер будет как одна строка. Нажатие кнопки <Enter> на клавиатуре устанавливает перенос текста.
off — Переносы строк отключены. При введении длинного текста без переносов, он будет печататься в одну строку, при этом будет отображаться полоса прокрутки.

Существуют и другие значения этого параметра, которые поддерживаются разными браузерами, но результат их использования похож на приведенные выше значения.

Значение по умолчанию
off

Пример 7. Переносы в текстовом поле

<html>
<body>

<form method=POST action=/cgi-bin/handler.cgi>
<textarea rows=10 cols=20 wrap=hard></textarea>
<p><input type=submit value="Отправить">
</form>

</body>
</html>

Материал взят с сайта htmlbook.ru