Нужен ли тег label только для чекбоксов

Нет, тег <label> используется не только для чекбоксов (<input type="checkbox">). Это универсальный HTML-элемент, предназначенный для улучшения доступности (accessibility) и юзабилити веб-форм, связывая текст описания с соответствующим элементом формы. Его использование критически важно для семантической разметки.

Назначение и преимущества тега <label>

Тег <label> решает несколько ключевых задач:

1. Улучшение доступности (A11y): Программы чтения с экрана (скринридеры) могут озвучивать связь между меткой и элементом формы, что жизненно необходимо для пользователей с нарушениями зрения.
2. Увеличение области клика: При связывании label с элементом формы кликнуть можно не только по самому элементу (например, крошечному чекбоксу), но и по тексту метки. Это особенно важно для пользователей мобильных устройств и людей с моторными нарушениями.
3. Семантическая структура: Четко указывает браузеру и вспомогательным технологиям, какой текст относится к какому элементу управления.

С какими элементами форм используется <label>

<label> может и должен использоваться с любыми элементами формы, которые требуют текстового описания:

• Чекбоксы (<input type="checkbox">) и радиокнопки (<input type="radio">): Самый классический пример.
• Текстовые поля (<input type="text">, <input type="email">, <input type="password"> и др.): Метка указывает, что именно следует вводить в поле.
• <textarea>: Многострочное текстовое поле.
• <select> (выпадающий список) и <datalist>: Метка поясняет назначение списка.
• <input type="file"> (загрузка файла)
• <input type="range"> (ползунок): Хотя для него часто дополнительно отображают текущее значение.
• Фактически, почти со всеми типами <input>.

Способы связывания <label> с элементом формы

Есть два основных метода, оба корректны с точки зрения стандартов.

1. Неявная связь (обертывание)

Элемент формы помещается внутри тега <label>.

<label>
  <input type="checkbox" name="subscribe">
  Я согласен получать рассылку
</label>

Плюс: Не требует указания id, код становится немного короче. Минус: Меньшая гибкость в позиционировании элементов с помощью CSS.

2. Явная связь с использованием атрибута for

Атрибут for тега <label> должен совпадать со значением атрибута id элемента формы.

<input type="checkbox" name="subscribe" id="subscribe-checkbox">
<label for="subscribe-checkbox">Я согласен получать рассылку</label>

Плюсы:

• Максимальная гибкость верстки: элемент и его метка могут находиться в разных частях DOM.
• Прямое и недвусмысленное указание связи, рекомендованное стандартами. Минус: Требует создания уникальных id.

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

Практический пример: форма входа

<form>
  <!-- Явная связь через for/id -->
  <label for="email">Электронная почта:</label>
  <input type="email" id="email" name="email" required>

  <br><br>

  <!-- Неявная связь (обертывание) -->
  <label>
    <input type="checkbox" name="remember">
    Запомнить меня
  </label>

  <br><br>

  <button type="submit">Войти</button>
</form>

В этом примере:

1. Клик по тексту "Электронная почта:" сфокусирует курсор в соответствующем поле ввода.
2. Клик по тексту "Запомнить меня" поставит или снимет галочку в чекбоксе.

Важные дополнительные замечания

• <fieldset> и <legend>: Для группировки связанных элементов формы (например, нескольких радиокнопок) используется контейнер <fieldset>, а <legend> предоставляет заголовок для всей группы. Это еще более мощный инструмент доступности, часто идущий рука об руку с <label>.
• Визуальное скрытие меток: Иногда дизайн требует скрыть текст метки (например, когда placeholder в поле уже выполняет ее роль). В этом случае нельзя использовать display: none или visibility: hidden, так как это скроет метку и от скринридеров. Применяют технику визуального скрытия с сохранением доступности:

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
  }
  

  <label for="search" class="visually-hidden">Поиск по сайту</label>
  <input type="search" id="search" name="q" placeholder="Введите запрос...">
  

Вывод: Тег <label> — это фундаментальный элемент доступной и удобной веб-формы. Его использование обязательно не только для чекбоксов, но и для подавляющего большинства интерактивных элементов формы. Игнорирование <label> или его некорректное применение является серьезной ошибкой в разработке интерфейсов.