Html forms textarea value
Поле многострочного ввода в формах.
Обновлено 8 сентября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Тег используется для создания многострочного поля ввода. Например, поля ввода комментария. При необходимости поле может иметь изменяемый размер.
Пример
Скопировать ссылку «Пример» Скопировано
label for="story">Расскажите о себе:label> textarea id="story" name="story" rows="5" cols="33">Frontend-разработчик со стажемtextarea>
Как понять
Скопировать ссылку «Как понять» Скопировано
На сайтах часто встречаются формы, где нужно писать многострочный текст. Например, когда нужно оставить комментарий, написать отзыв или статью. Для этих целей используется многострочное поле ввода, которое верстается тегом . Нужно отметить, что в этом поле можно писать только чистый текст. Панели стилизации текста, как в Ворде, являются дополнительными надстройками с использованием JavaScript.
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
autocomplete
Скопировать ссылку «autocomplete» Скопировано
Атрибут, указывающий, нужно ли поле заполнять автоматически сохранёнными в браузере значениями. Полезно использовать, если одна и та же форма потенциально будет часто отправляться с одинаковыми значениями.
on — поле будет автоматически заполняться значением, сохранённым в браузере во время предыдущей отправки формы
off — поле не будет заполняться браузером автоматически. Также, это значение нужно использовать, если документ предоставляет собственный метод автозаполнения полей.
Если атрибут не указать совсем, то браузер будет брать значение из атрибута autocomplete родительского элемента , либо — если родительской формы нет — из той формы, на id которой ссылается атрибуте form .
textarea autocomplete="off">textarea> autofocus
Скопировать ссылку «autofocus» Скопировано
Атрибут булевого типа (без значения, либо атрибут есть в теге, либо его нет совсем). Если он указан, то при загрузке страницы фокус будет автоматически помещён в данное поле ввода.
textarea autofocus>textarea> cols
Скопировать ссылку «cols» Скопировано
Задаёт ширину поля ввода в символах. Если атрибут задан, то должен иметь значением целое положительное число. Если не задан, то по умолчанию берётся как 20
disabled
Скопировать ссылку «disabled» Скопировано
Атрибут булевого типа. Если задан, то поле отключается для взаимодействия с пользователем. Если атрибут не задан, то он может быть унаследован у одного из предков (например у контейнера или ). Если ни у одного предка вверх по дереву этот атрибут не задан, то поле доступно для редактирования.
При отправке формы значения из disabled-полей не будут отправлены.
form
Скопировать ссылку «form» Скопировано
Атрибут указывает на элемент , с которым связано поле ввода. Значением атрибута должен быть id формы в пределах текущего документа. Если атрибут не задан, то обязательно должен находиться внутри тега form> . Но если задать атрибут, то нахождение внутри формы не обязательно и может находиться в любом месте страницы.
maxlength
Скопировать ссылку «maxlength» Скопировано
Максимальное число символов в поле (включая пробелы и переводы строк), которое может вводить пользователь. Значением должно быть положительное целое число
minlength
Скопировать ссылку «minlength» Скопировано
Минимальное число символов, которое должен ввести пользователь. Этот атрибут используется при валидации поля перед отправкой формы.
name
Скопировать ссылку «name» Скопировано
Имя поля. При отправке формы значение атрибута name будет ключом в отправляемом объекте
placeholder
Скопировать ссылку «placeholder» Скопировано
Подсказка для пользователя, что вводить в этом поле. Если подсказка должна быть многострочной, то можно прямо в HTML-коде переносить строки
Плейсхолдер должен давать только подсказку о том, как надо заполнять поле. Но это не полноценная замена тегу . Если на макете у полей ввода есть только плейсхолдер, но нет лейблов, то поговорите с дизайнером 😉
readonly
Скопировать ссылку «readonly» Скопировано
Атрибут булевого типа. Если он задан, то пользователь не может редактировать текст в поле, но по-прежнему может с ним взаимодействовать: кликать, копировать текст. При отправке формы значение поля будет отправлено как обычно.
required
Скопировать ссылку «required» Скопировано
Атрибут булевого типа. Указывает, должно ли поле обязательно быть заполнено. Атрибут учитывается при валидации формы при отправке. Если поле не заполнить, то при попытке отправки формы браузер покажет ошибку
rows
Скопировать ссылку «rows» Скопировано
Задаёт высоту поля ввода в строках. Если атрибут задан, то должен иметь значением целое положительное число. Если не задан, то по умолчанию высота задаётся равной двум строкам.
spellcheck
Скопировать ссылку «spellcheck» Скопировано
Атрибут указывает, должна ли быть включена проверка правописания в поле. Может принимать следующие значения:
true — проверка правописания включена
default — указывает на поведение по умолчанию. При этом значении поле ввода может наследовать значение аналогичного атрибута от родительских элементов.
false — проверка правописания выключена
wrap
Скопировать ссылку «wrap» Скопировано
Атрибут определяет, будут ли добавлены символы переноса строк текста при отправке формы. Может принимать значения:
hard — когда форма отправляется, то браузер, основываясь на значении атрибута cols добавляет в текст служебные символы переноса строки (CR+LF). Таким образом, сохраняется информация о переносах строк, сделанных пользователем в поле ввода.
soft — значение по умолчанию. При отправке формы символы переноса строк добавлены не будут, и текст будет отправлен одной длинной строкой
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 По умолчанию поле ввода может изменять свой размер, если потянуть за нижний правый угол. Это поведение можно изменить, управляя CSS-свойством resize .
HTML Tag
The tag defines a multi-line text input control.
The element is often used in a form, to collect user inputs like comments or reviews.
A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).
The size of a text area is specified by the cols and rows attributes (or with CSS).
The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the text area will be submitted).
The id attribute is needed to associate the text area with a label.
Browser Support
Attributes
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | Specifies that a text area should automatically get focus when the page loads |
| cols | number | Specifies the visible width of a text area |
| dirname | textareaname.dir | Specifies that the text direction of the textarea will be submitted |
| disabled | disabled | Specifies that a text area should be disabled |
| form | form_id | Specifies which form the text area belongs to |
| maxlength | number | Specifies the maximum number of characters allowed in the text area |
| name | text | Specifies a name for a text area |
| placeholder | text | Specifies a short hint that describes the expected value of a text area |
| readonly | readonly | Specifies that a text area should be read-only |
| required | required | Specifies that a text area is required/must be filled out |
| rows | number | Specifies the visible number of lines in a text area |
| wrap | hard soft | Specifies how the text in a text area is to be wrapped when submitted in a form |
Global Attributes
Event Attributes
More Examples
Example
Disable default resize option: