<label>: Элемент Label

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

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

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

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

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

<label>
  Do you like peas?
  <input type="checkbox" name="peas" />
</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>.

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

for

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

Примечание: Чтобы программным образом установить атрибут for, используйте htmlFor.

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

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

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

Нет особых соображений по стилизации элементов <label> — по своей структуре они являются простыми встроенными элементами и поэтому могут быть стилизованы так же, как элемент <span> или <a>. Вы можете применять к ним стили любым способом, пока текст остается легко читаемым.

Не размещайте интерактивные элементы, такие как якоря или кнопки, внутри 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>

Лучше так:

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

Размещение заголовочных элементов внутри <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>.