Тег label задает метку для поля ввода типа input, textarea, select и так далее.

Метка привязывается к определенному полю ввода с помощью атрибута for. В нем следует указывать значение атрибута id поля ввода, к которому привязана метка. Также метка привязывается к элементу, если этот элемент положить вовнутрь тега label. В этом случае атрибут for указывать не надо. Смотрите примеры для лучшего понимания.

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

Привязанное к метке текстовое поле ввода типа input и textarea будет получать фокус ввода. Фокус - это когда курсор моргает в поле ввода, в этом случае если вы что-то будете писать на клавиатуре - текст попадет в это поле (см. псевдокласс focus для продвинутого понимания фокуса).

Метку label можно использовать для имитации чекбокса или радио кнопочки. Это нужно для того, чтобы сделать checkbox или radio со своим дизайном (что на CSS запрещено, но с помощью хитрых приемов возможно).

См. также атрибут tabindex.

Атрибуты

Атрибут Описание
for В данном атрибуте следует указывать значение атрибута id того поля ввода, к которому привязана метка label.
accesskey Задает горячую клавишу, с помощью которой можно перейти к привязаному к метке (через атрибут for) элементу формы. Подробнее см. атрибут accesskey.

Примеры

Пример . Чекбокс

В данном примере к флажку checkbox привязана метка с помощью атрибута for. Нажатие на метку будет приводить к смене состояния флажка с отмеченного на неотмеченное и наоборот:

<input type="checkbox" id="checkbox1">
<label for="checkbox">Я привязан к чекбоксу с id checkbox.</label>

Результат выполнения кода:

Пример . Внутри label

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

<label><input type="checkbox"> метка</label>

Результат выполнения кода:

Пример . Текстовое поле ввода

В данном примере к тегу input привязана метка с помощью атрибута for. Нажатие на метку будет приводить к получению фокуса полем ввода. При этом содержащийся в поле текст (добавлен с помощью атрибута value) станет выделенным. Если начать писать что-либо на клавиатуре - этот текст затрется. Избавится от выделения, не удалив при этом текст, можно кликнув мышкой по полю ввода: фокус при этом не исчезнет, а выделение пропадет:

<input type="text" id="input1" value="Какой-то текст">
<label for="input1">Я привязан к инпуту с id input1.</label>

Результат выполнения кода: