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

• пользователям которые используют программы чтения с экрана;
• пользователям, которым трудно нажимать на очень маленькие области.

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

	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает

Атрибуты

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

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

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

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

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

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

label {
  cursor: default;
}

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