Данный элемент формы предназначен для создания области, в которой можно вводить несколько строк текста. В таком текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Поле для многострочного текста незаменимо для добавления комментариев к статьям, написания сообщений форума, вставки и редактирования постов в блоге и во многих других случаях, когда одной строки текста явно недостаточно.
Синтаксис создания поля следующий.
<textarea>
</textarea>
Между тегов <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля. Если текста нет, то поле будет изначально пустым.
Допустимые атрибуты перечислены в табл. 1.
Табл. 1. Атрибуты <textarea>
| Атрибут |
Описание |
| name |
Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| disabled |
Блокирует поле и не отправляет данные на сервер. |
| form |
Идентификатор формы для связывания поля с элементом <form>. |
| maxlength |
Устанавливает максимальное число символов, которое может быть введено
пользователем в поле. Когда это количество достигается при наборе,
дальнейший ввод становится невозможным. |
| readonly |
Блокирует поле для ввода текста. |
| autofocus |
Поле получает фокус после загрузки документа. |
| required |
Указывает, что поле является обязательным для заполнения. |
| placeholder |
Добавляет подсказку, которая исчезает при вводе текста. |
| dirname |
Имя переменной, которая отправляется на сервер и автоматически получает значение ltr (для текста слева направо) или rtl (для текста справа налево). |
| rows |
Высота поля в строках текста. |
| wrap |
Значение soft передаёт на сервер текст одной строкой, а hard учитывает значение cols и автоматически добавляет переносы. |
| cols |
Ширина поля в символах. |
Создание поля для многострочного текста показано в примере 1.
Пример 1. Текстовое поле
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текстовое поле</title>
</head>
<body>
<form action="handler.php">
<p><strong>Введите ваш отзыв:</strong></p>
<p><textarea name="comment"></textarea></p>
<p><input type="submit"></p>
</form>
</body>
</html>
Результат примера показан на рис. 1.
Рис. 1. Вид текстового поля по умолчанию
Для <textarea> действуют те же ограничения, что и для <input>, а именно:
- <textarea> нельзя вкладывать внутрь ссылки <a>;
- <textarea> нельзя вкладывать внутрь кнопки <button>;
В <textarea> допустимо вставить произвольный текст и он отобразится внутри текстового поля для редактирования. При этом учитываются все пробелы, в отличие от обычного HTML (пример 2).
Пример 2. Текстовое поле с текстом
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текстовое поле</title>
</head>
<body>
<form action="handler.php">
<p><strong>Отредактируйте ваш отзыв:</strong></p>
<p><textarea name="edit" rows="3" cols="30">
КГ/АМ
выпий йаду.
</textarea></p>
<p><input type="submit"></p>
</form>
</body>
</html>
Результат данного примера показан на рис. 2. Обратите внимание, что учитываются все пробелы и переносы строк внутри <textarea>.
Рис. 2. Поле с текстом
Как правило, размеры <textarea> задаются с помощью стилей, но если одновременно заданы атрибуты rows и cols с шириной и высотой через CSS, то стили имеют преимущество и значение атрибутов игнорируется.
Перейти к заданиям
Автор: Влад Мержевич
Последнее изменение: 05.08.2023