Тег 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>
: