<label> элемент label

Элемент <label> HTML представляет собой подпись для элемента пользовательского интерфейса.

Попробуйте

<div class="preference">
  <label for="cheese">I like cheese.</label>
  <input type="checkbox" name="cheese" id="cheese" />
</div>

<div class="preference">
  <label for="peas">I like peas.</label>
  <input type="checkbox" name="peas" id="peas" />
</div>

.preference {
  display: flex;
  justify-content: space-between;
  width: 60%;
  margin: 0.5rem;
}

Атрибуты

Этот элемент включает глобальные атрибуты.

for

Значение — это id элемента управления формы из той же страницы, который допускает использование метки (labelable), связывающее <label> с этим элементом управления формы. Обратите внимание, что соответствующее свойство JavaScript называется htmlFor.

Примечания по использованию

Связывание метки с элементом управления формы

Первый элемент документа с атрибутом id, значение которого совпадает со значением атрибута for, становится элементом управления с меткой для этого элемента label — если элемент с таким id действительно допускает использование метки (labelable element). Если это не элемент, допускающий использование метки, атрибут for не действует. Если далее в документе есть другие элементы с таким же значением id, они не учитываются.

С одним элементом управления формы можно связать несколько элементов <label>, добавив несколько элементов <label> с одинаковым значением атрибута for. В результате у элемента управления формы будет несколько меток.

Связывание <label> с элементом управления формы, например <input> или <textarea>, даёт несколько важных преимуществ:

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

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

Чтобы явно связать элемент <label> с элементом <input>, сначала нужно добавить атрибут id элементу <input>. Затем добавьте атрибут for элементу <label>, указав в качестве значения for такое же значение, как у id в элементе <input>.

<label for="peas">I like peas.</label>
<input type="checkbox" name="peas" id="peas" />

Другой способ — поместить <input> непосредственно внутрь <label>. В этом случае атрибуты for и id не нужны, поскольку связь устанавливается неявно:

<label>
  I like peas.
  <input type="checkbox" name="peas" />
</label>

Эти два способа равнозначны, но при выборе следует учесть несколько моментов:

• Хотя распространённые сочетания браузеров и программ экранного доступа поддерживают неявную связь, это умеют не все вспомогательные технологии.
• В зависимости от вашего дизайна тип связи может повлиять на возможности стилизации. Если сделать <label> и элемент управления формы соседними элементами вместо родительского и дочернего, они будут отдельными смежными блоками. Это позволяет гибче настраивать макет, например выравнивать элементы с помощью сетки или flex-макета.
• Для явной связи элемент управления формы должен иметь id, уникальный во всём документе. Это особенно сложно в приложениях, состоящих из компонентов. Фреймворки часто предоставляют собственные решения, например useId() в React, но для правильной настройки всё равно требуется дополнительная координация.

Как правило, мы рекомендуем использовать явную связь с атрибутом for, чтобы обеспечить совместимость с внешними инструментами и вспомогательными технологиями. Для максимальной совместимости можно одновременно вложить элемент и указать id/for.

Элемент управления формы, который помечает метка, называется элементом управления с меткой этого элемента label. С одним и тем же элементом управления формы можно связать несколько меток:

<label for="username">Enter your username:</label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?</label>

С элементом <label> можно связать следующие элементы: <button>, <input> (кроме type="hidden"), <meter>, <output>, <progress>, <select> и <textarea>.

Доступность

Интерактивное содержимое

Помимо неявно связанного элемента управления формы, не размещайте внутри <label> другие интерактивные элементы, например ссылки или кнопки. Это затрудняет активацию поля формы, связанного с label.

Не делайте так:

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>

Лучше так:

<p>
  <a href="terms-and-conditions.html">Read our Terms and Conditions</a>
</p>
<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the Terms and Conditions
</label>

Заголовки

Размещение элементов заголовков внутри <label> мешает работе многих вспомогательных технологий, поскольку заголовки часто используются как средство навигации. Если внешний вид текста метки нужно изменить, применяйте CSS-классы непосредственно к элементу <label>.

Если форме или её разделу требуется заголовок, используйте элемент <legend>, размещённый внутри элемента <fieldset>.

Не делайте так:

<label for="your-name">
  <h3>Your name</h3>
  <input id="your-name" name="your-name" type="text" />
</label>

Лучше так:

<label class="large-label" for="your-name">
  Your name
  <input id="your-name" name="your-name" type="text" />
</label>

Кнопки

Для элемента <input> с объявлением type="button" и допустимым атрибутом value не требуется связанная с ним метка. Более того, она может помешать вспомогательным технологиям правильно интерпретировать кнопку. То же самое относится к элементу <button>.

Примеры

Создание неявной метки

<label>Click me <input type="text" /></label>

Создание явной метки с помощью атрибута "for"

<label for="username">Click me to focus on the input field</label>
<input type="text" id="username" />

Техническая сводка

Спецификации

Совместимость с браузерами