<textarea> HTML-элемент textarea

Элемент <textarea> HTML представляет собой элемент управления для редактирования обычного текста в нескольких строках. Он полезен, когда нужно позволить пользователям вводить большой объём произвольного текста, например комментарий к отзыву или сообщение в форме обратной связи.

Попробуйте

<label for="story">Tell us your story:</label>

<textarea id="story" name="story" rows="5" cols="33">
It was a dark and stormy night...
</textarea>

label,
textarea {
  font-size: 0.8rem;
  letter-spacing: 1px;
}

textarea {
  padding: 10px;
  max-width: 100%;
  line-height: 1.5;
  border-radius: 5px;
  border: 1px solid #cccccc;
  box-shadow: 1px 1px 1px #999999;
}

label {
  display: block;
  margin-bottom: 10px;
}

В приведённом выше примере показаны несколько возможностей <textarea>:

• Атрибут id позволяет связать <textarea> с элементом <label> для обеспечения доступности
• Атрибут name задаёт имя связанной точки данных, отправляемой на сервер при отправке формы.
• Атрибуты rows и cols позволяют задать точный размер <textarea>. Их стоит задать для единообразия, поскольку значения по умолчанию в разных браузерах могут отличаться.
• Элемент <textarea> задаёт своё содержимое по-разному в контекстах HTML и JavaScript:
  • В HTML начальное содержимое <textarea> указывается между открывающим и закрывающим тегами, а не в виде атрибута value.
  • В JavaScript у элементов <textarea> есть свойство value, с помощью которого можно получить или задать текущее содержимое, и свойство defaultValue, с помощью которого можно получить или задать начальное значение (эквивалентно обращению к текстовому содержимому HTML-элемента).

Элемент <textarea> также поддерживает несколько атрибутов, общих для <input> форм, например autocapitalize, autocomplete, autofocus, disabled, placeholder, readonly и required.

Атрибуты

Этот элемент включает глобальные атрибуты.

autocapitalize

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

autocomplete

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

• off: пользователь должен явно вводить значение в это поле при каждом использовании либо документ предоставляет собственный способ автозаполнения; браузер не заполняет поле автоматически.
• on: браузер может автоматически заполнить значение на основе данных, введённых пользователем ранее.
• <token-list>: упорядоченный набор разделённых пробелами токенов автозаполнения, которому могут предшествовать токен раздела, токен группы выставления счёта или доставки и/или токен, указывающий тип получателя.

Элементы <textarea>, в которых не указан атрибут autocomplete, наследуют состояние autocomplete on или off, заданное для владельца формы элемента <textarea>. Владельцем формы является либо элемент <form>, потомком которого является этот элемент <textarea>, либо элемент формы, чей id указан в атрибуте form элемента input. Дополнительные сведения см. в описании атрибута autocomplete элемента <form>.

autocorrect

Управляет включением автоматической коррекции орфографии и обработки текста во время редактирования пользователем этого элемента textarea. Допустимые значения:

on

Включить автоматическую коррекцию орфографии и замену текста.

off

Отключить автоматическую коррекцию орфографии и замену текста.

autofocus

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

cols

Видимая ширина текстового элемента управления в среднем количестве символов. Если атрибут указан, его значение должно быть положительным целым числом. Если атрибут не указан, используется значение по умолчанию 20.

dirname

Этот атрибут указывает направление текста содержимого элемента. Дополнительные сведения см. в описании атрибута dirname.

disabled

Этот булев атрибут указывает, что пользователь не может взаимодействовать с элементом управления. Если атрибут не указан, элемент управления наследует настройку родительского элемента, например <fieldset>; если у элемента, для которого задан атрибут disabled, нет родительского элемента, элемент управления включён.

form

Элемент формы, с которым связан элемент <textarea> (его «владелец формы»). Значением атрибута должен быть id элемента формы в том же документе. Если атрибут не указан, элемент <textarea> должен быть потомком элемента формы. Этот атрибут позволяет размещать элементы <textarea> в любом месте документа, а не только внутри элементов формы.

maxlength

Максимальная длина строки (измеряемая в кодовых единицах UTF-16), которую может ввести пользователь. Если значение не указано, пользователь может ввести неограниченное количество символов.

minlength

Минимальная длина строки (измеряемая в кодовых единицах UTF-16), которую должен ввести пользователь.

name

Имя элемента управления.

placeholder

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

Примечание: Заполнители следует использовать только для примера типа данных, которые нужно ввести в форму; они не заменяют полноценный элемент <label>, связанный с полем ввода. Подробное объяснение см. в разделе Метки <input>.

readonly

Этот булев атрибут указывает, что пользователь не может изменить значение элемента управления. В отличие от атрибута disabled, атрибут readonly не мешает пользователю нажимать на элемент управления или выбирать в нём текст. Значение элемента управления, доступного только для чтения, по-прежнему отправляется вместе с формой.

required

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

rows

Количество видимых строк текста в элементе управления. Если атрибут указан, его значение должно быть положительным целым числом. Если атрибут не указан, значение по умолчанию — 2.

spellcheck

Указывает, проверяет ли браузер/ОС орфографию в элементе <textarea>. Возможные значения:

• true: указывает, что в элементе нужно проверять орфографию и грамматику.
• default : указывает, что элемент должен следовать поведению по умолчанию, которое может зависеть от значения spellcheck родительского элемента.
• false : указывает, что в элементе не следует проверять орфографию.

wrap

Указывает, как элемент управления должен переносить значение при отправке формы. Возможные значения:

• hard: браузер автоматически вставляет разрывы строк (CR+LF), чтобы длина каждой строки не превышала ширину элемента управления; для этого необходимо указать атрибут cols
• soft: браузер гарантирует, что все разрывы строк во введённом значении будут представлены парой CR+LF, но не добавляет в значение дополнительные разрывы строк.
• off : как soft, но отображается как white-space: pre: строки, превышающие cols, не переносятся, а элемент <textarea> становится прокручиваемым по горизонтали.

Если этот атрибут не указан, по умолчанию используется значение soft.

Стилизация с помощью CSS

<textarea> — это замещаемый элемент с внутренними размерами, как у растрового изображения. По умолчанию его значение display равно inline-block. По сравнению с другими элементами формы его довольно легко стилизовать: блочная модель, шрифты, цветовую схему и другие свойства можно настраивать с помощью обычного CSS.

В статье Стилизация HTML-форм приведены полезные советы по оформлению элементов <textarea>.

Несогласованность базовой линии

Спецификация HTML не определяет положение базовой линии элемента <textarea>, поэтому разные браузеры задают её по-разному. В Gecko базовая линия <textarea> проходит по базовой линии первой строки текстовой области, а в другом браузере она может проходить по нижнему краю блока <textarea>. Не используйте для него vertical-align: baseline: поведение непредсказуемо.

Управление возможностью изменения размера текстовой области

В большинстве браузеров размер элементов <textarea> можно изменить — в правом нижнем углу виден маркер перетаскивания, с помощью которого можно менять размер элемента на странице. Это регулируется свойством CSS resize. Изменение размера включено по умолчанию, но его можно явно отключить, задав значение none для свойства resize:

textarea {
  resize: none;
}

Стилизация допустимых и недопустимых значений

Допустимые и недопустимые значения элемента <textarea> (например, значения в пределах и за пределами ограничений, заданных атрибутами minlength, maxlength или required) можно выделить с помощью псевдоклассов :valid и :invalid. Например, можно задать для текстовой области разные границы в зависимости от того, допустимо ли её значение:

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

Примеры

Простой пример

В следующем примере показана текстовая область с заданным количеством строк и столбцов, начальным содержимым и стилями CSS, не позволяющими пользователям увеличивать её ширину более чем до 500 пикселей, а высоту — более чем до 130 пикселей:

<textarea name="textarea" rows="5" cols="15">Write something here</textarea>

textarea {
  max-height: 130px;
  max-width: 500px;
}

Результат

Пример с использованием «minlength» и «maxlength»

В этом примере задано минимальное и максимальное количество символов — соответственно 10 и 20. Попробуйте сами.

<textarea name="textarea" rows="5" cols="30" minlength="10" maxlength="20">
Write something here…
</textarea>

textarea {
  max-height: 130px;
  max-width: 500px;
}

Результат

Обратите внимание: minlength не мешает пользователю удалять символы, чтобы введённое количество стало меньше минимального, но при этом делает значение, введённое в <textarea>, недопустимым. Также учтите, что даже если задано значение minlength (например, 3), пустое значение <textarea> всё равно считается допустимым, если не задан атрибут required.

Пример с использованием «placeholder»

В этом примере задан заполнитель. Обратите внимание, как он исчезает, когда вы начинаете вводить текст в поле.

<textarea
  name="textarea"
  rows="5"
  cols="30"
  placeholder="Comment text."></textarea>

textarea {
  max-height: 130px;
  max-width: 500px;
}

Результат

Отключённые текстовые области и текстовые области только для чтения

В этом примере показаны два элемента <textarea> — один readonly, а другой disabled. Вы не можете редактировать содержимое ни одного из этих элементов, но элемент readonly может получать фокус, и его значение отправляется вместе с формами. Значение элемента disabled не отправляется, и он не может получать фокус.

<textarea name="textarea" rows="5" cols="30" readonly>
I am a read-only textarea.
</textarea>
<textarea name="textarea" rows="5" cols="30" disabled>
I am a disabled textarea.
</textarea>

textarea {
  display: block;
  resize: horizontal;
  max-width: 500px;
}

Результат

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• Другие элементы, связанные с формами:
  • <form>
  • <button>
  • <datalist>
  • <legend>
  • <label>
  • <select>
  • <optgroup>
  • <option>
  • <input>
  • <fieldset>
  • <output>
  • <progress>
  • <meter>