HTML тег <label>

Элемент <label> (от англ. "label" ‒ «метка, надпись») устанавливает связь между определённой меткой и элементом формы (<input>, <select>, <textarea>).

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

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

<label for="IDname"> ... </label>
...
<input type="..." id="IDname">

При втором способе элемент формы помещается внутрь контейнера <label>:

<label>
 ...
 <input type="...">
 ...
</label>

Синтаксис

<input id="IDname"><label for="IDname">Текст</label>
<label><input>Текст</label>

Закрывающий тег

Обязателен.

Атрибуты

for

Идентификатор элемента, с которым следует установить связь.

---

form

Определяет форму с которой будет связана метка. В качестве значения атрибута выступает идентификатор элемента <form>. Этот атрибут позволяет размещать метки в произвольном месте документа, а не только в качестве потомка элемента <form>. Этот атрибут был удален из спецификации HTML 28 апреля 2016 года.

Элемент поддерживает глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <label> со следующими значениями CSS по умолчанию:

label {
    cursor: default;
}

Различия между HTML 4.01 и HTML5

В HTML5 у тега <label> появился новый атрибут form.

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

Текст набираемый на клавиатуре:

<form action="action_form.php">
    <p><input type="radio" name="coffee" id="radio1">
    <label for="radio1">Кофе с молоком</label></p>
    <p><input type="radio" name="coffee" id="radio2">
    <label for="radio2">Кофе с коньяком</label></p>
    <p><input type="reset"> <input type="submit"></p>
</form>

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

Учебник HTML

HTML уроки: HTML Элементы