skip to main content

<label>

html

Кратко 🔗

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

Пример 🔗

<div class="form-row">
<label for="bread">Купить хлеб</label>
<input type="checkbox" name="bread" id="bread" />
</div>

Как пишется 🔗

<!-- Прямая связь с элементом формы (элемент формы внутри <label>) -->
<label>Click me <input type="text" /></label>

<!-- Связь с элементом формы через атрибут for -->
<label for="username">Click me</label>
<input type="text" id="username" />

Как это понять 🔗

На многих веб-страницах есть формы — группы интерактивных элементов (полей ввода, выпадающих списков, чекбоксов и т.п.), связанных общим функциональным назначением. Яркие примеры форм — форма регистрации, форма входа, фильтры в каталогах. Формами удобно пользоваться, когда мы понимаем назначение каждого элемента. Для этого необходимо подписывать каждый элемент. И вот как раз для этих целей служит элемент <label>.

Помимо текстовой подписи создаётся программная связь между подписью и элементом формы. Это сильно облегчает взаимодействие с формами незрячим или слабовидящим пользователям, использующим скринридеры. Когда фокус попадает на элемент формы, с которым связан <label>, скринридер автоматически зачитывает текст подписи, и пользователь понимает, какие данные необходимо ввести или какие данные представлены в текущем элементе формы.

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

  1. Задаём элементу формы атрибут id. Такое же значение задаём атрибуту for тега <label>.
  2. Оборачиваем элемент формы в тег <label>. В этом случае связь создаётся автоматически и нет необходимости в атрибутах id и for.
<form action="">
<label for="phone">Ваш телефон:</label>
<input type="tel" name="phone" id="phone" />

<label>
<input type="checkbox" name="agree" />Согласен на обработку данных
</label>
</form>

Атрибуты 🔗

for — значение этого атрибута должно соответствовать значению атрибута id связываемого элемента. Первый же элемент в документе, чей id будет совпадать со значением атрибута for, становится связанным с нашим <label>. Единственное условие — элемент должен принадлежать к группе связываемых элементов: <button>, <input>, <meter>, <output>, <progress>, <select> и <textarea>.

Если элемент с нужным id не является связываемым, то связь не создаётся, и даже если дальше по документу найдётся связываемый элемент с таким же id, то он уже не будет учитываться.

Подсказки 🔗

💡 Один элемент формы может быть связан с несколькими <label>, но один <label> может быть связан ровно с одним элементом формы.

💡 При клике на <label> событие клика вызывается также и на связанном элементе формы.

💡 По умолчанию <label> является инлайновым элементом и стилизуется аналогично <span> или <a>.

В работе 🔗

🛠 Обязательно связывайте <label> с чекбоксами и радио-кнопками. Это небольшие элементы интерфейса, в которые довольно сложно попасть курсором мыши или пальцем на мобильных устройствах. Если у них есть связанный <label>, то пользователь может кликать по тексту подписи, а не целиться в сам чекбокс. Любите своих пользователей! 😉

Алёна,

🛠 Даже если дизайнер нарисовал форму, в которой не предусмотрены явные лейблы для элементов, то вам нужно всё равно прописать их в разметке и скрыть через стили. В этом случае их будет не видно, но скринридер их прочитает.

🛠 При нажатии на лейблу, связанную с полем ввода или другим элементом формы, фокус будет перемещён на этот элемент.

Автор: Денис,