HTML тег <textarea>

Поддержка браузерами

Описание

HTML тег <textarea> определяет многострочное текстовое поле. Количество символов, которое можно ввести в поле не ограничено, а введенный текст отображается моноширинным шрифтом.

По умолчанию поле ввода элемента <textarea>, при отображении в браузере, можно растянуть (изменить его размер), потянув за нижний правый угол. Если вам нужно запретить изменение размера <textarea>, то нужно прописать CSS свойство resize со значением none в атрибуте style, в этом случае получится запретить растягивать только данное поле ввода:

<textarea style="resize: none;"></textarea>

Либо можно прописать resize: none; в стилях, тогда правило примениться ко всем многострочным текстовым полям:

textarea { resize: none; }

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

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

Атрибуты

autofocus:

Указывает, что элемент <textarea> автоматически получит фокус после загрузки страницы. Возможные значения логического атрибута autofocus:

<textarea autofocus>
<textarea autofocus="autofocus">
<textarea autofocus="">

Примечание: атрибут autofocus не поддерживается в IE9 и более ранних версиях.

cols:

Указывает положительное целое число, определяющее ширину текстового поля (единицей измерения выступает ширина одного символа). Если атрибут не указан, то используется значение по умолчанию - 20.

disabled:

Указывает, что текстовая область будет неактивна, т.е. не будет возможности вводить текст или изменять и копировать текст, заданный по умолчанию. Возможные значения логического атрибута disabled:

<textarea disabled>
<textarea disabled="disabled">
<textarea disabled="">

form:

Определяет форму с которой связан элемент <textarea>. В качестве значения атрибута выступает идентификатор элемента <form>. Этот атрибут позволяет размещать многострочное текстовое поле в произвольном месте документа, а не только в качестве потомка элемента <form>.

Примечание: атрибут form не поддерживается браузером Internet Explorer.

maxlength:

Определяет максимально количество символов, которое можно будет ввести в текстовое поле.

Примечание: атрибут maxlength не поддерживается в IE9 и более ранних версия, и в Opera.

name:

Определяет имя для элемента.

placeholder:

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

Примечание: атрибут placeholder не поддерживается в IE9 и более ранних версия.

readonly:

Указывает, что текстовое поле будет доступно только для чтения, т.е. текст невозможно будет изменить, но будет возможность его скопировать. Возможные значения логического атрибута readonly:

<textarea readonly>
<textarea readonly="readonly">
<textarea readonly="">

required:

Указывает, что текстовое поле должно быть заполнено перед отправкой формы на сервер.

Примечание: атрибут required не поддерживается браузерами Internet Explorer и Safari.

rows:

Указывает положительное целое число, определяющее высоту текстового поля (единицей измерения выступает высота строки). Если атрибут не указан, то используется значение по умолчанию - 2.

wrap:

Определяет параметры переноса строк в тексте, при отправке данных на сервер:

hard - браузер автоматически вставляет разрывы строки так, что каждая строка не будет иметь ширину больше, чем ширина текстового поля. Обязательным условием использования значения hard является установленный атрибут cols.
soft - текст отправляется одной сплошной строкой, дополнительные переносы строк не добавляются. Является значением по умолчанию.

Тег <textarea> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

Нет.

Пример

<textarea rows="3" cols="40">
  Здесь могла быть ваша реклама :)
</textarea>

Результат данного примера в окне браузера: