<textarea>: Элемент textarea

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

Данный пример демонстрирует ряд функций <textarea>:

• Атрибут id для связи поля <textarea> с элементом <label> в целях доступности
• Атрибут name для задания имени связанной точки данных, передаваемой на сервер при отправке формы.
• Атрибуты rows и cols для задания точного размера <textarea>. Установка этих атрибутов рекомендуется для обеспечения согласованности, поскольку значения по умолчанию в браузерах могут отличаться.
• Текст по умолчанию, введённый между открывающим и закрывающим тегами. <textarea> не поддерживает атрибут value.

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

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

autocapitalize

Управляет автоматическим прописным написанием введённого текста и, при необходимости, способом его форматирования. Для получения дополнительной информации см. страницу глобального атрибута autocapitalize.

autocomplete

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

• off: Пользователь должен вводить значение в поле для каждого использования, или документ предоставляет собственный метод автозаполнения; браузер не автоматически заполняет поле.
• on: Браузер может автоматически заполнить значение на основе значений, которые пользователь вводил ранее.

Если атрибут autocomplete не указан для элемента <textarea>, браузер использует значение атрибута autocomplete владельца формы <textarea>. Владелец формы — это либо элемент <form>, вложенный в элемент <textarea>, либо элемент формы, чьё значение id указано атрибутом form элемента ввода. Для получения дополнительной информации см. атрибут 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.

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

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

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

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

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;
}

Результат

В этом примере установлено минимальное и максимальное количество символов — соответственно 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>