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

Влад Мержевич

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

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

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

<textarea атрибуты>
  Текст
</textarea>

Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля. Если текста нет, то поле будет изначально пустым.

Допустимые атрибуты перечислены в табл. 1.

Табл. 1. Атрибуты тега <textarea>
АтрибутОписание
colsШирина поля в символах.
disabledБлокирует доступ и изменение элемента.
maxlengthМаксимальное число символов текста, которое можно ввести.
nameИмя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
readonlyУстанавливает, что поле не может изменяться пользователем.
rowsВысота поля в строках текста.
wrapПараметры переноса строк.

Создание поля многострочного текста показано в примере 6.1.

Ни один из этих атрибутов не является обязательным, поэтому простая форма для отправки текста выглядит так (пример 1).

Пример 1. Текстовое поле

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текстовое поле</title>
 </head>
 <body> 
 <form action="handler.php">
  <p><b>Введите ваш отзыв:</b></p>
  <p><textarea name="comment"></textarea></p>
  <p><input type="submit"></p>
 </form>
 </body>
</html>

Результат примера в браузере Chrome показан на рис. 1.

Рис. 1. Вид текстового поля по умолчанию

Дополнительно поле может находиться в двух состояниях — блокированном и только для чтения. Спецификация HTML5 не определяет вид поля и текста в подобных состояниях, поэтому браузеры по-разному его отображают (рис. 2).

Internet ExplorerOpera
Internet ExplorerOpera
 
ChromeFirefox
ChromeFirefox

Текст внутри блокированного поля нельзя выделить и добавить, также содержимое такого поля не отправляется формой на сервер. Текст внутри поля для чтения доступен для копирования, но его нельзя отредактировать. В примере 2 показан способ создания поля для чтения.

Пример 2. Поле для чтения

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Поле для чтения</title>
 </head>
 <body> 
 <form action="handler.php">
  <p>Скопируйте приведённый текст и вставьте его в 
  поле запроса пароля.</p>
  <p><textarea name="comment" readonly>Мухаха</textarea></p>
 </form>
 </body>
</html>

Учтите, что поле для чтения по своему виду не отличается от обычного текстового поля, но пользователь не сможет в него ничего добавить. Так что используйте его осмотрительно, чтобы не вводить людей в заблуждение.

HTML по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.