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



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

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

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

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

<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 Explorer Opera
Internet Explorer Opera
 
Chrome Firefox
Chrome Firefox

Текст внутри блокированного поля нельзя выделить и добавить, также содержимое такого поля не отправляется формой на сервер. Текст внутри поля для чтения доступен для копирования, но его нельзя отредактировать. В примере 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, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.