HTML-тег <label>

HTML-тег <label> используется для определения метки для элемента <input> . Он улучшает доступность и удобство использования, связывая описательную метку с элементом управления формы, таким как текстовое поле, флажок или переключатель. При щелчке по метке фокус устанавливается на соответствующий элемент ввода или активируется.

Тег <label> помогает пользователям, в том числе тем, кто использует программы чтения с экрана, понять назначение поля ввода, с которым он связан.

Базовый синтаксис HTML-тега <label>

Базовая структура тега <label> следующая: 

<label for="id-of-input">Label Text</label>
<input type="type" id="id-of-input">

Атрибут for тега <label> связывает его с id соответствующего элемента <input> .

Атрибуты HTML-тега <label>

  • для: Связывает метку с id элемента <input> , обеспечивая взаимодействие и доступность.
  • Глобальные атрибуты: поддерживает глобальные атрибуты, такие как id , class и style .
  • Атрибуты событий: поддерживает такие атрибуты событий, как onclick , onmouseover и onfocus .

Базовый пример HTML-тега <label>

Вот простой пример использования тега <label> с полем ввода текста: 

<!DOCTYPE html>
<html>
    <body>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
    </body>
</html>

Пояснение: Тег <label> связан с элементом <input> через атрибут for . Щелчок по метке активирует поле ввода.

Использование вложенных меток

Тег <label> также может содержать элемент ввода как дочерний, устраняя необходимость в атрибуте for : 

<!DOCTYPE html>
<html>
    <body>
        <label>
            Email:
            <input type="email" name="email">
        </label>
    </body>
</html>
Использование вложенных меток

Объяснение: Поле ввода вложено в тег <label> , благодаря чему метка автоматически связывается с полем ввода.

Пример с флажками и радиокнопками

Тег <label> часто используется с флажками и переключателями, чтобы сделать их кликабельными: 

<!DOCTYPE html>
<html>
    <body>
        <p>Select your favorite fruit:</p>

        <label for="apple">
            <input type="checkbox" id="apple" name="fruit" value="apple"> Apple
        </label>


        <label for="banana">
            <input type="checkbox" id="banana" name="fruit" value="banana"> Banana
        </label>


        <label for="orange">
            <input type="checkbox" id="orange" name="fruit" value="orange"> Orange
        </label>
    </body>
</html>

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

Стилизация тега <label> с помощью CSS

Вы можете стилизовать тег <label> с помощью CSS, чтобы улучшить его внешний вид: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            label {
                font-size: 16px;
                font-weight: bold;
                display: block;
                margin-bottom: 5px;
                color: #333;
            }

            input {
                padding: 8px;
                width: 300px;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
        </style>
    </head>
    <body>
        <label for="fullname">Full Name:</label>
        <input type="text" id="fullname" name="fullname" placeholder="Enter your full name">
    </body>
</html>
Оформление этикетки Тег с помощью CSS

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

Практическое применение тега <label>

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