Тег label — метка для поля ввода
Тег label задает метку для поля ввода
типа input, textarea, select и так далее.
Метка привязывается к определенному полю
ввода с помощью атрибута for. В нем
следует указывать значение атрибута id поля ввода, к которому привязана метка. Также
метка привязывается к элементу, если этот
элемент положить вовнутрь тега label. В этом
случае атрибут for указывать не надо. Смотрите
примеры для лучшего понимания.
По нажатию на метку привязанные к ней чекбоксы или радио кнопочки будут менять свое состояние с отмеченного на неотмеченное и наоборот. Метка в данном случае нужна для удобства: в мелкие элементы формы тяжело попасть курсором, а в длинную метку с текстом — на порядок легче.
Привязанное к метке текстовое поле ввода
типа input и textarea будет получать фокус ввода. Фокус — это когда курсор моргает в поле ввода,
в этом случае, если вы что-то будете писать
на клавиатуре — текст попадет в это поле
(см.
focus для продвинутого понимания фокуса). Метку label можно использовать для
имитации чекбокса
или радио
кнопочки. Это нужно для того, чтобы сделать
checkbox или radio со своим дизайном (что
на CSS запрещено, но с помощью хитрых приемов
возможно).
Атрибуты
| Атрибут | Описание |
|---|---|
for | В данном атрибуте следует указывать значение атрибута id
того поля ввода, к которому привязана метка label. |
accesskey | Задает горячую клавишу, с помощью которой можно перейти к привязаному к метке
(через атрибут 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-css | xhtml.ru
CSS
Загрузка…
Для максимально возможной кросс-браузерной поддержки стилизации полос прокрутки (scrollbar) лучше использовать специальные CSS-свойства с префиксом ::webkit (для Chrome и Safari), и стандартизированные свойства scrollbar-width совместно с scrollbar-color (для Firefox)
HTML
Загрузка…
Древовидное представление (сворачиваемый список) можно сделать, используя только html и css, без использования JavaScript.
Паттерны
Загрузка…
Шаблон html-страницы с шапкой, подвалом и двумя боковыми панелями по бокам от контента
Паттерны
Загрузка…
Заголовок, описание и изображение равномерно выстраиваются внутри соседних карточек
Паттерны
Загрузка…
Такой html-макет, обычно называемый sticky footer, часто используется как для веб-сайтов, так и для приложений.
Паттерны
Загрузка…
HTML-макет, который растягивается в зависимости от пространства и привязывается к следующей строке минимального размера.
Паттерны
Загрузка…
Адаптивный макет с автоматически размещаемыми и гибкими дочерними элементами
Паттерны
Макет, в котором для боковой панели указаны минимальный и максимальный размеры, а остальной контент заполняет оставшееся пространство.
Паттерны
Загрузка…
Центрирование элемента внутри его родителя одной строкой кода: place-items: center
Паттерны
Загрузка…
Классическая сетка из 12 колонок. Такую сетку можно быстро написать с помощью CSS-функции repeat()
HTML
Загрузка…
Рассматривается общий принцип реализации «прыгающих» подписей к полям формы — преобразования placeholder текстового поля в label снаружи него с помощью только CSS и HTML.
CSS
Загрузка…
Особенности работы css-свойства aspect-ratio, которое определяет соотношение между шириной и высотой контейнера. Примеры, когда aspect-ratio игнорируется и не применяется, работает не так, как ожидалось или не работает совсем.
CSS
Загрузка…
Как написать стили для выпадающих списков select, сохраняя читаемость, доступность и контрастность в соответствии с требованиями WCAG 2.1.
CSS
Загрузка…
Обычно, чтобы добавить такой эффект уменьшения шапки при скролле страницы, используется немного JavaScript и CSS, но с появлением position: sticky то же самое можно сделать, используя только CSS.
CSS
Загрузка…
Как создать отзывчивую выдвигающуюся боковую панель (sidebar) для навигации, которая отслеживает состояние, поддерживает управление с клавиатуры, работает с Javascript и без него в разных браузерах
CSS
Загрузка…
Макет сетки календаря — идеальный кандидат для использования CSS-grid и его свойств: grid-template-columns и grid-column.
CSS
Загрузка…
Как сделать простой адаптивный макет с сеткой в 3 колонки с помощью CSS-grid и всего 3 CSS-свойств grid-area, grid-gap и grid-template-area.
CSS
Загрузка…
Как с помощью только CSS расположить картинку или любой float-блок в нижнем углу или по бокам контейнера и текстом вокруг неё.
CSS
Загрузка…
Применение CSS-свойства aspect-ratio для установки отношения сторон контейнеру вместо использования трюков с помощью padding-top: 56.25% и несколько практических примеров.
CSS
Загрузка…
Ключевые свойства спецификации Scroll Snap. CSS-cвойство scroll-snap-type используется в контейнере со скроллом для определения его типа и направления.
Тег ярлыка HTML
❮ Предыдущий Полный справочник HTML Далее ❯
Пример
Три переключателя с метками:
php»> Попробуйте сами »
Определение и использование
Тег определяет метку для нескольких элементов:
- < тип ввода = "флажок">
- <тип ввода = "цвет">
- <тип ввода = "дата">
- <тип ввода = "файл">
- <тип ввода = "месяц">
- <тип ввода="число">
- <тип ввода = "пароль">
- <тип ввода = "радио">
- <тип ввода = "диапазон">
- <тип ввода = "поиск">
- <тип ввода="тел">
- <тип ввода = "текст">
- <тип ввода="время">
- <тип ввода = "неделя">
- <метр>
- <прогресс>
- <выбрать>
- <текстовое поле>
Надлежащее использование меток с элементами, указанными выше, принесет пользу:
- Пользователи программ чтения с экрана (прочитают метку вслух, когда пользователь сфокусирован на элемент)
- Пользователи, которым трудно нажимать на очень маленькие области (например,
флажки) — потому что, когда пользователь щелкает текст в пределах
<метка>элемент, он переключает ввод (это увеличивает область попадания).
Советы и примечания
Совет: Атрибут for должен быть равен атрибуту id
связанный элемент, чтобы связать их вместе. Метку также можно привязать к элементу, поместив элемент внутрь элемента .
Поддержка браузера
| Элемент | |||||
|---|---|---|---|---|---|
| <метка> | Да | Да | Да | Да | Да |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| для | element_id | Указывает идентификатор элемента формы, к которому должна быть привязана метка. |
| форма | form_id | Указывает, к какой форме относится этикетка. |
Глобальные атрибуты
Тег также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
Тег также поддерживает атрибуты событий в HTML.
Связанные страницы
Ссылка HTML DOM: Label Object
Настройки CSS по умолчанию
Большинство браузеров отображают элемент со следующими значениями по умолчанию:
Пример
label {
cursor: default;
}
Попробуйте сами »
❮ Предыдущая Полный справочник HTML Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
Лучшие ссылки
HTML ReferenceCSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.
CSS Reference Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
9 Top3 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
How To Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Тег легенды HTML
❮ Назад Полный справочник HTML Далее ❯
Пример
Группировка связанных элементов в форме:
php»> Попробуйте сами »
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Тег определяет заголовок для элемента