HTML | Элемент textarea — efim360.ru

HTML | Элемент textarea

Атрибуты содержимого

Элемент может иметь все глобальные атрибуты.

Элемент может иметь собственные атрибуты:

  1. autocomplete — Подсказка для функции автозаполнения формы
  2. cols — Максимальное количество символов в строке
  3. dirname — Имя элемента управления формы, используемого для отправки направления элемента при отправке формы
  4. disabled — Отключено ли управление формой
  5. form — Связывает элемент с элементом формы form
  6. maxlength — Максимальная длина значения
  7. minlength — Минимальная длина значения
  8. name — Имя элемента, используемого для отправки формы и в API form.elements
  9. placeholder — Видимая пользователем метка для размещения в элементе управления формы
  10. readonly — Разрешить ли пользователю редактировать значение
  11. required — Требуется ли элемент управления для отправки формы
  12. rows — Количество строк для отображения
  13. wrap — Как значение элемента управления формы должно быть упаковано для отправки формы

 

Описание

Элемент textarea представляет собой элемент управления редактирования многострочного простого текста для «необработанного значения» элемента (raw value). Содержимое элемента управления представляет значение элемента управления по умолчанию.

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

Атрибут readonly — это логический атрибут, используемый для управления тем, может ли текст редактироваться пользователем или нет.

Пример

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

Filename: <code>/etc/bash.bashrc</code>
<textarea name="buffer" readonly>
# Общесистемный файл .bashrc для интерактивных оболочек bash(1).

# Чтобы включить настройки/команды в этом файле и для оболочек входа в систему, 
# этот файл должен быть получен в /etc/profile.

# Если не работает в интерактивном режиме, ничего не делайте
[ -z "$PS1" ] &amp;&amp; return

...</textarea>

Проверка ограничения: если для элемента textarea указан атрибут readonly, этот элемент не подлежит проверке ограничения.

Элемент textarea является изменяемым, если он не отключен и не имеет указанного атрибута только для чтения readonly.

Когда текстовая область textarea является изменяемой, её необработанное значение должно быть доступно для редактирования пользователем: пользовательский агент должен разрешать пользователю редактировать, вставлять и удалять текст, а также вставлять и удалять разрывы строк в форме U+000A LINE FEED (LF) символы. Каждый раз, когда пользователь вызывает изменение необработанного значения элемента, пользовательский агент должен поставить в очередь задачу элемента в источнике задачи взаимодействия с пользователем, учитывая элемент textarea, чтобы запустить событие с именем «input» в элементе textarea, с атрибутами bubbles и composed, инициализированными значением true. Пользовательские агенты могут дождаться подходящей паузы во взаимодействии с пользователем, прежде чем поставить задачу в очередь; например, пользовательский агент может ждать, пока пользователь не нажмет клавишу, в течение 100 мс, чтобы запускать событие только тогда, когда пользователь делает паузу, а не непрерывно для каждого нажатия клавиши.

Флаг грязного значения элемента textarea должен быть установлен в значение true всякий раз, когда пользователь взаимодействует с элементом управления таким образом, что изменяется необработанное значение.

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

Дочерние изменённые шаги для элементов textarea должны, если флаг грязного значения элемента равен false, установить необработанное значение элемента в его дочернее текстовое содержимое.

Алгоритм сброса для элементов textarea заключается в том, чтобы установить флаг грязного значения обратно в false и установить необработанное значение элемента в его дочернее текстовое содержимое.

Когда элемент textarea извлекается из стека открытых элементов синтаксического анализатора HTML или синтаксического анализатора XML, тогда пользовательский агент должен вызвать алгоритм сброса элемента.

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

  1. Установите для атрибута dir элемента значение «ltr», если пользователь выбрал направление письма слева направо, и «rtl», если пользователь выбрал направление письма справа налево.
  2. Поставьте в очередь задачу элемента в источнике задачи взаимодействия с пользователем с заданным элементом textarea, чтобы вызвать событие с именем input в элементе textarea, при этом атрибуты bubbles и composed инициализируются значением true.

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

