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

Рейтинг: 5 из 5, голосов 2
+++++

Тег <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>

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

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
<label> Да Да Да Да Да

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

Атрибут Значения Описание
for

id элемента

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

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

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

form

id формы

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

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

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

Оцените, насколько полезна эта страница
+++++
Оставьте комментарий

Отправляя форму, я даю согласие на обработку персональных данных.