Многострочный текст

Данный элемент формы предназначен для создания области, в которой можно вводить несколько строк текста. В таком текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.

Поле для многострочного текста незаменимо для добавления комментариев к статьям, написания сообщений форума, вставки и редактирования постов в блоге и во многих других случаях, когда одной строки текста явно недостаточно.

Синтаксис создания поля следующий.

<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, то стили имеют преимущество и значение атрибутов игнорируется.

Перейти к заданиям

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 28.07.2016
Редакторы: Влад Мержевич