Textarea HTML шаблоны

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

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

Базовая разметка: метка, имя, строки

Полное поле поддержки требует минимум усилий. Метка, например, "Опишите проблему", указывает на элемент управления через его значение "for"; элемент управления повторяет это значение в качестве своего "id", имеет "имя", например, "сообщение", открывается на шесть строк и предлагает заполнитель, например, "номер заказа, что произошло, что вы пробовали".

Четыре детали здесь имеют решающее значение:

1. "for" в метке и соответствующий "id" в элементе управления связывают их, поэтому щелчок по тексту помещает курсор в поле, и вспомогательное программное обеспечение считывает их как одно целое;

2. "name" — это ключ, под которым поступает ответ, и поле без него ничего не добавляет; 3. "rows" задает количество видимых строк до начала прокрутки, что является честным намеком на ожидаемую длину;

3. "placeholder" показывает пример и никогда не заменяет метку, поскольку исчезает при первом нажатии клавиши.

"cols" — это горизонтальный аналог, и большинство шаблонов его опускают.

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

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

1. "required" предотвращает отправку пустого ответа и относится к полю, без которого ваша команда не может работать, обычно это описание проблемы;

2. "minlength" устанавливает минимальный уровень, при котором однословные ответы бесполезны, как в брифе проекта;

3. "maxlength" ограничивает очень длинные записи и лучше всего работает рядом со счетчиком, который "aria-describedby" связывает с элементом управления.

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

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

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

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

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