Пользовательский агент может использовать ширину символа элемента textarea в качестве подсказки пользователю о том, сколько символов сервер предпочитает в строке (например, для визуальных пользовательских агентов, делая ширину элемента управления равной этому количеству символов). В визуальных рендерингах пользовательский агент должен оборачивать пользовательский ввод в рендеринг, чтобы каждая строка была не шире, чем это количество символов.

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

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

 

Атрибут wrap — это перечисляемый атрибут с двумя ключевыми словами и состояниями: ключевое слово soft, которое соответствует состоянию Soft, и ключевое слово hard, которое соответствует состоянию Hard. Отсутствующее значение по умолчанию и недопустимое значение по умолчанию — это мягкое состояние Soft.

Мягкое состояние (Soft state) указывает, что текст в текстовой области textarea не должен быть обёрнут при его отправке (хотя он все ещё может быть обёрнут во время рендеринга).

Жёсткое состояние (Hard state) указывает, что текст в текстовой области textarea должен иметь новые строки, добавленные пользовательским агентом, чтобы текст переносился при его отправке.

Если атрибут wrap элемента находится в состоянии Hard, необходимо указать атрибут cols.

По историческим причинам значение элемента нормализуется тремя разными способами для трёх разных целей. Необработанное значение — это значение, которое было установлено изначально. Это не нормализовано. Значение API — это значение, используемое в атрибуте IDL value, атрибуте IDL textLength, а также в атрибутах содержимого maxlength и minlength. Он нормализован таким образом, что для разрывов строк используются символы U+000A LINE FEED (LF). Наконец, есть значение, используемое в представлении формы и других моделях обработки в этой спецификации. Оно нормализовано как для значения API, и, кроме того, при необходимости, учитывая атрибут переноса wrap элемента, вставляются дополнительные разрывы строк для переноса текста на заданную ширину.

Алгоритм получения значения API элемента заключается в возврате необработанного значения элемента с нормализованными символами новой строки.

Значение элемента определяется как значение API элемента с применённым преобразованием переноса текстовой области. Преобразование переноса текстовой области (textarea wrapping transformation) представляет собой следующий алгоритм применительно к строке:

  1. Если атрибут wrap элемента находится в жёстком состоянии, вставьте в строку символы U+000A LINE FEED (LF) с использованием алгоритма, определённого реализацией, чтобы каждая строка содержала не более символов ширины символа. Для целей этого требования строки разделяются началом строки, концом строки и символами U+000A LINE FEED (LF).

Атрибут maxlength является атрибутом maxlength управления формой.

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

Атрибут minlength является атрибутом minlength управления формой.

Атрибут required является логическим атрибутом. Если указано, пользователю потребуется ввести значение перед отправкой формы.

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

Атрибут placeholder представляет собой короткую подсказку (слово или короткую фразу), предназначенную для помощи пользователю при вводе данных, когда элемент управления не имеет значения. Подсказкой может быть образец значения или краткое описание ожидаемого формата.

Атрибут placeholder не следует использовать в качестве альтернативы метке label. Для более длинной подсказки или другого консультативного текста больше подходит атрибут title.

Примечание

Эти механизмы очень похожи, но слегка различаются: подсказка, заданная меткой label элемента управления, отображается постоянно; короткая подсказка, указанная в атрибуте заполнителя placeholder, отображается до того, как пользователь введет значение; и подсказка в атрибуте заголовка title отображается, когда пользователь запрашивает дополнительную помощь.

Пользовательские агенты должны представить эту подсказку пользователю, когда значение элемента является пустой строкой, а элемент управления не сфокусирован (например, отображая его внутри пустого элемента управления без фокуса). Все пары символов U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) в подсказке, а также все другие символы U+000D CARRIAGE RETURN (CR) и U+000A LINE FEED (LF) в подсказке должны быть обработаны как разрывы строк при отображении подсказки.

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

 

Атрибут name представляет имя элемента. Атрибут dirname управляет тем, как направляется элемент. Атрибут disabled используется, чтобы сделать элемент управления неинтерактивным и предотвратить отправку его значения. Атрибут формы form используется для явного связывания элемента textarea с его владельцем формы. Атрибут автозаполнения autocomplete управляет тем, как пользовательский агент обеспечивает поведение автозаполнения.

