HTML <label> тег

  • Предыдущая страница <kbd>
  • Следующая страница <legend>

Определение и использование

<label> Метка определяет аннотацию (метку) для элемента input.

Элемент метки не создает никаких специальных эффектов для пользователей мыши. Однако, он улучшает доступность для пользователей мыши. Если вы нажмете на текст в элементе метки, это вызовет этот контроллер. То есть, когда пользователь выбирает эту метку, браузер автоматически переводит фокус на связанный с меткой элемент управления формуляра.

<label> Метка Атрибут for Она должна быть такой же, как у соответствующего элемента атрибута id.

<label> Метка может определить метку (метку) для нескольких элементов:

Правильное использование указанных элементов и метки будет полезно для следующих пользователей:

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

См. также:

Руководство по HTML DOM:Объект Label

Пример

Три радиobutton с 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="Подтвердить">
</form>

Попробуйте сами

Советы и комментарии

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

Атрибут

Атрибут Значение Описание
for ID элемента Определяет, к какому элементу формы привязан label.
form ID формы Определяет, к какому полю формы относится поле label.

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

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

событийные атрибуты

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

Стандартные настройки CSS

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

label {
  cursor: default;
}

Попробуйте сами

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница <kbd>
  • Следующая страница <legend>