Главная/ HTML справочник | HTML теги: назначение, синтаксис, атрибуты, примеры./ Tags/ HTML тег label | назначение, синтаксис, атрибуты, примеры

Тег label

Последнее обновление: 27.02.2009

Тег <label> (с англ. метка) — тег-контейнер, позволяет связать элемент интерфейса на форме с текстовой надписью и задать горячие клавиши.
Строчный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<label>...</label>
Атрибуты


accesskey задает горячие клавиши
class определяет имя используемого класса
dir определяет направление символов:

  • ltr — слева направо
  • rtl — справа налево
for значение поля id элемента интерфейса, к которому «привязываемся»
id уникальный индетификатор
lang определяет язык отображаемого документа
onblur потеря фокуса элементом
onclick щелчек на элементе
ondblclick двойной щелчек на элементе
onfocus получение фокуса элементом
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
style задает встроенную таблицу стилей
title всплывающая подсказка
Пример

Такой флаг можно устанавливать не только щелчком в поле, но и щелчком по надписи


<input type="checkbox" id="flag"/><label for="flag"> флаг</label>

Задаем горячие клавиши (пример работает только в IE!)


<form action="">
<div>
<input
type="checkbox" id="rb1"/><label for="rb1" accesskey="q"> нажми atl+«q»</label>
<input
type="checkbox" id="rb2"/><label for="rb2" accesskey="w"> нажми atl+«w»</label>
<input
type="checkbox" id="rb3"/><label for="rb3" accesskey="e"> нажми atl+«e»</label>
</div>
</form>

Рекомендации по использованию

Объект и метку можно связать двумя способами:

  • поместить объект внутрь тега (при этом в IE при клике по тексту, не работает переход фокуса на связанный с <label> элемент интерфейса )
  • использовать идентификатора id объекта, как значенеи атрибута for тега <label>

Рекомендуем в каждой форме делать связь <label> с элементом интерфейса для улучшения удобства (юзабилити) работы с формой.

Твой код:

Результат: