HTML - тег <label>
Пример
Три переключателя с метками:
<form action="/action_page.php">
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language"
value="CSS">
<label for="css">CSS</label><br>
<input type="radio"
id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>
Определение и использование
Тег <label>определяет метку для нескольких элементов:
- <тип ввода="флажок">
- <тип ввода="цвет">
- <тип ввода="дата">
- <input type="datetime-local">
- <тип ввода="электронная почта">
- <тип ввода="файл">
- <тип ввода="месяц">
- <тип ввода="число">
- <тип ввода="пароль">
- <тип ввода="радио">
- <тип ввода="диапазон">
- <тип ввода="поиск">
- <тип ввода="тел">
- <тип ввода="текст">
- <тип ввода="время">
- <тип ввода="ссылка">
- <тип ввода="неделя">
- <метр>
- <прогресс>
- <выбрать>
- <текстовое поле>
Правильное использование этикеток с элементами, указанными выше, принесет пользу:
- Пользователи программы чтения с экрана (прочитают вслух метку, когда пользователь сосредоточится на элементе)
- Пользователи, которым трудно щелкнуть очень маленькие области (например, флажки) — потому что, когда пользователь щелкает текст внутри
<label>элемента, он переключает ввод (это увеличивает область нажатия).
Советы и примечания
Совет: Атрибут for <label>
должен быть равен атрибуту id связанного элемента, чтобы связать их вместе. Метку также можно привязать к элементу, поместив элемент внутрь <label>элемента.
Поддержка браузера
| Element | |||||
|---|---|---|---|---|---|
| <label> | Yes | Yes | Yes | Yes | Yes |
Атрибуты
| Attribute | Value | Description |
|---|---|---|
| for | element_id | Specifies the id of the form element the label should be bound to |
| form | form_id | Specifies which form the label belongs to |
Глобальные атрибуты
Тег <label>также поддерживает глобальные атрибуты в HTML .
Атрибуты события
Тег <label>также поддерживает атрибуты событий в HTML .
Связанные страницы
Справочник по HTML DOM: объект Label
Настройки CSS по умолчанию
Большинство браузеров будут отображать <label>элемент со следующими значениями по умолчанию:
Пример
label {
cursor: default;
}