Атрибут for тега | HTML справочник
HTML тег <label>Значение и применение
Атрибут for (HTML тега <label>) определяет к какому элементу формы относится текущая метка (в том же документе).
Поддержка браузерами
Синтаксис:
<label for = "element_id">
Значения атрибута
| Значение | Описание |
|---|---|
| element_id | Значение глобального атрибута id того элемента формы, к которому будет относится метка. |
Отличия HTML 4.01 от HTML 5
Нет.Пример использования
Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега <label>. Значение атрибута for должно соответствовать значению глобального атрибута id того элемента формы, к которому будет относится метка. Атрибут for можно не использовать, если элемент <input> будет находиться внутри элемента <label> (пример рассмотрен ниже).
<!DOCTYPE html> <html> <head> <title>Пример использования HTML тега <label> </title> </head> <body> <form> <label for = "yes">Да</label> <!--Здесь мы создаём метку для тега input c id =yes--> <input type = "radio" id = "yes" name = "choice" value = "yes" checked> <label for = "no">Нет</label><!--Здесь мы создаём метку для тега input c id =no--> <input type = "radio" id = "no" name = "choice" value = "no"> </form> <br> <form> <label>Да <input type = "radio" name = "choice2" value = "yes"> </label><!--Здесь мы помещаем теги <input> внутрь тегов <label> (при этом атрибут for не требуется)--> <label>Нет <input type = "radio"name = "choice2" value = "no"checked> </label> </form> </body> </html>
В браузере оба варианта отображаются идентично:
Пример использования HTML тега <label> (использование текстовой метки).HTML тег <label>Тег HTML метка, подпись элемента
Тег <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" 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
| Атрибут | Значения | Описание |
|---|---|---|
| for |
id элемента |
Связывает метку с элементом. Атрибут необходим только в случае расположения элемента вне HTML кода метки. Если связанный элемент находится внутри тега <label>, то использовать атрибут for не нужно. |
| form |
id формы |
Указывает на форму, к которой относится метка. Используется, если тег <label> находится вне HTML кода формы. Если метка находится внутри тега <form>, то использовать атрибут |
Тег <label> также поддерживает глобальные HTML атрибуты.
Тег label — метка для поля ввода
Тег label задает метку для поля ввода типа input, textarea, select и так далее.
Метка привязывается к определенному полю ввода с помощью атрибута for. В нем следует указывать значение атрибута id поля ввода, к которому привязана метка. Также метка привязывается к элементу, если этот элемент положить вовнутрь тега label. В этом случае атрибут for указывать не надо. Смотрите примеры для лучшего понимания.
По нажатию на метку привязанные к ней чекбоксы или радио кнопочки будут менять свое состояние с отмеченного на неотмеченное и наоборот. Метка в данном случае нужна для удобства: в мелкие элементы формы тяжело попасть курсором, а в длинную метку с текстом — на порядок легче.
Привязанное к метке текстовое поле ввода типа input и textarea будет получать фокус ввода. Фокус — это когда курсор моргает в поле ввода, в этом случае, если вы что-то будете писать на клавиатуре — текст попадет в это поле (см. псевдокласс focus для продвинутого понимания фокуса).
Метку label можно использовать для имитации чекбокса или радио кнопочки. Это нужно для того, чтобы сделать checkbox или radio со своим дизайном (что на CSS запрещено, но с помощью хитрых приемов возможно).
Атрибуты
| Атрибут | Описание |
|---|---|
| for | В данном атрибуте следует указывать значение атрибута id того поля ввода, к которому привязана метка label. |
| accesskey | Задает горячую клавишу, с помощью которой можно перейти к привязаному к метке (через атрибут for) элементу формы. Подробнее см. атрибут accesskey. |
Пример . Чекбокс
Давайте к флажку checkbox привяжем метку с помощью атрибута for. Понажимайте на метку и вы увидите смену состояния флажка с отмеченного на неотмеченное и наоборот:
<input type="checkbox">
<label for="checkbox">Я привязан к чекбоксу с id checkbox.</label>
:
Пример . Внутри label
А теперь давайте не будем привязывать метку через атрибут for, а вложим элементы прямо в тег label, в этом случае нажимая на текст label также будем приводить к активации элемент:
<label><input type="checkbox"> метка</label>
:
Пример . Текстовое поле ввода
Давайте тегу input привяжем метку с помощью атрибута for. Нажатие на метку будет приводить к получению фокуса полем ввода. При этом содержащийся в поле текст (добавим с помощью атрибута value) станет выделенным. Если начать писать что-либо на клавиатуре — этот текст затрется. Избавится от выделения, не удалив при этом текст, можно кликнув мышкой
по полю ввода: фокус при этом не исчезнет, а выделение пропадет: <input type="text" value="какой-то текст">
<label for="input1">Я привязан к инпуту с id input1.</label>
:
| Справочник HTML
Элемент <label> (от англ. «label» ‒ «метка, надпись») устанавливает связь между определённой меткой и элементом формы (<input>, <select>, <textarea>).
По своему виду метка ничем не отличается от обычного текста, но благодаря ей пользователь может выбрать элемент формы кликом по тексту, расположенному внутри элемента <label>, а не по самому элементу формы.
Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы. Значение атрибута id должно быть эквивалентно значению атрибута for элемента <label>:
<label for="IDname"> ... </label>
...
<input type="..." id="IDname">При втором способе элемент формы помещается внутрь контейнера <label>:
<label>
...
<input type="...">
...
</label>Синтаксис
<input><label for="IDname">Текст</label>
<label><input>Текст</label>Закрывающий тег
Обязателен.
Атрибуты
- for
- Идентификатор элемента, с которым следует установить связь.
- form
- Определяет форму с которой будет связана метка. В качестве значения атрибута выступает идентификатор элемента <form>. Этот атрибут позволяет размещать метки в произвольном месте документа, а не только в качестве потомка элемента <form>. Этот атрибут был удален из спецификации HTML 28 апреля 2016 года.
Элемент поддерживает глобальные атрибуты и события
.Стилизация по умолчанию
Большинство браузеров отобразит элемент <label> со следующими значениями CSS по умолчанию:
label {
cursor: default;
}Различия между HTML 4.01 и HTML5
В HTML5 у тега <label> появился новый атрибут form.
Пример использования:
Текст набираемый на клавиатуре:
Пример HTML:
Попробуй сам<form action="action_form.php">
<p><input type="radio" name="coffee">
<label for="radio1">Кофе с молоком</label></p>
<p><input type="radio" name="coffee">
<label for="radio2">Кофе с коньяком</label></p>
<p><input type="reset"> <input type="submit"></p>
</form>
Спецификации
Поддержка браузерами
| Элемент | ||||||
| <label> | 8+ | 1+ | 4+ | 1+ | 1+ | 1+ |
| Элемент | ||||
| <label> | 1+ | 1+ | 6+ | 1+ |
Учебник HTML
HTML уроки: HTML Элементы
HTML тег label
Тег <label> определяет метку для элемента <input>.
Элемент <label> на пользовательском уровне ничего особенного не генерирует. Тем не менее, он позволяет улучшить взаимодействие пользователя со страницей, так как при нажатии мышкой на метку активируется связанный с ней контрольный элемент.
Атрибут for тега <label> должен иметь такое же значение, что и атрибут id соответствующего контрольного элемента. Это позволяет связать их друг с другом.
Метка может быть связана с контрольным элементом либо при помощи атрибута for, либо вложив этот контрольный элемент в тег <label>.
Разница между HTML 4.01 и HTML5
В HTML5 у тега <label> появилось новый атрибут form.Атрибуты тега <label>
| Атрибут | Описание |
|---|---|
| for | Определяет к какому элементу относится метка |
| form | Определяет к какой форме относится данный элемент |
Общие атрибуты
Тег <label> поддерживает общие атрибуты и атрибуты-события.
HTML пример
Две кнопки выбора с текстовыми метками:
<form action='demo_form.asp'>
<label for="male">Male</label>
<input type="radio" name="sex" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" value="female"><br>
<input type="submit" value="Submit">
</form>
CSS стили по умолчанию
Большинство браузеров будут отображать тег <label> со следующими стилями
label {
cursor: default;
}
Универсальный тег , назначение тега
Как говорилось выше, элемент ‘form’ является контейнером, в котором расположены остальные элементы формы. Самым универсальным из них можно смело назвать пустой элемент ‘input’, поскольку он применяется как для создания текстовых полей, так и различных кнопок, переключателей, скрытых полей и т.д. Формируется данный элемент соответствующим одиночным тегом <input> (от англ. input – ввод), а его назначение определяется его атрибутом type, который может принимать целый ряд значений:
- «button» – создает кнопку;
- «checkbox» – создает флажок, позволяя тем самым выбрать из предложенных вариантов сразу несколько подходящих;
- «file» – создает поле для ввода имени файла, пересылаемого на сервер, например, фотографию пользователя при регистрации;
- «hidden» – создает скрытое поле, которое предназначено для служебной информации и не отображается на веб-странице;
- «image» – создает графическую кнопку для отправки данных формы на сервер;
- «password» – создает поле для ввода пароля, в котором все символы, вводимые с клавиатуры, скрываются звездочками, чтобы их нельзя было подсмотреть;
- «radio» – создает радиокнопку, которая представляет собой переключатель, позволяющий выбрать только один вариант из нескольких предложенных;
- «reset» – создает кнопку ‘Сброс’ для возврата всех данных формы в исходное состояние;
- «submit» – создает обычную текстовую кнопку для отправки данных формы на сервер;
- «text» – создает текстовое поле для ввода символов с клавиатуры.
Использование некоторых из перечисленных разновидностей элемента ‘input’ показано в примере 6.3.
<!DOCTYPE html> <html> <head> <!-- Незабываем задавать служебные элементы --> <meta charset="utf-8"> <base href="http://localhost/test/"> <title>Формы</title> </head> <body> <form action="php/registration.php" method="POST" name="reg_form"> <!-- Создаем поле для ввода имени --> <label>Имя: <input type="text" name="first_name"></label><br><br> <!-- Все элементы одной группы радиокнопок должны иметь одно имя--> Возраст: <label>20-30<input type="radio" name="age" value="2030"> </label> <label>31-40<input type="radio" name="age" value="3140"> </label> <label>41-50<input type="radio" name="age" value="4150"></label><br><br> <!-- Выбираем виды, которыми владеем --> Виды единоборств: <label>бокс<input type="checkbox" name="box" value="box"> </label> <label>каратэ<input type="checkbox" name="karate" value="karate"> </label> <label>дзюдо<input type="checkbox" name="judo" value="judo"></label> <br><br> <!-- Поле для загрузки файла (фото) --> <label>Загрузить фото: <input type="file" name="foto"></label><br><br> <!-- Поле ввода пароля --> <label>Введите пароль: <input type="password" name="passw"></label><br><br> <!-- Создаем кнопки сброса и отправки данных на сервер --> <input type="reset" value="Сброс"> <input type="submit" value="Отправить" disabled> </form> </body> </html>
Пример 6.3. Использование элемента ‘input’
Как видим, элемент ‘input’ действительно универсальный. И это без учета того, что в HTML 5 был добавлен еще целый ряд значений для атрибута type, которые можно посмотреть в нашем справочнике здесь.
Кроме атрибута type у элемента ‘input’ присутствует весьма внушительное количество дополнительных атрибутов. Перечислим их.
- accept – используется для поля отправки файлов на сервер (type=»file») и устанавливает для него фильтр на типы отправляемых файлов. В качестве значений принимает через запятую список MIME-типов разрешенных для отправки файлов. Если файл не соответствует фильтру, то пользователь не увидит его в окне выбора файлов. Если атрибут не применяется, то в окне выбора файлов будут показываться все файлы, доступные для просмотра.
- autocomplete – его действие аналогично действию одноименного атрибута элемента ‘form’ и переопределяет его в случае необходимости.
- autofocus – автоматически устанавливает фокус в данное поле формы при загрузке страницы. Если атрибут задан сразу для нескольких полей, то фокус будет передан первому из них. Атрибут по умолчанию выключен и значений не принимает, т.е. является логическим.
- checked – применяется для переключателей и предварительно активирует их. Для радиокнопок (type=»radio») атрибут можно использовать только для одного элемента группы, для переключателей в виде флажков (type=»checkbox») атрибут можно использовать хоть для всех элементов сразу. Атрибут по умолчанию выключен и значений не принимает.
- disabled – блокирует доступ к полю формы. Это может потребоваться, например, когда нужно, чтобы поле стало доступным только после заполнения предварительных полей. Пользователь не сможет взять его в фокус и изменить содержимое. При этом само поле имеет серый фон, а его значение на сервер не передается. Атрибут по умолчанию выключен и значений не принимает.
- form – связывает данное поле с формой по ее идентификатору. В качестве значения принимает соответствующее значение атрибута id формы, с которой необходимо связать данное поле. Это может потребоваться в случае, когда поле расположено за пределами формы.
- formnovalidate – его действие аналогично действию одноименного атрибута элемента ‘form’.
- formaction – его действие аналогично действию одноименного атрибута элемента ‘form’. Атрибут используется для кнопок с атрибутом type=»submit» и type=»image».
- formenctype – его действие аналогично действию одноименного атрибута элемента ‘form’. Атрибут используется для кнопок с атрибутом type=»submit» и type=»image».
- formmethod – его действие аналогично действию одноименного атрибута элемента ‘form’. Атрибут используется для кнопок с атрибутом type=»submit» и type=»image».
- formtarget – его действие аналогично действию одноименного атрибута элемента ‘form’. Атрибут используется для кнопок с атрибутом type=»submit» и type=»image».
- src – в качестве значения принимает абсолютный или относительный путь к файлу изображения. Используется для графической кнопки (type=»image»).
- height – задает высоту графической кнопки (type=»image»).
- width – задает ширину графической кнопки (type=»image»).
- alt – устанавливает альтернативный текст для графической кнопки (type=»image»).
- list – связывает данное поле с элементом ‘datalist’ по ее идентификатору, позволяя подключить к полю варианты автодополнения. В качестве значения принимает соответствующее значение атрибута id элемента ‘datalist’, с которым необходимо связать данное поле.
- maxlength – устанавливает максимально допустимое число символов, которые можно ввести в поле. В качестве значения принимает натуральные числа. При равенстве количества введенных символов установленному значению, дальнейший ввод символов становится невозможным.
- minlength – устанавливает минимальное число символов, которые нужно ввести в поле. В качестве значения принимает натуральные числа. Если количество введенных символов будет меньше установленного значения, но больше нуля, то при попытке отправки формы на сервер будет выведено соответствующее предупреждение, а форма на сервер отправлена не будет.
- multiple – позволяет выбрать для отправки на сервер сразу несколько значений, например, файлов для поля с type=»file». Атрибут по умолчанию выключен и значений не принимает.
- name – задает уникальное имя элементу формы, которое позволяет обращаться к нему через скрипты. Кроме того, имя элемента отправляется на сервер вместе с его значением. Для радиокнопок одной группы данный атрибут должен иметь одинаковое значение (см. пример 6.4).
- placeholder – выводит текст-подсказку внутри поля формы, который исчезает при получении фокуса или ввода текста (зависит от браузера). Отображается шрифтом серого цвета.
- readonly – указывает, что данный элемент формы доступен только для чтения. В отличие от атрибута disabled допускает получение фокуса. Атрибут по умолчанию выключен и значений не принимает.
- required – устанавливает поле обязательным для заполнения. Если поле заполнено не будет, то при попытке отправки формы на сервер будет выведено соответствующее предупреждение, а форма на сервер отправлена не будет.
- size – устанавливает ширину текстового поля, которая определяется числом символов моноширинного шрифта. По умолчанию имеет значение «20». Следует отметить, что если размер шрифта изменяется с помощью стилей, то и ширина поля также изменяется.
- value – присваивает элементу формы начальное значение. Данный атрибут является обязательным для переключателей (type=»radio» и type=»checkbox»), а для кнопок устанавливает текстовую надпись.
И даже сейчас некоторые атрибуты элемента ‘input’ не были перечислены. Полный список атрибутов можно посмотреть в нашем справочнике здесь.
Если для элемента ‘form’ указаны атрибуты novalidate, action, enctype, method, target и др., то соответствующие атрибуты элементов формы в случае применения переопределяют их.
Использование некоторых из перечисленных атрибутов элемента ‘input’ показано в примере 6.4. А попрактиковаться с ними можно в нашем задачнике.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base href="http://localhost/test/"> <title>Атрибуты элемента 'input'</title> </head> <body> <form action="php/registration.php" method="POST" name="reg_form"> <label>Имя: <input type="text" name="first_name" minlength="2" maxlength="20" autofocus></label><br><br> <label>Фамилия: <input type="text" name="last_name" minlength="3" maxlength="20"></label><br><br> <!-- Все элементы одной группы радиокнопок должны иметь одно имя--> Возраст: <label>20-30<input type="radio" name="age" value="2030"> </label> <label>31-40<input type="radio" name="age" value="3140"> </label> <label>41-50<input type="radio" name="age" value="4150"> </label><br><br> <!-- Выбираем виды, которыми владеем --> Виды единоборств: <label>бокс<input type="checkbox" name="box" value="box"> </label> <label>каратэ<input type="checkbox" name="karate" value="karate"> </label> <label>дзюдо<input type="checkbox" name="judo" value="judo" checked> </label> <br><br> <!-- Поле для загрузки нескольких файлов сразу (фото) --> <label>Загрузить фото: <input type="file" name="foto" multiple></label><br><br> <!-- Обязательное поле ввода логина --> <label>Введите логин: <input type="text" name="login" required></label><br><br> <!-- Обязательное поле ввода пароля --> <label>Введите пароль: <input type="password" name="passw" minlength="7" maxlength="15" required></label><br><br> <!-- Создаем кнопки сброса и отправки данных на сервер --> <input type="reset" value="Сброс"> <input type="submit" value="Отправить" disabled> </form> </body> </html>
Пример 6.4. Использование атрибутов элемента ‘input’
В рассмотренных нами примерах многие поля расположены внутри элементов ‘label’, сформированных парными тегами <label> (от англ. label – метка). Данные элементы необходимы для установления связи между текстом и элементом формы, которые расположены внутри них. В результате этой связи при щелчке на тексте соответствующее поле получит фокус. Установить такую связь можно еще одним способом. Необходимо поместить требуемый текст внутрь контейнера ‘label’, а в открывающем теге <label> задать атрибут for, указав в качестве значения соответствующее значение атрибута id элемента формы, с которым требуется установить связь (см. пример 6.1). Использовать элемент ‘label’ очень удобно, т.к. нет необходимости, например, целиться в маленькое окошко для того, чтобы поставить галочку, а достаточно щелкнуть по соответствующей надписи.
Атрибут label | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 7.0+ | 1.0+ | 4.0+ | 2.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Атрибут предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри <option>. Если атрибут label присутствует, то текст внутри тега <option> игнорируется и в списке выводится значение label.
Синтаксис
<option label="текст">...</option>Значения
Любая текстовая строка заключенная в двойные или одинарные кавычки.
Значение по умолчанию
Нет.
Пример
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тег option, атрибут label</title>
</head>
<body>
<form>
<p>Кто написал полонез Огинского?</p>
<select name="question">
<option label="Бах" value="1">Иоганн Себастьян Бах</option>
<option label="Бетховен" value="2">Людвиг ван Бетховен</option>
<option label="Шопен" value="3">Фредерик Шопен</option>
<option label="Огинский" value="4">Михаил Клеофас Огинский</option>
</select>
<p><input type="submit" value="Отправить"></p>
</form>
</body>
</html>Результат примера показан на рис. 1.
Рис. 1. Вывод текста в списке
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.