Тег label
Последнее обновление: 23.01.2011
Тег <label> (с англ. метка) — тег-контейнер, позволяет связать элемент интерфейса на форме с текстовой надписью и задать горячие клавиши.
Строчный элемент.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
<label>...</label>
Атрибуты
| accesskey | задает горячие клавиши |
|---|---|
| class | определяет имя используемого класса |
| dir | определяет направление символов:
|
| 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>
Рекомендации по использованию
- закрывающий тег обязателен (</label>)
- может содержать CDATA и строчные элементы (кроме самого тега <label>)
- обязательных атрибутов нет
Объект и метку можно связать двумя способами:
- поместить объект внутрь тега (при этом в IE при клике по тексту, не работает переход фокуса на связанный с <label> элемент интерфейса )
- использовать идентификатора id объекта, как значенеи атрибута for тега <label>
Рекомендуем в каждой форме делать связь <label> с элементом интерфейса для улучшения удобства (юзабилити) работы с формой.
Твой код:
Результат:
большой полигон