Можно ли задать два label для одного input в HTML?

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

Да, поле ввода способно обладать не одной, а несколькими метками. Для этого необходимо предусмотреть отдельное описание для каждой метки и связать их все с одним и тем же идентификатором (id) поля ввода. Такой подход улучшает визуальное восприятие и повышает уровень доступности при взаимодействии со сложными формами.

<label for="user-email">Рабочий e-mail</label>
<label for="user-email">Предпочтительный канал связи</label>
<input type="email" id="user-email" name="email">

Сущность применения множественных меток

Использование нескольких меток позволяет пользователям получить более подробное понимание функциональности полей формы в процессе ввода сложных данных. К примеру, метки поля для электронной почты могут быть как "Логин", так и "Адрес подписки", тем самым указывая, что данное поле может использоваться в различных контекстах.

Экранные читалки и взаимодействие с метками

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

<fieldset>
  <legend>Электронный адрес</legend>
  <label for="user-email">Логин</label>
  <input type="email" id="user-email" name="email">
  <label for="user-email">Адрес подписки</label>
</fieldset>

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

Сравнив несколько меток HTML с ролями в аристократии, можно представить следующую картину:

Король (🤴): [Одна корона (👑)]
Королева (👸): [Одна корона (👑)]

В данном контексте, поле ввода может исполнять различные роли:

Герцог Input (💼): [Метка Торговли (💰), Метка Личной информации (🖊️)]

Это означает, что одна метка выполняет определенную роль, а поле ввода может соответствовать нескольким меткам сразу.

📜 Одно поле ввода с ДВУМЯ метками 🏰:
💰 "Цена"
🖊️ "Стоимость"
// Ведь мы действительно не в мире медиевальной HTML-монархии?

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

Создание и лучшие практики дизайна с множественными метками

Навигационные моменты в оформлении форм

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

<label for="user-email">Логин:</label>
<br>
<span>Также используется в качестве адреса для подписки на наши новости.</span>
<br>
<label for="user-email">Адрес подписки:</label>
<input type="email" id="user-email" name="email">

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

Разработка доступной обработки ошибок

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

Правильное связывание меток и полей ввода

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

<label for="user-name">Имя</label>
<input type="text" id="user-name" name="username">
<label for="user-name">Личное имя</label>

Оценка преимуществ и недостатков

Задумываясь о применении множества меток, обдумайте все преимущества и недостатки такого подхода. Вносят ли они ясность в дизайн или, наоборот, создают смуту? Будьте внимательны при реализации, чтобы не создать информационный хаос, сравнимый с заказом пиццы со всеми возможными наполнителями на одной тарелке.

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

1. Описательные элементы | Веб-доступность (WAI) | W3C — ценное руководство, помогающее разобраться в роли меток для обеспечения доступности форм в HTML.
2. HTML Стандарт — обязательный источник для изучения спецификации элемента label в HTML.
3. <label>: Элемент Метка – HTML: HyperText Markup Language | MDN — подробное руководство от MDN о применении элементов label и лучших практиках в HTML.
4. Обсуждение применения множественных меток для поля ввода — ветка на Stack Overflow, освещающая вопрос о нескольких метках для поля ввода и поделившиеся своим опытом разработчики.
5. WebAIM: Создание доступных форм – Элементы управления формами — содержит подробный обзор по работе с формами с точки зрения их доступности.
6. Местозаполнители в формах: в чем подводные камни — статья, которая затрагивает проблемы дизайна форм на протяжении последних 20 лет.
7. Обзор WCAG 2 — сборник основных принципов и рекомендаций по необходимым условиям для обеспечения доступности веб-форм.