Тег <label>

Метка элемента формы
  • Категории: Потоковое содержимое, Фразовое содержимое, Интерактивное содержимое
  • Контекст:

    Где ожидается фразовое содержимое.

  • Модель:

    Фразовое содержимое, кроме других интерактивных элементов.

Тег <label> (от англ. "label" - метка) используется для связи элемента формы с ее описанием. Является интерактивным элементом, любой клик по меткие или выбор ее через клавиатуру, приведет к появлению фокуса на связанном элементе. За счет увеличения области взаимодействия с элементами формы также улучшается и их доступность. Особенно это актуально для маленьких элементов, таких как чекбоксы.

Связать элемент с его меткой можно двумя способами:

  1. Поместить элемент внутрь метки
  2. При помощи атрибута for метки и id элемента

Атрибуты

  • Глобальные атрибуты
  • for - связь с элементов формы по ID

  • Связь с элементом по ID

    Чтобы связать поле с его описанием, используется тег <label>. Поле при этом должно иметь уникальный идентификатор, заданный атрибутом id, а подпись - атрибут for с соответствующим значением. Идентификатор поля может совпадать с его именем, но это не обязательно.

  • Связь с вложенным элементом

    Мы можем вложить поле и непосредственно в элемент <label>. Это также создаст между ними связь. Однако, даже в этом случае желательно связывать их через атрибуты for и id. Это может быть важно для доступности на сторонних устройствах.

  • Мелкие элементы

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

  • Интерактивные элементы внутри метки

    Если метка содержит интерактивный элемент, такой как ссылка, клик по ней не приведет к появлению фокуса на элементе.

Поделитесь данной записью с друзьями