Установка ярлыков в HTML. Как элемент Label облегчает выбор полей формы?

установка ярлыков в html. как элемент label облегчает выбор полей формы?

Для чего нужны ярлыки

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

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

Побочные эффекты ярлыков:

  • однострочный и многострочный текст — курсор ввода помещается внутрь поля. Пользователь может сразу набирать текст.
  • чекбоксы и переключатели — активируются или деактивируются (в зависимости от предыдущего состояния).
  • выпадающие списки — берутся в фокус, но открытие списка не происходит.
  • выбора файла - открывается файловый проводник для перемещения по директориям.
  • различные виды кнопок — происходит действие, соответствующее типу кнопки.

Заметка
Ярлыки в HTML особенно полезны для привязки к чекбоксам и переключателям. Данные поля по умолчанию имеют маленькие размеры, к тому же у них отсутствует какое-либо описание. Расположив текстовый ярлык рядом с чекбоксом или переключателем можно увеличить занимаемое им пространство и дать короткое пояснение, что значительно упростит пользователю выбор.

Создание и привязка ярлыка

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

Привязка к конкретному полю формы может происходить двумя способами:

  • Полю, предназначенному для связи с ярлыком, нужно назначить атрибут id,имеющий уникальное значение. При этом ярлык может располагаться где угодно внутри формы. Привязка осуществляется за счет установки элементу <label> атрибута for, значением которого должен быть id выбранного поля.
  • Полю можно не задавать атрибут id, а элементу <label> соответственно не требуется указание атрибута for. Для осуществления привязки необходимо поместить желаемое поле между открывающим и закрывающим тегом ярлыка.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример двух вариантов создания ярылков</title>
    </head>
    <body>
        <form>
            <!-- ярлыки с привязкой через for -->
            <label for="contact"><i>Адрес для получения ответа:</i></label>
            <input id="contact" type="email">
            <br><br>

            <label for="resume"><i>Загрузите резюме:</i></label>
            <input id="resume" type="file">
            <br><br>

            <!-- ярлыки без использования for -->
            <span><i>Ваши личные качества:</i></span>
            <br>
            <label>
                <input type="checkbox" name="persistence">упорство /
            </label>
            <label>
                <input type="checkbox" name="persistence">ответственность /
            </label>
            <label>
                <input type="checkbox" name="friendliness">дружелюбие
            </label>
            <br><br>

            <!-- кнопка отправки формы -->
            <input type="submit" value="Отправить">
        </form>
    </body>
</html>
отображение полей формы с привязкой к ярлыкам
Рис 1. Отображение полей привязанных к ярлыкам

Заметка
Чаще всего ярлыки содержат обычный текст, кратко характеризующий связанное с ними поле. Нужно отметить, что к такой практике привыкли как веб-мастера, так и пользователи. Однако вы можете экспериментировать, и использовать изображения, стилизованные элементы и т.д.

Последние публикации