Для веб-разработчиков (не нормативно)

textarea.type

Возвращает строку «textarea«.

textarea.value

Возвращает текущее значение элемента.

Можно установить, чтобы изменить значение.

 

IDL-атрибуты cols, placeholder, required, rows и wrap должны отражать соответствующие атрибуты содержимого с тем же именем. Атрибуты cols и rows ограничены только неотрицательными числами больше нуля с откатом. Значение по умолчанию IDL-атрибута cols равно 20. Значение по умолчанию IDL-атрибута rows равно 2. IDL-атрибут dirName должен отражать атрибут содержимого dirname. IDL-атрибут maxLength должен отражать атрибут содержимого maxlength, ограниченный только неотрицательными числами. IDL-атрибут minLength должен отражать атрибут содержимого minlength, ограниченный только неотрицательными числами. Атрибут readOnly IDL должен отражать атрибут содержимого только для чтения.

IDL-атрибут типа type должен возвращать значение «textarea«.

Метод получения атрибута defaultValue должен возвращать дочернее текстовое содержимое элемента.

Установщик атрибута defaultValue должен заменить строку везде заданным значением в этом элементе.

IDL-атрибут value должен при получении возвращать значение API элемента. При настройке он должен выполнить следующие шаги:

  1. Пусть oldAPIValue будет значением API этого элемента.
  2. Установите необработанное значение этого элемента в новое значение.
  3. Установите для флага грязного значения этого элемента значение true.
  4. Если новое значение API отличается от oldAPIValue, то переместите позицию курсора ввода текста в конец текстового элемента управления, отменив выделение любого выделенного текста и сбросив направление выбора на «none«.

IDL-атрибут textLength должен возвращать длину значения API элемента.

IDL-атрибуты willValidate, validity и validationMessage, а также методы checkValidity(), reportValidity() и setCustomValidity() являются частью API проверки ограничений. IDL-атрибут labels предоставляет список меток элемента — label. Методы select(), selectionStart, selectionEnd, selectionDirection, setRangeText() и setSelectionRange(), а также атрибуты IDL отображают выделение текста элементом. IDL-атрибуты disabled, form и name являются частью API форм элемента.

 

Пример

Вот пример текстовой области textarea, используемой для неограниченного ввода текста в произвольной форме в форму:

<p>Если у вас есть какие-либо комментарии, сообщите нам об этом: <textarea cols=80 name=comments></textarea></p>

Чтобы указать максимальную длину комментариев, можно использовать атрибут maxlength:

<p>Если у вас есть краткие комментарии, сообщите нам об этом: <textarea cols=80 name=comments maxlength=200></textarea></p>

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

<p>Если у вас есть какие-либо комментарии, сообщите нам об этом: <textarea cols=80 name=comments>Ты жжёшь!</textarea></p>

Вы также можете указать минимальную длину. Здесь письмо должно быть заполнено пользователем; шаблон (длина которого короче минимальной) предоставляется, но его недостаточно для отправки формы:

<textarea required minlength="500">Уважаемая госпожа спикер,
По поводу вашего письма от ...
...
Искренне Ваш,
...</textarea>

Также можно указать заполнитель, чтобы предложить пользователю базовую форму без явного шаблона:

<textarea placeholder="Дорогая Франсин,

Они закрыли парки на этой неделе, так что мы не сможем
встретимся там. Мы должны просто поужинать?

Люблю,
Папочка"></textarea>

Чтобы браузер передал направленность элемента вместе со значением, можно указать атрибут dirname:

<p>Если у вас есть какие-либо комментарии, пожалуйста, дайте нам знать (вы можете использовать английский или иврит для своих комментариев): <textarea cols=80 name=comments dirname=comments.dir></textarea></p>

 

Информационные ссылки

HTML | Оглавление

JavaScript | Как создать HTML-элемент textarea?

HTML — Раздел «The textarea element» — https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element