Label class html css

Подписывает поля ввода и другие элементы формы.

Время чтения: меньше 5 мин

Обновлено 8 сентября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

   Купить хлеб  div class="form-row"> label for="bread">Купить хлебlabel> input type="checkbox" name="bread" id="bread"> div>

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 ) -->Click me Click me ) --> label>Click me input type="text">label> label for="username">Click melabel> input type="text" id="username">

 Как понять
 Скопировать ссылку "Как понять" Скопировано
 На многих веб-страницах есть формы — группы интерактивных элементов (полей ввода, выпадающих списков, чекбоксов и т.п.), связанных общим функциональным назначением. Яркие примеры форм — форма регистрации, форма входа, фильтры в каталогах. Формами удобно пользоваться, когда мы понимаем назначение каждого элемента. Для этого необходимо подписывать каждый элемент. И вот как раз для этих целей служит элемент .
 Помимо текстовой подписи создаётся программная связь между подписью и элементом формы. Это сильно облегчает взаимодействие с формами незрячим или слабовидящим пользователям, использующим скринридеры. Когда фокус попадает на элемент формы, с которым связан , скринридер автоматически зачитывает текст подписи, и пользователь понимает, какие данные необходимо ввести или какие данные представлены в текущем элементе формы.
 Чтобы связать с элементом формы можно пойти двумя путями:
  Задаём элементу формы атрибут id . Такое же значение задаём атрибуту for тега .
 Оборачиваем элемент формы в тег . В этом случае связь создаётся автоматически и нет необходимости в атрибутах id и for .
 
    Ваш телефон:   Согласен на обработку данных   form action=""> label for="phone">Ваш телефон:label> input type="tel" name="phone" id="phone"> label> input type="checkbox" name="agree">Согласен на обработку данных label> form>      
 Атрибуты
 Скопировать ссылку "Атрибуты" Скопировано
 for — значение этого атрибута должно соответствовать значению атрибута id связываемого элемента. Первый же элемент в документе, чей id будет совпадать со значением атрибута for , становится связанным с нашим . Единственное условие — элемент должен принадлежать к группе связываемых элементов: , , , , , и .
 Если элемент с нужным id не является связываемым, то связь не создаётся, и даже если дальше по документу найдётся связываемый элемент с таким же id , то он уже не будет учитываться.
 Подсказки
 Скопировать ссылку "Подсказки" Скопировано
 💡 Один элемент формы может быть связан с несколькими , но один может быть связан ровно с одним элементом формы.
 💡 При клике на событие клика вызывается также и на связанном элементе формы.
 💡 По умолчанию является строчным элементом и стилизуется аналогично или .
 На практике
 Скопировать ссылку "На практике" Скопировано
 Денис Ежков советует
 Скопировать ссылку "Денис Ежков советует" Скопировано
 🛠 Обязательно связывайте с чекбоксами и радиокнопками. Это небольшие элементы интерфейса, в которые довольно сложно попасть курсором мыши или пальцем на мобильных устройствах. Если у них есть связанный , то пользователь может кликать по тексту подписи, а не целиться в сам чекбокс. Любите своих пользователей! 😉
 Алёна Батицкая советует
 Скопировать ссылку "Алёна Батицкая советует" Скопировано
 🛠 Даже если дизайнер нарисовал форму, в которой не предусмотрены явные лейблы для элементов, то вам нужно всё равно прописать их в разметке и скрыть через стили. В этом случае их будет не видно, но скринридер их прочитает.
 🛠 При нажатии на лейбл, связанный с полем ввода или другим элементом формы, фокус будет перемещён на этот элемент.
 На собеседовании
 Скопировать ссылку "На собеседовании" Скопировано
 Какая разница между legend , caption и label с точки зрения доступности? Что между ними общего?
 Скопировать ссылку "Какая разница между legend, caption и label с точки зрения доступности? Что между ними общего?" Скопировано
 Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.
 Источник
 : The Label element
 The HTML element represents a caption for an item in a user interface.
 Try it
 Associating a with a form control, such as or 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 element with an element, you first need to add the id attribute to the element. Next, you add the for attribute to the element, where the value of for is the same as the id in the element.
 Alternatively, you can nest the directly inside the , in which case the for and id attributes are not needed because the association is implicit:

label> Do you like peas? input type="checkbox" name="peas" /> label>

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:

label for="username">Enter your username:label> input id="username" name="username" type="text" /> label for="username">Forgot your username?label>

Elements that can be associated with a element include , (except for type="hidden" ), , , , and .

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 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 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 elements — structurally they are simple inline elements, and so can be styled in much the same way as a or 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.

Examples

Defining an implicit label

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

Источник

: элемент Входная метка

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

Try it

Текст метки не только визуально связан с соответствующим текстовым вводом,он также связан с ним программно.Это означает,что,например,программа чтения экрана будет считывать метку,когда пользователь сосредоточен на вводе формы,облегчая пользователю вспомогательных технологий понимание того,какие данные следует ввести.
Когда пользователь щелкает или касается/касается метки,браузер передает фокус на связанный с ней ввод (результирующее событие также поднимается для ввода).Увеличение зоны попадания для фокусировки ввода дает преимущество всем,кто пытается его активировать,включая тех,кто использует устройство с сенсорным экраном.

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

В качестве альтернативы вы можете вложить непосредственно в , и в этом случае атрибуты for и id не нужны, потому что ассоциация неявная:

label>Do you like peas? input type="checkbox" name="peas"> label>

Элемент управления формы, который маркируется меткой, называется элементом управления с меткой элемента метки. С одним элементом управления формы можно связать несколько меток:

label for="username">Enter your username: label> input id="username"> label for="username">Forgot your username? label>

Элементы, которые могут быть связаны с элементом , включают , (кроме type="hidden" ), , , , и .

Attributes

Значением атрибута for должен быть один id для маркируемого элемента, связанного с формой, в том же документе, что и элемент . Таким образом, любой заданный элемент label может быть связан только с одним элементом управления формы.

Примечание. Чтобы программно установить атрибут for , используйте htmlFor .

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

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

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

Стиль с CSS

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

Examples

Простой пример этикетки

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

Источник

Label class html css

Primer CSS Animations
Primer CSS Borders
Primer CSS Box shadow
Primer CSS Colors
Primer CSS Details
Primer CSS Flexbox
Primer CSS Grid
Primer CSS Layout
Primer CSS Margin
Primer CSS Padding
Primer CSS Typography

Primer CSS Alerts
Primer CSS Autocomplete
Primer CSS Avatars
Primer CSS Blankslate
Primer CSS Box Overlay
Primer CSS Branch name
Primer CSS Breadcrumbs
Primer CSS Buttons
Primer CSS Dropdown
Primer CSS Forms
Primer CSS Header
Primer CSS Labels
Primer CSS Links
Primer CSS Loaders
Primer CSS Markdown
Primer CSS Navigation
Primer CSS Pagination
Primer CSS Popover
Primer CSS Progress
Primer CSS Select menu
Primer CSS Subhead
Primer CSS Timeline
Primer CSS Toasts
Primer CSS Truncate

Primer CSS Animations
Primer CSS Borders
Primer CSS Box shadow
Primer CSS Colors
Primer CSS Details
Primer CSS Flexbox
Primer CSS Grid
Primer CSS Layout
Primer CSS Margin
Primer CSS Padding
Primer CSS Typography

Primer CSS Alerts
Primer CSS Autocomplete
Primer CSS Avatars
Primer CSS Blankslate
Primer CSS Box Overlay
Primer CSS Branch name
Primer CSS Breadcrumbs
Primer CSS Buttons
Primer CSS Dropdown
Primer CSS Forms
Primer CSS Header
Primer CSS Labels
Primer CSS Links
Primer CSS Loaders
Primer CSS Markdown
Primer CSS Navigation
Primer CSS Pagination
Primer CSS Popover
Primer CSS Progress
Primer CSS Select menu
Primer CSS Subhead
Primer CSS Timeline
Primer CSS Toasts
Primer CSS Truncate

Источник