САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

На сайте нет рекламы

HTML Тег <label>



Пример

Три переключателя с метками:

<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> определяет метку для нескольких элементов:

Правильное использование меток с вышеперечисленными элементами принесет пользу:

  • Пользователи программы чтения с экрана (будут читать вслух надпись, Когда пользователь сосредоточен на элементе)
  • Пользователи, которым трудно нажимать на очень маленькие области (например, флажки) - потому что, когда пользователь нажимает на текст внутри элемента <label>, он переключает ввод (это увеличивает область попадания).

Совет: Атрибут <label> должен быть равен атрибуту id связанного элемента, чтобы связать их вместе. label также может быть привязана к элементу, поместив его внутри элемента <label>.


Поддержка браузера

Элемент
<label> Да Да Да Да Да


Атрибуты

Атрибут Значение Описание
for element_id Указывает идентификатор элемента формы, к которому должна быть привязана метка
form form_id Указывает, к какой форме принадлежит метка

Глобальные атрибуты

Тег <label> также поддерживает Глобальные атрибуты в HTML.


Свойства атрибутов

Тег <label> также поддерживает Свойства атрибутов в HTML.


Связные страницы

HTML DOM справочник: Объект label


Настройки CSS по умолчанию

Большинство браузеров будут отображать тег <label> со следующими значениями по умолчанию:

Пример

label {
  cursor: default;
}
Попробуйте сами »