Что такое label в html
Перейти к содержимому

Что такое label в html

  • автор:

Элемент label

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

  • Текст становится активным и при щелчке по нему изменяется значение связанного с текстом переключателя или флажка. Это удобно для пользователя, потому что не приходится целиться курсором в небольшой по размерам элемент.
  • Стили для позволяют задать положение текста и другие характеристики оформления.

Простой вариант использования заключается в добавлении полей формы прямо внутрь с желаемым текстом, как показано в примере 1.

Пример 1. Использование

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

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

Пример 2. Атрибут for

Формы

# Работа со временем

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

Также применяется как один из элементов для вёрстки сложных форм. В примере 3 показана форма авторизации, в которой текст располагается рядом с полями для ввода логина и пароля.

Пример 3. Форма для авторизации

Результат данного примера показан на рис. 1.

Форма для авторизации пользователя

Рис. 1. Форма для авторизации пользователя

См. также

  • Аккордеон меню
  • Вкладки на CSS
  • Выпадающее меню
  • Использование :checked
  • Подсказка в поле формы
  • Пользовательские формы
  • Стилизация переключателей
  • Стилизация флажков
  • Формы в Bootstrap 4
  • Формы в HTML

Элемент label

Элемент label (от англ. «label» ‒ «метка, надпись») устанавливает связь между меткой (текст, изображение) и элементом формы. В случае установления такой связи, например между содержимым данного элемента, и полем ввода, нажатие левой кнопки мыши на содержимое приводит к получению фокуса связанным элементом формы.

Примечание

Метки располагаемые внутри элемента label можно связать с элементом формы двумя различными способами:

    Вложив элемент формы в элемент label .

 . id >

HTML тег

Тег

Тег также используется для определения горячих клавиш на клавиатуре и перехода на активный элемент подобно ссылкам.

Связать текстовую метку и форму, к которой она относится, можно двумя способами:

  1. установить идентификатор id внутри элемента и указать его имя в качестве атрибута for тега .

Пример

html> html> head> title> Заголовок документа title> head> body> form> label for="lfname">Имя пользователя: label> input id="lfname" name="fname" type="text" /> form> body> html>

Результат

labelexample1

Пример

html> html> head> title>Заголовок документа title> head> body> form> label>Имя input id="User" name="Имя" type="text" /> label> form> body> html>

Результат

labelexample2

Пример (форма с флажками)

html> html> head> title>Заголовок документа title> head> body> form> label for="barca">Барселона label> input type="radio" name="team" id="barca" value="Барселона">br /> label for="real">Реал Мадрид label> input type="radio" name="team" id="real" value="Реал Мадрид">br /> form> body> html>

Результат

labelexample3

Используйте CSS свойства font для стилизации тега .

Пример

html> html> head> title>Заголовок документа title> style> body < padding: 20px; > label < font-size: 20px; font-weight: 700; color: #1c87c9; > input < width: 50%; height: 28px; padding: 4px 10px; border: 1px solid #666; background: #cce6ff; color: #1c87c9; font-size: 16px; > style> head> body> form> label>Ваше имя: label> input id="User" name="Name" type="text"/> form> body> html>

Результат

labelexample4

Атрибуты

Атрибут Значение Описание
accesskey accesskey Определяет горячую клавишу, с помощью которой можно перейти к привязанному к метке (через атрибут for) элементу формы.
for element_id Устанавливает идентификатор элемента, к которому должна быть привязана метка.
form form_id Определяет форму (формы) с которой будет связана метка. Этот атрибут позволяет размещать метки в произвольном месте документа, а не только в качестве потомка элемента тега .
Элемент был удален из спецификации HTML.

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

  • CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
  • CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
  • CSS свойство font-size задает размер щрифта.
  • CSS свойство font-weight устанавливает насыщенность шрифта.
  • CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
  • CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега :

  • CSS свойство color определяет цвет контента и оформления текста.
  • CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега :

  • CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
  • CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
  • CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
  • CSS свойство word-break указывает перенос строки.

Другие свойства для тега :

  • CSS свойство text-shadow добавляет тень к тексту.
  • CSS свойство text-align-last выравнивает последнюю строку текста.
  • CSS свойство line-height устанавливает межстрочный интервал.
  • CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
  • CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Тег label

Тег label задает метку для поля ввода типа input , textarea , select и так далее.

Метка привязывается к определенному полю ввода с помощью атрибута for . В нем следует указывать значение атрибута id поля ввода, к которому привязана метка. Также метка привязывается к элементу, если этот элемент положить вовнутрь тега label. В этом случае атрибут for указывать не надо. Смотрите примеры для лучшего понимания.

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

Привязанное к метке текстовое поле ввода типа input и textarea будет получать фокус ввода. Фокус — это когда курсор моргает в поле ввода, в этом случае, если вы что-то будете писать на клавиатуре — текст попадет в это поле (см. псевдокласс focus для продвинутого понимания фокуса).

Метку label можно использовать для имитации чекбокса или радио кнопочки. Это нужно для того, чтобы сделать checkbox или radio со своим дизайном (что на CSS запрещено, но с помощью хитрых приемов возможно).

Атрибуты

Атрибут Описание
for В данном атрибуте следует указывать значение атрибута id того поля ввода, к которому привязана метка label .
accesskey Задает горячую клавишу, с помощью которой можно перейти к привязаному к метке (через атрибут for ) элементу формы. Подробнее см. атрибут accesskey .

Пример . Чекбокс

Давайте к флажку checkbox привяжем метку с помощью атрибута for . Понажимайте на метку и вы увидите смену состояния флажка с отмеченного на неотмеченное и наоборот:

Пример . Внутри label

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

Пример . Текстовое поле ввода

Давайте тегу input привяжем метку с помощью атрибута for . Нажатие на метку будет приводить к получению фокуса полем ввода. При этом содержащийся в поле текст (добавим с помощью атрибута value ) станет выделенным. Если начать писать что-либо на клавиатуре — этот текст затрется. Избавится от выделения, не удалив при этом текст, можно кликнув мышкой по полю ввода: фокус при этом не исчезнет, а выделение пропадет:

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

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