Тег <label> HTML метка, подпись элемента

Рейтинг: 3 из 5, голосов 23

28 декабря 2019 г.

Тег <label> в HTML определяет метку (подпись) элемента формы.

Чаще всего с помощью тега <label> HTML реализуется подпись таких элементов формы как чек-бокс <input type="checkbox"> и радио-кнопка <input type="radio">, однако, при необходимости тег label можно применять и к другим элементам формы.

Клик на контент HTML тега <label> приведет к вызову события клика по связанному элементу.

Для того чтобы связать метку label с элементом необходимо использовать атрибут for, либо поместить связанный элемент внутрь тега метки (тег label должен быть родительским тегом для связанного элемента). В первом случае необходимо указать в атрибуте for значение атрибута id связанного элемента.

Тег <label> относится к группе form. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.

Синтаксис

Вариант 1:

<label for="id_элемента">текст метки</label>

Вариант 2:

<label>элемент и текст метки</label>

Отображение в браузере

Пример использования метки элемента <label> в HTML коде

<!DOCTYPE html>
<html>
  <head>
    <title>Пример использования тега label - подписи элемента в HTML форме</title>
  </head>
  <body>
    <form name="pizza" action="/pizza_order.php" method="post">
      <p>Диаметр пиццы:</p>
   
      <!-- label привязанный через атрибут for к элементу radio -->
      <input type="radio" id="small_size" name="pizza_size" value="1" checked="checked">
      <label for="small_size">28 см</label>

      <!-- label в виде обвертки для radio -->
      <label><input type="radio"name="pizza_size" value="2"> 42 см</label>
      <br><br>

      <!-- label в виде обвертки для checkbox -->
      <label><input type="checkbox" name="additional_cheese">Двойная порция сыра</label>
    </form>
  </body>
</html>

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

Тег
<label>	Да	Да	Да	Да	Да

Атрибуты тега label

Атрибут	Значения	Описание
for	id элемента	Связывает метку с элементом. Атрибут необходим только в случае расположения элемента вне HTML кода метки. Если связанный элемент находится внутри тега <label>, то использовать атрибут for не нужно.
form	id формы	Указывает на форму, к которой относится метка. Используется, если тег <label> находится вне HTML кода формы. Если метка находится внутри тега <form>, то использовать атрибут form не нужно.

Атрибут

Значения

Описание

for

id элемента

Связывает метку с элементом.

Атрибут необходим только в случае расположения элемента вне HTML кода метки.

Если связанный элемент находится внутри тега <label>, то использовать атрибут for не нужно.

form

id формы

Указывает на форму, к которой относится метка. Используется, если тег <label> находится вне HTML кода формы.

Если метка находится внутри тега <form>, то использовать атрибут form не нужно.