Тег <label> подписывает поле формы не только визуально, но и по-настоящему связывает подпись с полем: клик по тексту подписи переключает или ставит фокус на связанное поле. Это не то же самое, что placeholder - подсказка внутри поля, которая исчезает, как только начинаешь печатать.
В этом уроке
Кликни прямо по тексту "Согласен с условиями" (не по самому квадратику) - чекбокс всё равно переключится. Это работает благодаря тому, что input вложен внутрь label.
label и его связь с полем
Связать <label> с полем можно двумя способами. Явный - атрибут for у label со значением, совпадающим с id поля. Неявный - просто поместить поле внутрь самого label, как в блокноте выше. Оба способа - настоящая, рабочая связь: клик по подписи фокусирует или переключает поле, а программы чтения с экрана озвучивают подпись вместе с полем, а не отдельно от него.
<label for="name">Имя</label><input id="name" type="text"> - явная связь через for и id, работает даже если поле визуально расположено далеко от подписи.
<p>Имя</p><input type="text"> - выглядит как подпись, но никак технически не связано с полем: клик по тексту ничего не делает, и программа чтения с экрана не свяжет их между собой.
placeholder - не замена label
Атрибут placeholder показывает подсказку внутри пустого поля, но исчезает, как только пользователь начинает печатать - и тогда, если он отвлёкся, приходится стирать введённое, чтобы снова увидеть, что за поле перед ним. Исследование Nielsen Norman Group отдельно указывает ещё две проблемы: у placeholder слишком низкий контраст серого текста по умолчанию, и не все программы чтения с экрана вообще его озвучивают. Использовать placeholder можно - но как дополнение к label, а не вместо него.
<label for="email">Email</label><input id="email" type="email" placeholder="you@example.com"> - label остаётся видимым постоянно, а placeholder только подсказывает формат примером.
<input type="email" placeholder="Email"> - подпись есть только внутри поля: стоит начать печатать - и она пропадает, а у поля вообще нет label.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Подписывать поле обычным текстом (p, span) вместо label | Выглядит как подпись, но технически никак не связано с полем - клик не работает, программы чтения с экрана не свяжут их | Использовать label с for/id или вложенностью |
| Использовать placeholder вместо label | Подсказка пропадает при вводе текста, у неё низкий контраст, и не все программы чтения с экрана её озвучивают | Всегда добавлять label, а placeholder использовать только как дополнительный пример формата |
| Забывать, что for и id должны совпадать буква в букву | Если значения не совпадают, связь между label и полем просто не работает - визуально это незаметно | Проверять, что for у label и id у поля - одна и та же строка |
Шпаргалка
| Термин | Значение |
|---|---|
| label | Подписывает поле и по-настоящему связывает подпись с ним |
| for/id | Явный способ связи - значения должны совпадать |
| Вложенность | Неявный способ связи - поле находится прямо внутри label |
| placeholder | Подсказка внутри поля, исчезает при вводе - не замена label |
Коротко: отвечаем на вопросы
Может ли placeholder заменить label?
Нет. Исследование Nielsen Norman Group документирует конкретные проблемы: текст подсказки исчезает, как только пользователь начинает печатать, у него обычно слишком низкий контраст по умолчанию, и не все программы чтения с экрана его озвучивают. placeholder можно использовать как дополнение - но не вместо label.
Какие есть способы связать label с полем?
Два: явный - атрибут for у label со значением, совпадающим с id поля, и неявный - когда поле находится прямо внутри label. Оба способа валидны по спецификации и создают настоящую связь, а не просто визуальное соседство.
Что происходит при клике на label?
Связанное поле получает фокус, а для чекбоксов и радиокнопок - переключается. Это настоящее, документированное поведение браузера, а не просто условность вёрстки - оно особенно полезно людям с моторными нарушениями, которым проще попасть кликом по большой подписи, чем по маленькому квадратику.
