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

Question

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

Итак, почему мы вообще используем этот тег?

Answer 1

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

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

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

Answer 2

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

Пример:

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

См. Это в действии.

Если вы нажмете на текст, флажок будет установлен.

Answer 3

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

Например:

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

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

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

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

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

Answer 4

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

Answer 5

HTML-теги предназначены для передачи специального значения пользователям различных категорий. Вот для чего предназначен label:

1. Для людей с двигательными нарушениями (также для обычных пользователей мыши) Правильно используемые теги label можно щелкнуть для доступа к связанному элементу управления формы. Например. Вместо того, чтобы особо щелкать по флажку, пользователь может щелкнуть по более легко нажимаемому label и установить флажок.

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

Подробнее о маркировке здесь

Answer 6

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

Answer 7

С HTML-тег метки :

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

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