Тег <label>: подписи к полям
Как сделать понятное имя поля и увеличить удобную область клика.
Зачем нужен этот элемент
label связывает видимую подпись с элементом формы. При нажатии на подпись текстовое поле получает фокус, а checkbox может переключиться. Это особенно полезно на небольшом экране, где попасть в маленький контрол труднее.
Самый явный способ связи — for у label и совпадающий id у поля. Идентификатор должен быть уникален в пределах документа. Можно также вложить поле внутрь label, но не помещайте туда несколько разных элементов ввода.
Синтаксис и пример
<input id="news" name="news" type="checkbox">
<label for="news">Получать новости справочника</label>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| for | Точное значение id связанного поля. |
| id поля | Уникальный идентификатор на странице. |
| Текст | Понятное имя, остающееся видимым после ввода. |
Частая ошибка
Одинаковый id у нескольких полей ломает связь с подписью. При копировании формы меняйте не только name, но и id/for.
Небольшая практика
Нажмите на слова «Получать новости» в примере. Флажок должен переключаться так же, как при клике по самому квадратику.
Разберите также <input>, <textarea>: эти элементы пригодятся в том же интерфейсе.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.