<label>: The Label element
The <label> HTML element represents a caption for an item in a user interface.
Try it
Associating a <label> with a form control, such as <input> or <textarea> offers some major advantages:
- The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
- When a user clicks or touches/taps a label, the browser passes the focus to its associated input (the resulting event is also raised for the input). That increased hit area for focusing the input provides an advantage to anyone trying to activate it — including those using a touch-screen device.
To explicitly associate a <label> element with an <input> element, you first need to add the id attribute to the <input> element. Next, you add the for attribute to the <label> element, where the value of for is the same as the id in the <input> element.
Alternatively, you can nest the <input> directly inside the <label> , in which case the for and id attributes are not needed because the association is implicit:
The form control that a label is labeling is called the labeled control of the label element. Multiple labels can be associated with the same form control:
Attributes
This element includes the global attributes.
The value of the for attribute must be a single id for a labelable form-related element in the same document as the <label> element. So, any given label element can be associated with only one form control.
Note: To programmatically set the for attribute, use htmlFor .
The first element in the document with an id attribute matching the value of the for attribute is the labeled control for this label element — if the element with that id is actually a labelable element. If it is not a labelable element, then the for attribute has no effect. If there are other elements that also match the id value, later in the document, they are not considered.
Multiple label elements can be given the same value for their for attribute; doing so causes the associated form control (the form control that for value references) to have multiple labels.
Note: A <label> element can have both a for attribute and a contained control element, as long as the for attribute points to the contained control element.
Styling with CSS
There are no special styling considerations for <label> elements — structurally they are simple inline elements, and so can be styled in much the same way as a <span> or <a> element. You can apply styling to them in any way you want, as long as you don’t cause the text to become difficult to read.
<label>¶
Тег <label> (от англ. label — метка, ярлык) устанавливает связь между определённой меткой, в качестве которой обычно выступает текст, и элементом формы ( <input> , <select> , <textarea> ).
Такая связь необходима, чтобы изменять значения элементов формы при щелчке курсором мыши на текст. Кроме того, с помощью <label> можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.
Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for элемента <label> . При втором способе элемент формы помещается внутрь контейнера <label> .
Синтаксис¶
Закрывающий тег обязателен.
Атрибуты¶
Также для этого элемента доступны универсальные атрибуты.
Задаёт уникальный идентификатор, определяемый с помощью атрибута id элемента <input> , с которым следует установить связь. Атрибут for необходимо задавать в том случае, когда элемент формы и текст разделены. Если <input> размещается внутри контейнера <label> , то применять атрибут for не требуется.
Синтаксис
Значения
Имя идентификатора. Такое имя чувствительно к регистру, поэтому его следует писать так же, как оно описано внутри элемента <input> .
<label>
Элемент <label> используется для создания подписи к элементу формы:
Пример
Скопировать ссылку на секцию «Пример» Скопировано
Как пишется
Скопировать ссылку на секцию «Как пишется» Скопировано
Как понять
Скопировать ссылку на секцию «Как понять» Скопировано
На многих веб-страницах есть формы — группы интерактивных элементов (полей ввода, выпадающих списков, чекбоксов и т.п.), связанных общим функциональным назначением. Яркие примеры форм — форма регистрации, форма входа, фильтры в каталогах. Формами удобно пользоваться, когда мы понимаем назначение каждого элемента. Для этого необходимо подписывать каждый элемент. И вот как раз для этих целей служит элемент <label> .
Помимо текстовой подписи создаётся программная связь между подписью и элементом формы. Это сильно облегчает взаимодействие с формами незрячим или слабовидящим пользователям, использующим скринридеры. Когда фокус попадает на элемент формы, с которым связан <label> , скринридер автоматически зачитывает текст подписи, и пользователь понимает, какие данные необходимо ввести или какие данные представлены в текущем элементе формы.
Чтобы связать <label> с элементом формы можно пойти двумя путями:
- Задаём элементу формы атрибут id . Такое же значение задаём атрибуту for тега <label> .
- Оборачиваем элемент формы в тег <label> . В этом случае связь создаётся автоматически и нет необходимости в атрибутах id и for .
Атрибуты
Скопировать ссылку на секцию «Атрибуты» Скопировано
for — значение этого атрибута должно соответствовать значению атрибута id связываемого элемента. Первый же элемент в документе, чей id будет совпадать со значением атрибута for , становится связанным с нашим <label> . Единственное условие — элемент должен принадлежать к группе связываемых элементов: <button> , <input> , <meter> , <output> , <progress> , <select> и <textarea> .
Если элемент с нужным id не является связываемым, то связь не создаётся, и даже если дальше по документу найдётся связываемый элемент с таким же id , то он уже не будет учитываться.
Подсказки
Скопировать ссылку на секцию «Подсказки» Скопировано
�� Один элемент формы может быть связан с несколькими <label> , но один <label> может быть связан ровно с одним элементом формы.
�� При клике на <label> событие клика вызывается также и на связанном элементе формы.
�� По умолчанию <label> является строчным элементом и стилизуется аналогично <span> или <a> .
На практике
Скопировать ссылку на секцию «На практике» Скопировано
Денис Ежков советует
Скопировать ссылку на секцию «Денис Ежков советует» Скопировано
�� Обязательно связывайте <label> с чекбоксами и радиокнопками. Это небольшие элементы интерфейса, в которые довольно сложно попасть курсором мыши или пальцем на мобильных устройствах. Если у них есть связанный <label> , то пользователь может кликать по тексту подписи, а не целиться в сам чекбокс. Любите своих пользователей! ��
Алёна Батицкая советует
Скопировать ссылку на секцию «Алёна Батицкая советует» Скопировано
�� Даже если дизайнер нарисовал форму, в которой не предусмотрены явные лейблы для элементов, то вам нужно всё равно прописать их в разметке и скрыть через стили. В этом случае их будет не видно, но скринридер их прочитает.
�� При нажатии на лейбл, связанный с полем ввода или другим элементом формы, фокус будет перемещён на этот элемент.
На собеседовании
Скопировать ссылку на секцию «На собеседовании» Скопировано
Это партнёрская рубрика, мы выпускаем её совместно с сервисом онлайн-образования Яндекс Практикум. Приносите вопрос, на который не знаете ответа, в задачи, мы разложим всё по полочкам и опубликуем. Если знаете ответ, присылайте пулреквест на GitHub.
Какая разница между legend , caption и label с точки зрения доступности? Что между ними общего?
Скопировать ссылку на секцию «Какая разница между legend, caption и label с точки зрения доступности? Что между ними общего?» Скопировано
Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.
HTML <label> Tag
The <label> tag defines a text label for the <input> tag. The label is a normal text, by clicking which, the user can select the form element. It facilitates the use of the form, since it is not always convenient to get into form elements with the cursor.
The <label> tag is also used to define keyboard shortcuts and jump to the active element like links.
An input can be associated with several labels. If you click or tap a <label> which is associated with a form control, the resulting click event will arise for the associated control.
Associating a <label> with an <input> element has some advantages:
- The label text is both visually and pragmatically associated with the text input.
- You can click on the associated label for focusing or activating the input, as well as on the input itself.
Syntax
The <label> tag comes in pairs. The content is written between the opening (<label>) and closing (</label>) tags.
There are two ways to associate a text label and the form to which it belongs: