# Тег label

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

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

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

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

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

## Атрибуты

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

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

Давайте к флажку `checkbox` привяжем метку с помощью атрибута `for`. Понажимайте на метку и вы увидите смену состояния флажка с отмеченного на неотмеченное и наоборот:

`<input type="checkbox" id="checkbox"> <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>`

:

← →
↑