**HTML-элемент **представляет собой подпись к элементу пользовательского интерфейса.
Категории контента
Общий поток, текстовый контент, интерактивный контент, элемент формы, ощутимый контент.
Допустимый контент
Текстовый контент, но без вложенных элементов label . Недопустимы другие оборачиваемые в label элементы помимо целевого.
Пропуск тегов
Нет, открывающий и закрывающий теги обязательны.
Допустимые родители
Любой элемент, разрешающий текстовый контент.
Допустимые ARIA-роли
Нет
DOM-интерфейс
HTMLLabelElement (en-US)
Атрибуты
ID labelable-элемента, который находится в том же документе, что и элемент label. Первый такой элемент в документе, ID которого совпадает со значением атрибута for , становится labeled-* контролом для данного label .
Примечание: Элемент label может иметь как атрибут for, так и отдельный элемент управления, если атрибут for указывает на содержащийся элемент управления.
Элемент формы, с которым связан label (его владелец формы). Если указано, значением атрибута является идентификатор элемента в том же документе. Это позволяет размещать элементы label в любом месте документа, а не только как потомки их элементов формы.
Примечание: Этот атрибут содержимого был удалён из спецификации HTML 28 апреля 2016 г. Однако сценарии по-прежнему имеют доступ только для чтения HTMLLabelElement.form (en-US); он возвращает форму, членом которой является связанный элемент управления label, или значение NULL, если label не связана с элементом управления или элемент управления не является частью формы.
Примечания по использованию
можно связать с элементом управления, поместив элемент управления внутри элемента или используя атрибут for . Такой элемент управления называется помеченным элементом управления надписью. Один вход может быть связан с несколькими метками.
Метки сами по себе не связаны с формами. Они только косвенно связаны с формами через элементы управления, с которыми они связаны.
Зачем нужен label HTML?
w3schools.com/tags/tag_label.asp — повышает удобство интерфейса при использовании мыши, так как щелчок по тексту элемента передается элементу с id , указанным в аттрибуте for .
– user176262
20 апр 2016 в 18:25
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Если речь именно про тег, то:
Тег устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы ( , , ). Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Кроме того, с помощью можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.
Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега . При втором способе элемент формы помещается внутрь контейнера .
Если речь про всё же про атрибут, то:
Атрибут предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри . Если атрибут label присутствует, то текст внутри тега игнорируется и в списке выводится значение label .
Зачем input оборачивать в label
Использовать тег можно двумя способами:
Добавить рядом с элементом формы. В таком случае добавляется атрибут for , значением которого будет идентификатор соответствующего элемента формы.
Обернуть элемент формы в тег .
Метка
Атрибут for — указывает, к какому элементу формы привязана подпись.
Примеры использования
Описание для поля ввода имени:
Описание для поля ввода почты:
Описание для поля ввода адреса
Адрес
Для чего использовать тег
Чтобы связать подпись с элементом формы.
Чтобы улучшить доступность формы для пользователей, использующих программы чтения с экрана.
Глобальные атрибуты
Нюансы
Чтобы связать подпись с элементом формы, ID элемента должен совпадать со значением атрибута for тега .
�� Другие теги для создания форм
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Контейнер для чего угодно. Тег
Тег определяет раздел или секцию в HTML-документе. Это контейнер, который используется для группировки других элементов, таких как текст, изображения или другие теги, в разделы или блоки.
Заголовок секции
Какое-нибудь содержимое секции
6 октября 2023
Как добавить подпись в HTML. Тег
Описание изображения
Устаревший атрибут align — выравнивание подписи относительно элемента .
Тег может использоваться только внутри элемента .
Валидный HTML требует, чтобы тег находился после элемента или других медиа-элементов внутри . Однако это необязательное правило, и подпись может располагаться перед медиа-элементом или даже внутри него.
6 октября 2023
Метаданные HTML-страницы. Тег
Тег содержит метаданные о документе HTML. Он может включать такую информацию, как имя автора, название документа, ключевые слова и набор символов.
Атрибуты тега :
charset — кодировка символов в документе.
name — имя метаданных.
content — значение метаданных.
http-equiv — HTTP-заголовок для значения атрибута content .
Атрибут charset должен быть первым атрибутом в теге , а name и http-equiv нельзя использовать вместе.
4 октября 2023
Просто кнопка. Тег
Тег создаёт кликабельную кнопку, которая может запускать действия или события на веб-странице. Например, отправку или перезагрузку формы, запуск функции, открытие нового окна или добавление товара в корзину.
Атрибуты тега :
name — имя кнопки.
type — тип кнопки, по умолчанию — submit . Атрибут type необходим, если указан атрибут value .
value — значение, которое будет отправлено на сервер при нажатии на кнопку.
disabled — указывает, что кнопка должна быть отключена.
form — одна или несколько форм, к которым принадлежит кнопка.
formaction — URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.
formenctype — указывает, как данные формы должны быть закодированы при отправке на сервер.
formmethod — метод HTTP, используемый при отправке данных формы.
formnovalidate — устанавливает, что данные формы не должны проверяться при отправке на сервер.
formtarget — указывает, где отображать ответ после отправки формы.
4 октября 2023
Независимый контент. Тег
Тег в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.
Заголовок статьи
Текст статьи.
Тегом размечают статьи в блогах, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.
Не используйте для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.
3 октября 2023
Как встроить страницу через
Тег позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.
Простейший пример использования :
Атрибут src задаёт URL-адрес страницы, которую вы хотите встроить.
Атрибуты width и height — ширина и высота фрейма (можно задавать как в пикселях, так и в процентах).
3 октября 2023
Выпадающий список. Тег
Тег используется для создания выпадающего списка. Этот тег содержит список опций, которые пользователь может выбрать. Когда пользователь выбирает опцию, выбранное значение отправляется на сервер или обрабатывается на клиентской стороне.
Все опции списка должны быть обёрнуты в тег .
Атрибуты тега :
autocomplete — подсказка для функции автозаполнения формы;
disabled — делает элемент неактивным;
form — связывает список с формой;
multiple — позволяет выбрать несколько опций;
name — задает имя элемента, которое будет отправляться на сервер;
required — делает элемент обязательным для заполнения;
size — задает количество строк в списке.
1 октября 2023
Встроенные CSS-стили для страницы с тегом
Тег используется для определения стилей для HTML-документов. Он является важным компонентом CSS, которые позволяют разработчикам создавать визуально привлекательные веб-страницы, определяя различные стили, такие как цвета, шрифты и макеты.
body
Добро пожаловать на мой сайт!
Атрибуты тега :
type — MIME-тип таблицы стилей.
media — типы носителей, для которы будет использоваться стиль.
29 сентября 2023
Изображение в HTML. Тег
Элемент используется для вставки изображений на веб-страницы.
У нет закрывающего тега. Он поддерживает изображения в различных форматах — например, JPEG, PNG, WebP, GIF, SVG.
Существуют определенные правила или стандарты использования тега , которые рекомендуются для большинства случаев в веб-разработке. Несмотря на то что конкретные требования могут варьироваться в зависимости от проекта, ниже приведены атрибуты и практики, которые часто рекомендуются к использованию.
28 сентября 2023
Верстаем формы :: Хранитель заметок
Красивые и ровные формы очень легко сверстать без использования таблиц.
Предположим, что все поля будут выровнены по левому краю, а надписи к ним располагаются слева и выровнены по правому краю.
Структура HTML, например, может быть такой:
Не важно где будут находиться надписи в коде — до или после поля, так как они будут абсолютно позиционироваться с левой стороны. Задать отступ, где расположиться надпись можно либо с помощью свойства margin-left у элемента input, либо с помощью свойства padding-left у элемента div . Второй способ, на мой взгляд, предпочтительнее, так как комментарии к полю (элемент p ) будут естественным образом выравниваться относительно него и не потребуется дополнительного оформления.
Для таких элементов как checkbox или radio естественно будет расположение надписи справа от него. По этому для таких случаев элементу label нужно добавить класс checkbox . В качестве альтернативного варианта, можно назначить ему стиль position: relative. В этом случае будет важно, чтобы в коде надпись следовала после поля.
Напоминаю, что форма отправляет только поля, у которых указан атрибут name. А элементы label ссылаются на поля по id.
Ещё заметки со схожей тематикой
Подключение Яндекс.Карт после загрузки страницы
Подсветка области клика на iOS
Нелинейная шкала слайдера
Категории
Коментарии к заметке
Владимир Старков , 24 июл 2012
Можно уменьшить количество кода и используемых идентификаторов если обернуть одиночный input в label : Например так:
Владимир Кузнецов , 24 июл 2012
Если я правильно понял, то div ты предлагаешь заменить на label , а label , в свою очередь, на span ? А в чём тут выигрыш? У меня периодически возникает желание оборачивать в label поле ввода вместе с подписью, но почему-то всегда возникают аргументы против. Скорее всего тегу придётся назначить display: block , чтобы поля были на разных строках. Это позволит кликом по любому месту блока, а не только по надписи, устанавливать фокус в поле ввода. Где-то это может оказаться «фичей», но по факту это скорее будет «багом».
Владимир Старков , 25 июл 2012
«Если я правильно понял, то div ты предлагаешь заменить на label, а label, в свою очередь, на span? А в чём тут выигрыш?»
Отпадает необходимость использовать идентификаторы для полей ввода и синхронизировать их с аттрибутом for , а также уменьшается вероятность дублирования идентификаторов.
«Скорее всего тегу придётся назначить display: block, чтобы поля были на разных строках. Это позволит кликом по любому месту блока, а не только по надписи, устанавливать фокус в поле ввода. Где-то это может оказаться «фичей», но по факту это скорее будет «багом».
Так как в вёрстке форм очень часто используется float , то одним из решений будет как раз использование этого факта в своих целях решения описанной проблемы: HTML:
Соглашусь, годное решение вышло. Я в то время, когда писал эту заметку, пытался сделать некоторое универсальное решение для любых форм в панеле управления хостингом. От этого появилась избыточность в разметке. Кстати, для форм, которым нужна валидация, я там добавляю ещё одну обёртку, чтобы показать иконку результата. Похоже, твоё решение с плавающими лейблами очень хорошо подходит для этого и дополнительная обёртка так же становится не нужна.
Отпадает необходимость использовать идентификаторы для полей ввода и синхронизировать их с аттрибутом for , а также уменьшается вероятность дублирования идентификаторов.
По-моему, это надуманная проблема. Если id вставляется руками, то можно придумать правила именования, аналогичные БЭМу, например. Если разметка формируется каким-то шаблонизатором, то обеспечить уникальность значений вообще легче лёгкого.
