Тег label в html: Тег | htmlbook.ru

Leave a Comment / Html / By /

— HTML | MDN

**HTML-элемент <label> **представляет собой подпись к элементу пользовательского интерфейса.

Категории контента (en-US)Общий поток (en-US), текстовый контент (en-US), интерактивный контент, элемент формы (en-US), ощутимый контент.
Разрешённый контентТекстовый контент (en-US), но без вложенных элементов label. Недопустимы другие оборачиваемые в label элементы помимо целевого.
Пропуск теговНет, открывающий и закрывающий теги обязательны.
Разрешённые предкиЛюбой элемент, разрешающий текстовый контент. (en-US)
Разрешённые ARIA ролиОтсутствуют
DOM interface
HTMLLabelElement (en-US)
ТипСтрочный

Элемент поддерживает глобальные атрибуты.

for

ID labelable-элемента, который находится в том же документе, что и элемент label. Первый такой элемент в документе, ID которого совпадает со значением атрибута for, становится labeled-* контролом для данного label.

Примечание: Элемент label может иметь как атрибут for, так и отдельный элемент управления, если атрибут for указывает на содержащийся элемент управления.

form HTML5 Этот API вышел из употребления и его работа больше не гарантируется.

Элемент формы, с которым связан label (его владелец формы). Если указано, значением атрибута является идентификатор элемента <form>

в том же документе. Это позволяет размещать элементы label в любом месте документа, а не только как потомки их элементов формы.

Примечание: Этот атрибут содержимого был удалён из спецификации HTML 28 апреля 2016 г. Однако сценарии по-прежнему имеют доступ только для чтения HTMLLabelElement.form (en-US); он возвращает форму, членом которой является связанный элемент управления label, или значение NULL, если label не связана с элементом управления или элемент управления не является частью формы.

  • <label> можно связать с элементом управления, поместив элемент управления внутри элемента <label> или используя атрибут for. Такой элемент управления называется помеченным элементом управления надписью. Один вход может быть связан с несколькими метками.
  • Метки сами по себе не связаны с формами. Они только косвенно связаны с формами через элементы управления, с которыми они связаны.

Simple label example

<label>Click me <input type="text"></label>

Using the «for» attribute

<label for="username">Click me</label>
<input type="text">

SpecificationStatusComment
HTML Living Standard
Определение ‘<label>’ в этой спецификации. 		Живой стандарт
HTML5
Определение ‘<label>’ в этой спецификации.		Рекомендация
HTML 4.01 Specification
Определение ‘<label>’ в этой спецификации.		РекомендацияInitial definition

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.
  • Other form-related elements: <form>, <input>, <button>, <datalist>, <legend>, <select>, <optgroup>, <option>, <textarea> (en-US), <keygen> (en-US), <fieldset>, <output>, <progress> and <meter>.

Last modified: , by MDN contributors

— HTML — Дока

  1. Кратко
  2. Пример
  3. Как пишется
  4. Как понять
  5. Атрибуты
  6. Подсказки
  7. На практике
    1. Денис Ежков советует
    2. Алёна Батицкая советует

Кратко

Секция статьи «Кратко»

Элемент <label> используется для создания подписи к элементу формы:

Пример

Секция статьи «Пример»
<div>  <label for="bread">Купить хлеб</label>  <input type="checkbox" name="bread"></div>
          
 
<div>
  <label for="bread">Купить хлеб</label>
  <input type="checkbox" name="bread">
</div>

Как пишется

Секция статьи «Как пишется»
<!-- Прямая связь с элементом формы (элемент формы внутри <label>) --><label>Click me <input type="text"></label><!-- Связь с элементом формы через атрибут for --><label for="username">Click me</label><input type="text">
          <!-- Прямая связь с элементом формы (элемент формы внутри <label>) -->
<label>Click me <input type="text"></label>
<!-- Связь с элементом формы через атрибут for -->
<label for="username">Click me</label>
<input type="text">

Как понять

Секция статьи «Как понять»

На многих веб-страницах есть формы — группы интерактивных элементов (полей ввода, выпадающих списков, чекбоксов и т.

п.), связанных общим функциональным назначением. Яркие примеры форм — форма регистрации, форма входа, фильтры в каталогах. Формами удобно пользоваться, когда мы понимаем назначение каждого элемента. Для этого необходимо подписывать каждый элемент. И вот как раз для этих целей служит элемент <label>.

Помимо текстовой подписи создаётся программная связь между подписью и элементом формы. Это сильно облегчает взаимодействие с формами незрячим или слабовидящим пользователям, использующим скринридеры. Когда фокус попадает на элемент формы, с которым связан <label>, скринридер автоматически зачитывает текст подписи, и пользователь понимает, какие данные необходимо ввести или какие данные представлены в текущем элементе формы.

