Многострочный текст
Данный элемент формы предназначен для создания области, в которой можно вводить несколько строк текста. В таком текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Поле для многострочного текста незаменимо для добавления комментариев к статьям, написания сообщений форума, вставки и редактирования постов в блоге и во многих других случаях, когда одной строки текста явно недостаточно.
Синтаксис создания поля следующий.
<textarea>
</textarea>Между тегов <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля. Если текста нет, то поле будет изначально пустым.
Допустимые атрибуты перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| name | Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| disabled | Блокирует поле и не отправляет данные на сервер. |
| form | Идентификатор формы для связывания поля с элементом <form>. |
| maxlength | Устанавливает максимальное число символов, которое может быть введено пользователем в поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. |
| readonly | Блокирует поле для ввода текста. |
| autofocus | Поле получает фокус после загрузки документа. |
| required | Указывает, что поле является обязательным для заполнения. |
| placeholder | Добавляет подсказку, которая исчезает при вводе текста. |
| dirname | Имя переменной, которая отправляется на сервер и автоматически получает значение ltr (для текста слева направо) или rtl (для текста справа налево). |
| rows | Высота поля в строках текста. |
| wrap | Значение soft передаёт на сервер текст одной строкой, а hard учитывает значение cols и автоматически добавляет переносы. |
| cols | Ширина поля в символах. |
Создание поля для многострочного текста показано в примере 1.
Пример 1. Текстовое поле
Результат примера показан на рис. 1.
Рис. 1. Вид текстового поля по умолчанию
Для <textarea> действуют те же ограничения, что и для <input>, а именно:
- <textarea> нельзя вкладывать внутрь ссылки <a>;
- <textarea> нельзя вкладывать внутрь кнопки <button>;
В <textarea> допустимо вставить произвольный текст и он отобразится внутри текстового поля для редактирования. При этом учитываются все пробелы, в отличие от обычного HTML (пример 2).
Пример 2. Текстовое поле с текстом
Результат данного примера показан на рис. 2. Обратите внимание, что учитываются все пробелы и переносы строк внутри <textarea>.
Рис. 2. Поле с текстом
Как правило, размеры <textarea> задаются с помощью стилей, но если одновременно заданы атрибуты rows и cols с шириной и высотой через CSS, то стили имеют преимущество и значение атрибутов игнорируется.