HTML тег <label>
Тег <label> определяет текстовую метку для тега <input>. Метка представляет собой обычный текст, кликнув по которому, пользователь может выбрать элемент формы. Она облегчает использование формы, так как в элементы формы не всегда удобно попасть курсором.
Синтаксис
Тег <label> парный, текст размещается между открывающим (<label>) и закрывающим (</label>) тегами.
Тег <label> также используется для определения горячих клавиш на клавиатуре и перехода на активный элемент подобно ссылкам.
Связать текстовую метку и форму, к которой она относится, можно двумя способами:
<label>
Элемент <label> используется для создания подписи к элементу формы:
Пример
Как пишется
Как это понять
На многих веб-страницах есть формы — группы интерактивных элементов (полей ввода, выпадающих списков, чекбоксов и т.п.), связанных общим функциональным назначением. Яркие примеры форм — форма регистрации, форма входа, фильтры в каталогах. Формами удобно пользоваться, когда мы понимаем назначение каждого элемента. Для этого необходимо подписывать каждый элемент. И вот как раз для этих целей служит элемент <label> .
Помимо текстовой подписи создаётся программная связь между подписью и элементом формы. Это сильно облегчает взаимодействие с формами незрячим или слабовидящим пользователям, использующим скринридеры. Когда фокус попадает на элемент формы, с которым связан <label> , скринридер автоматически зачитывает текст подписи, и пользователь понимает, какие данные необходимо ввести или какие данные представлены в текущем элементе формы.
Чтобы связать <label> с элементом формы можно пойти двумя путями:
- Задаём элементу формы атрибут id . Такое же значение задаём атрибуту for тега <label> .
- Оборачиваем элемент формы в тег <label> . В этом случае связь создаётся автоматически и нет необходимости в атрибутах id и for .
Атрибуты
for — значение этого атрибута должно соответствовать значению атрибута id связываемого элемента. Первый же элемент в документе, чей id будет совпадать со значением атрибута for , становится связанным с нашим <label> . Единственное условие — элемент должен принадлежать к группе связываемых элементов: <button> , <input> , <meter> , <output> , <progress> , <select> и <textarea> .
Если элемент с нужным id не является связываемым, то связь не создаётся, и даже если дальше по документу найдётся связываемый элемент с таким же id , то он уже не будет учитываться.
Подсказки
�� Один элемент формы может быть связан с несколькими <label> , но один <label> может быть связан ровно с одним элементом формы.
�� При клике на <label> событие клика вызывается также и на связанном элементе формы.
�� По умолчанию <label> является строчным элементом и стилизуется аналогично <span> или <a> .
На практике
Денис Ежков
�� Обязательно связывайте <label> с чекбоксами и радиокнопками. Это небольшие элементы интерфейса, в которые довольно сложно попасть курсором мыши или пальцем на мобильных устройствах. Если у них есть связанный <label> , то пользователь может кликать по тексту подписи, а не целиться в сам чекбокс. Любите своих пользователей! ��
Алёна Батицкая
�� Даже если дизайнер нарисовал форму, в которой не предусмотрены явные лейблы для элементов, то вам нужно всё равно прописать их в разметке и скрыть через стили. В этом случае их будет не видно, но скринридер их прочитает.
�� При нажатии на лейбл, связанный с полем ввода или другим элементом формы, фокус будет перемещён на этот элемент.
Тег <label>
Тег <label> устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы ( <input> , <select> , <textarea> ). Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Кроме того, с помощью <label> можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.
Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега <label> . При втором способе элемент формы помещается внутрь контейнера <label> .
Синтаксис
Атрибуты
Закрывающий тег
HTML5 IE Cr Op Sa Fx
Браузеры
IE6 не позволяет активировать поле формы при щелчке по тексту, когда поле с текстом находится внутри тега <label> .