HTML :: Тег <textarea>
В HTML тег <textarea> (от англ. textarea – текстовая область) предназначен для создания многострочного поля для ввода текста. В отличие от текстового поля <input> в элементе <textarea> допустимо делать переносы строк, которые сохраняются при отправке данных на сервер. Текст написанный внутри элемента <textarea>, включая конструкции тегов, будет отображаться браузером на странице внутри текстового поля и при желании может быть удален пользователем во избежание отправки на сервер вместе с остальными данными.
Синтаксис
<textarea>
...
</textarea>
Закрывающий тег: обязателен.
Атрибуты
- autocomplete – позволяет отключать автозаполнение текстового поля формы, которое происходит при повторном вводе одинаковых данных. Принимает два значения "on" (по умолчанию) и "off". Если аналогичный атрибут задан для всей формы, то значение атрибута autocomplete конкретного текстового поля формы будет иметь для него приоритет. Если автозаполнение отключено в настройках самого браузера, то данный атрибут игнорируется.
- autofocus – данный логический атрибут автоматически устанавливает фокус в данное текстовое поле формы при загрузке страницы. Если атрибут задан сразу для нескольких полей, то фокус будет передан первому из них. Атрибут по умолчанию выключен и значений не принимает.
- cols – принимает в качестве значения натуральные числа, которые определяют ширину текстового поля в виде количества символов моноширинного шрифта. По умолчанию принимает значение "20". Поскольку ширина текстового поля зависит от текущего размера шрифта, то с увеличением или уменьшением размера шрифта будет изменяться и ширина поля в пикселях.
- disabled – данный логический атрибут блокирует доступ к данному текстовому полю формы. Это может потребоваться, например, когда нужно, чтобы поле стало доступным только после заполнения предварительных полей. Пользователь не сможет взять его в фокус и изменить содержимое. При этом само поле имеет серый фон, а его значение на сервер не передается. Атрибут по умолчанию выключен и значений не принимает.
- form – связывает данное текстовое поле с формой по ее идентификатору. В качестве значения принимает соответствующее значение атрибута id формы, с которой необходимо связать данное поле. Это может потребоваться в случае, когда поле расположено за пределами формы.
- maxlength – устанавливает максимально допустимое число символов, которые можно ввести в данное текстовое поле. В качестве значения принимает натуральные числа. При равенстве количества введенных символов установленному значению, дальнейший ввод символов становится невозможным.
- minlength – устанавливает минимальное число символов, которые нужно ввести в данное текстовое поле. В качестве значения принимает натуральные числа. Если количество введенных символов будет меньше установленного значения, но больше нуля, то при попытке отправки формы на сервер будет выведено соответствующее предупреждение, а форма на сервер отправлена не будет.
- name – задает уникальное имя данному текстовому полю формы, которое позволяет обращаться к нему через скрипты. Кроме того, имя элемента отправляется на сервер вместе с его значением.
- placeholder – выводит текст-подсказку внутри поля формы, который исчезает при получении фокуса или ввода текста (зависит от браузера). Отображается шрифтом серого цвета.
- readonly – данный логический атрибут указывает, что данное текстовое поле формы доступно только для чтения. В отличие от атрибута disabled допускает получение фокуса. Атрибут по умолчанию выключен и значений не принимает.
- required – данный логический атрибут устанавливает данное текстовое поле обязательным для заполнения. Если поле заполнено не будет, то при попытке отправки формы на сервер будет выведено соответствующее предупреждение, а форма на сервер отправлена не будет.
- rows – принимает в качестве значения натуральные числа, задавая высоту текстового поля в строках (без прокрутки). По умолчанию принимает значение "20". Поскольку высота текстового поля зависит от текущего размера шрифта, то с увеличением или уменьшением размера шрифта будет изменяться и высота поля в пикселях.
-
wrap – задает параметры переноса строк в текстовом поле, принимая в качестве значений:
- "soft" – строки, которые не вмещаются в поле по ширине, автоматически переносятся на новую строку, при этом на сервер отправляется одна строка без разрывов; если же разрыв строки был добавлен при помощи клавиши Enter, то в процессе отправки данных на сервер он сохраняется (значение используется по умолчанию);
- "hard" – строки, которые не вмещаются в поле по ширине, автоматически переносятся на новую строку, но при этом все переносы строк сохраняются в процессе отправки данных на сервер, включая и разрывы, сделанные клавишей Enter; обязательным условием использования данного значения является наличие атрибута cols.
- Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.
Ссылки
Официальный сайт W3C: https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/textarea
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> </head> <body> <form action="php/registration.php" method="POST" name="reg_form"> <!-- Связываем текст с текстовым полем --> <label for="comment"> Оставить комментарий: </label><br><br> <!-- Ширина - 50 символов, высота - 10 строк --> <!-- Разрывы строк будут переданы на сервер --> <textarea id="comment" cols="50" rows="10" wrap="hard"> Этот текст будет предварительно отображен браузером в поле<br> вместе с <em>тегами</em>. Напоминает преформатированный текст. </textarea><br><br> <!-- Создаем кнопку отправки комментария на сервер --> <button type="submit" name="submit_button" disabled> Отправить на форум </button> </form> </body> </html>
Пример №1