Пример
Три переключателя с метками:
<form action="/action_page.php">
<label for="male">Мужской</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Женский</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">другое</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>
Попробуйте сами »
Определение и использование
Тег <label> определяет метку для нескольких элементов:
- <input type="checkbox">
- <input type="color">
- <input type="date">
- <input type="datetime-local">
- <input type="email">
- <input type="file">
- <input type="month">
- <input type="number">
- <input type="password">
- <input type="radio">
- <input type="range">
- <input type="search">
- <input type="tel">
- <input type="text">
- <input type="time">
- <input type="url">
- <input type="week">
- <meter>
- <progress>
- <select>
- <textarea>
Правильное использование меток с вышеперечисленными элементами принесет пользу:
- Пользователи программы чтения с экрана (будут читать вслух надпись, Когда пользователь сосредоточен на элементе)
- Пользователи, которым трудно нажимать на очень маленькие области (например, флажки) -
потому что, когда пользователь нажимает на текст внутри элемента
<label>, он переключает ввод (это увеличивает область попадания).
Совет: Атрибут <label> должен быть равен атрибуту id связанного элемента,
чтобы связать их вместе. Атрибут <label> также может быть привязана к элементу, поместив его внутри элемента <label>.
Поддержка браузера
| Элемент | |||||
|---|---|---|---|---|---|
| <label> | Да | Да | Да | Да | Да |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| for | element_id | Указывает идентификатор элемента формы, к которому должна быть привязана метка |
| form | form_id | Указывает, к какой форме принадлежит метка |
Глобальные атрибуты
Тег <label> также поддерживает Глобальные атрибуты в HTML.
Свойства атрибутов
Тег <label> также поддерживает Свойства атрибутов в HTML.
Связные страницы
HTML DOM справочник: Объект label
Настройки CSS по умолчанию
Большинство браузеров будут отображать тег <label> со следующими значениями по умолчанию:
Пример
label {
cursor: default;
}
Попробуйте сами »