HTML тег - label - определение и примеры использования
Меню
Веб-разработка
Тег label HTML

HTML - тег <label> определяет текстовую метку для тега <input>


Тег <label> - синтаксис и код

Тег <label> представлен парами. Содержимое записывается между открывающим (<label>) и закрывающим (</label>) тегами.

Пример трех радиокнопок с html-тегом <label>:

<form>
  <input type="radio" id="html" name="web_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="web_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="web_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
</form>

Нажмите на одну из текстовых меток, чтобы увидеть, как это работает:

   
   
   

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

  • HTML - тег <label> определяет текстовую метку для тега <input>;
  • Метка представляет собой обычный текст, нажав на который, пользователь может выбрать элемент формы. Это облегчает использование формы, так как не всегда удобно попадать курсором в её элементы;
  • Тег <label> также используется для определения сочетаний клавиш и перехода к активному элементу, например ссылкам.

Тег <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 с указанными выше элементами принесет пользу:

  • пользователям которые используют программы чтения с экрана;
  • пользователям, которым трудно нажимать на очень маленькие области.
✪ Рекомендация: атрибут for для label должен быть равен атрибуту id связанного элемента, чтобы связать их вместе. Метку также можно привязать к элементу, поместив элемент внутри элемента label.

Поддержка <label> браузерами

Yandex Browser Поддерживает
Edge Поддерживает
Firefox Поддерживает
Safari Поддерживает
Opera Поддерживает

Атрибуты

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

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

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

Атрибуты событий

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


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

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

label {
  cursor: default;
}


Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

 

Поделиться ссылкой