Зачем использовать <label>?

Ответ 1

HTML не о презентации. Это способ описания данных. Если у вас есть текст, представляющий метку для ввода, вы переносите его в теги меток не для презентации, а потому, что это то, что есть. Без метки тега этот текст почти бессмыслен. С тегом метки и его атрибутом for (или не *) вы предоставляете смысл и структуру и формируете связь между вашей разметкой, которая может быть лучше понята компьютерами/парсерами/браузерами/людьми.

* вам необязательно нужно for, если вы оберните метку вокруг ввода:

<label>My input
  <input type="text" id="my-input" />
</label>

Ответ 2

Атрибут for элемента label соответствует атрибуту id элемента input. Если вы нажмете на ярлык, он будет фокусироваться на окне ввода.

Пример:

<input type="checkbox" id="agree" /> 
<label for="agree">I agree with the Terms and Conditions</label>

Смотрите это в действии.

Если вы нажмете на текст, он проверит флажок.

Ответ 3

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

например:

<label for='mycontrol'>Label text</label> <input type='checkbox' name='mycontrol' id='mycontrol' value='1'>

Это означало бы, что когда пользователь нажимает на "Текст метки", флажок будет переключен.

Это полезно для доступности, общего удобства использования, а также позволяет некоторые трюки, такие как создание переключателя, который не выглядит как флажок, но содержит один за кулисами.

Но помимо этой функции for элемент <label> в основном такой же, как любой другой элемент HTML.

Если вы не собираетесь использовать атрибут for, все равно может быть правильным использовать элемент <label> по смысловым причинам.

Ответ 4

Когда вы нажимаете на метку, фокус переходит к соответствующему входу. Очень удобно для флажков, когда трудно попасть в маленький прямоугольник.

Ответ 5

От тег метки HTML:

"Элемент label не отображает ничего особенного для пользователя. Однако он обеспечивает улучшение удобства использования для пользователей мыши, потому что если пользователь нажимает на текст внутри элемента label, он переключает элемент управления.

Атрибут for для тега должен быть равен атрибуту id связанного элемента, чтобы связать их вместе. "

Ответ 6

Ничего с точки зрения представления. Тег Lable используется для определения метки для входного элемента. С семантической точки зрения он не должен использоваться для определения текста.