HTML: Роль и использование атрибута «for» в label

Быстрый ответ

Для взаимного привязывания <label> и <input>, следует использовать атрибуты id и for вот так:

<label for="email">Электронная почта:</label>
<input type="email" id="email" name="email">

Если кто-то нажмёт на надпись "Электронная почта:", фокус автоматически сместится на поля ввода <input>. Это значительно повышает доступность интерфейса и упрощает работу с формами.

Плюсы использования атрибута 'for'

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

Усовершенствование доступности

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

Подробнее об этом расскажет наш спикер на видео

Что случится, если удалить 'for'?

Пренебрежение for может привести к путанице в ваших формах и ухудшить комфорт их использования. Отсутствие ожидающегося эффекта при клике на метку может нарушить пользовательский опыт и привести к его отказу от дальнейшего заполнения формы.

Визуализация

Можно представить связь между HTML элементом label и атрибутом for как между будильником и кнопкой отсрочки подъема:

Элементы формы ассоциируются с ващим утренним будильником:

<label for="snooze">Отложить будильник:</label>
<input id="snooze" type="button">

- `label` — это сам **будильник** (⏰), который звонит.
- Атрибут `for` — это цель в виде **отсрочки подъёма**.
- И `input` с `id` — это кнопка, которая позволяет **отложить подъем** (🛌).

Когда зазвучит будильник (метка ⏰) и вы нажмёте на кнопку отсрочки (атрибут `for`):
Пользователь обретает возможность поспать немного дольше (`#snooze` 🛌).

Эта взаимосвязь между `label` и `input` облегчает **навигацию** и повышает **доступность**.

Встроенные поля ввода: не всегда к месту

Хотя вложение элементов ввода внутрь меток может исключить необходимость в for, такой подход урезает возможности дизайна интерфейса. Метки и поля ввода становятся неразрываемыми, что может помешать в разработке сложных форм с особыми требованиями к размещению элементов.

Метки и сенсорные устройства: абсолютно идеальное сочетание

На сенсорных устройствах большие зоны взаимодействия являются нормой. Связанные метки выполняют здесь свою ключевую роль, делая взаимодействие с формой простым и интуитивно понятным.

Внедрение семантической ясности

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

Полезные материалы

1. <label>: Элемент Label – HTML: HyperText Markup Language | MDN — подробное описание HTML-элемента <label>.
2. HTML label for Attribute – W3Schools — наставление по использованию атрибута for с примерами.
3. Labeling Controls | Инициатива Веб-Доступности (WAI) | W3C — рекомендации W3C по оформлению меток для форм с точки зрения доступности.
4. WebAIM: Создание доступных форм – Элементы управления формами — материалы о формах с упором на правильное их оформление.
5. UX и HTML5: поможем пользователю заполнить вашу мобильную форму (часть 2) — Smashing Magazine — советы по совершенствованию форм и пользовательского опыта с применением HTML5.