Textarea HTML шаблоны

HTML-шаблоны textarea для структурированных полей

Большинство проблем с многострочным полем начинается в разметке: метка не привязана к полю, отсутствует имя для отправки данных, нет подсказки, чего ждут от пользователя — двух предложений или двух абзацев. Шаблон «textarea» в первую очередь решает эти задачи.

Базовая разметка: Label, Name, Rows

Полноценному полю поддержки требуется немногое. Метка вроде «Опишите проблему» указывает на элемент управления через значение атрибута «for»; элемент управления повторяет это значение в виде «id», содержит «name», например «message», открывается с высотой в шесть строк и предлагает placeholder вроде «номер заказа, что произошло, что вы пробовали сделать».

Четыре детали играют решающую роль:

1. «for» у метки и соответствующий «id» у элемента управления связывают их вместе, благодаря чему клик по тексту переводит курсор в поле, а скринридеры озвучивают их как единое целое;
2. «name» — это ключ, под которым приходят введенные данные, и поле без него ничего не отправляет;
3. «rows» задает количество видимых строк до появления прокрутки, служа наглядной подсказкой об ожидаемом объеме текста;
4. «placeholder» показывает пример и никогда не заменяет метку, так как исчезает при первом нажатии клавиши.

«cols» является горизонтальным аналогом, и в большинстве шаблонов его опускают.

Атрибуты для обязательных или ограниченных по длине ответов

Краткий комментарий и заявка на гарантию требуют разных условий, и три атрибута закрывают большую часть этих задач:

1. «required» предотвращает отправку пустой формы и необходим для поля, без которого работа невозможна (обычно это описание проблемы);
2. «minlength» задает нижний порог в случаях, когда ответы из одного слова бесполезны, например в техническом задании;
3. «maxlength» ограничивает чрезмерно длинные записи и лучше всего работает в паре со счетчиком, привязанным к элементу управления через «aria-describedby».

В результате получаются заметно различающиеся шаблоны. Сообщение в службу поддержки сохраняет обязательность заполнения, шесть строк и лимит около 1200 символов. Описание проекта занимает 10 строк с нижним порогом примерно в 80 символов. Отзыв остается необязательным и неограниченным по объему, поскольку минимальный порог отбивал бы желание писать.

Доступный порядок элементов перед отправкой

Последовательность элементов в документе имеет такое же значение, как и атрибуты. Сначала метка, затем вспомогательный текст при наличии, далее элемент управления, а затем область для сообщения валидации. При чтении вслух такой порядок логичен, а пользователь, переключающийся клавишей Tab, знакомится с пояснением до перехода к пустому полю. «aria-describedby» связывает поясняющий текст и счетчик символов с элементом управления, и никакой placeholder не заменит эту связь.

Nicepage выстраивает такую же структуру с помощью компонента Contact Form Element, поддерживающего правильный порядок меток, полей ввода и отправки данных.

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