Подписи и группы полей

Поле без подписи — загадка: непонятно, что в него вводить. В HTML подпись — не просто текст рядом с полем, а отдельный элемент <label>, связанный с полем. Связь даёт сразу две вещи: щелчок по подписи активирует поле, а программа чтения с экрана произносит подпись, когда пользователь попадает в поле.

Подпись через for и id

Атрибут for у <label> содержит id поля, к которому относится подпись:

<label for="email">Электронная почта</label>
<input type="email" id="email">

Щёлкните по словам «Электронная почта» — курсор встанет в поле.

Поле внутри подписи

Поле можно вложить прямо в <label>. Тогда связь возникает сама, и for с id не нужны:

<p><label>Имя <input type="text"></label></p>
<p><label>Город <input type="text"></label></p>

Оба способа правильные. Первый удобнее, когда подпись и поле стоят в разных местах разметки.

Подписи у флажков

Для флажков и переключателей подпись особенно важна: сам квадратик маленький, и попасть в него трудно. С <label> нажимать можно на весь текст:

<p><label><input type="checkbox"> Запомнить меня</label></p>
<p><label><input type="checkbox"> Согласен с условиями доставки</label></p>

Группа полей

<fieldset> объединяет связанные поля в группу, а <legend> — название группы. Браузер обводит группу рамкой:

<fieldset>
  <legend>Доставка</legend>
  <p><label>Улица <input type="text"></label></p>
  <p><label>Дом <input type="text"></label></p>
</fieldset>

Группа переключателей

Чаще всего <fieldset> нужен для переключателей: у каждого варианта своя подпись, а у всей группы — общий вопрос в <legend>:

<fieldset>
  <legend>Размер кофе</legend>
  <label><input type="radio" name="size" value="s"> Маленький</label>
  <label><input type="radio" name="size" value="m" checked> Средний</label>
  <label><input type="radio" name="size" value="l"> Большой</label>
</fieldset>

Программа чтения с экрана скажет «Размер кофе, Средний» — без <legend> человек услышал бы только «Средний» и не понял бы, о чём вопрос.

Отключённая группа

Атрибут disabled у <fieldset> выключает сразу все поля внутри: их нельзя изменить, и они не отправляются:

<fieldset disabled>
  <legend>Подарочная упаковка (нет в наличии)</legend>
  <label><input type="checkbox"> Упаковать в подарок</label>
</fieldset>

Частая ошибка

placeholder не заменяет подпись. Он исчезает, как только человек начал печатать, — и уже не вспомнить, что это было за поле. Многие программы чтения с экрана его не читают. Название поля пишите в <label>, а в placeholder — пример значения:

<label for="phone">Телефон</label>
<input type="tel" id="phone" placeholder="+1 202 555 0123">