Чтобы связать <label> с элементом формы можно пойти двумя путями:

  1. Задаём элементу формы атрибут id. Такое же значение задаём атрибуту
    for     тега <label>.
  2. Оборачиваем элемент формы в тег <label>. В этом случае связь создаётся автоматически и нет необходимости в атрибутах id и for.
<form action="">  <label for="phone">Ваш телефон:</label>  <input type="tel" name="phone">  <label>    <input type="checkbox" name="agree">Согласен на обработку данных  </label></form>
          <form action="">
  <label for="phone">Ваш телефон:</label>
  <input type="tel" name="phone">
  <label>
    <input type="checkbox" name="agree">Согласен на обработку данных
  </label>
</form>
Открыть демо в новой вкладке

Атрибуты

Секция статьи «Атрибуты»

for — значение этого атрибута должно соответствовать значению атрибута id связываемого элемента. Первый же элемент в документе, чей id будет совпадать со значением атрибута for, становится связанным с нашим <label>. Единственное условие — элемент должен принадлежать к группе связываемых элементов: <button>, <input>, <meter>, <output>, <progress>, <select> и <textarea>.

Если элемент с нужным id не является связываемым, то связь не создаётся, и даже если дальше по документу найдётся связываемый элемент с таким же id, то он уже не будет учитываться.

Подсказки

Секция статьи «Подсказки»

💡 Один элемент формы может быть связан с несколькими <label>, но один <label> может быть связан ровно с одним элементом формы.

💡 При клике на <label> событие клика вызывается также и на связанном элементе формы.

💡 По умолчанию <label> является строчным элементом и стилизуется аналогично <span> или <a>.

На практике

Секция статьи «На практике»

Денис Ежков советует

Секция статьи «Денис Ежков советует»

🛠 Обязательно связывайте <label> с чекбоксами и радиокнопками. Это небольшие элементы интерфейса, в которые довольно сложно попасть курсором мыши или пальцем на мобильных устройствах. Если у них есть связанный <label>, то пользователь может кликать по тексту подписи, а не целиться в сам чекбокс. Любите своих пользователей! 😉

Алёна Батицкая советует

Секция статьи «Алёна Батицкая советует»

🛠 Даже если дизайнер нарисовал форму, в которой не предусмотрены явные лейблы для элементов, то вам нужно всё равно прописать их в разметке и скрыть через стили. В этом случае их будет не видно, но скринридер их прочитает.

🛠 При нажатии на лейбл, связанный с полем ввода или другим элементом формы, фокус будет перемещён на этот элемент.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

<datalist>

alt + ←

→

<fieldset>

alt + →

Тег метки HTML

— javatpoint

следующий → ← предыдущая

Тег

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

html — Что такое «для» в теге label?

спросил

Изменено 5 лет, 8 месяцев назад

Просмотрено 60 тысяч раз

Только что наткнулся на параметр вместо в теге метки HTML:

 
<маленький>*

Я преобразовываю эту форму в скрипт, обработанный PHP, могу ли я избавиться от параметров for=? (И из любопытства, что он делает?)

  • HTML
  • формы
  • удобство использования

Сайт w3schools. org:

Тег определяет метку для элемента ввода.

Элемент метки не воспринимается пользователем как нечто особенное. Однако это обеспечивает улучшение удобства использования для пользователей мыши, поскольку, если пользователь щелкает текст внутри элемента метки, он переключает элемент управления.

Атрибут for тега должен быть равен атрибуту id связанного элемента, чтобы связать их вместе.

ХТХ!

добавление моего $ 0,02 в качестве SME доступности — помимо удобства использования, LABEL также связывает поле ввода с правильной меткой, чтобы люди, использующие программы чтения с экрана, знали, для чего предназначено это поле.

1

HTML-тег label определяет метку для элемента формы. Обычно они используются с флажками и переключателями, и когда пользователь нажимает на метку, кнопка переключается. При текстовом вводе (и вам нужно будет проверить это, чтобы быть уверенным), я думаю, он фокусируется на вводе только тогда, когда пользователь щелкает метку.

1

Указывает, к какому элементу привязана эта метка. В вашем образце кода есть метка для , поле ввода required-firstname . Если пользователь нажмет на эту метку, фокус переместится на связанное поле ввода. Это улучшение удобства использования, и я думаю, вам лучше оставить все как есть. Это хорошая практика.

Атрибут for является необходимым элементом для доступности вашей формы. Не упустите его. Для тех, кто использует программу чтения с экрана (SR) для анонсирования веб-страницы, атрибут for связывает элемент управления с меткой. Обычно пользователь SR перемещается по форме, переходя от одного элемента управления (который является фокусируемым элементом для SR) к следующему. Без атрибута «для» пользователю SR придется менять режимы в SR и исследовать форму, чтобы попытаться определить, какой элемент управления соответствует какой метке, что может занять много времени и сбить с толку.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *