Основы форм

Нажми на слово Email рядом с хорошо сделанным полем формы, и курсор прыгнет в поле. Эта маленькая деталь и есть работа элемента label.

Что делает форма

Строки поиска, страницы регистрации и оформления заказа являются формами. Элемент <form> группирует элементы управления, и когда посетитель отправляет форму, браузер посылает name каждого элемента вместе с его значением по адресу из атрибута action формы. Атрибут method говорит, как: get кладёт данные в адрес, что подходит для поиска, который можно сохранить в закладки, а post отправляет их в теле запроса, что подходит для всего, что меняет данные, например заказа. HTML строит форму, а программа на сервере решает, что делать с пришедшими данными.

<form action="/subscribe" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" autocomplete="name">

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required autocomplete="email">

  <button type="submit">Subscribe</button>
</form>

Каждому элементу управления нужна подпись

Элемент <label> даёт имя элементу управления. Свяжи их, дав полю id, а подписи совпадающий атрибут for, или поместив поле внутрь подписи. Связь даёт две вещи. Экранный диктор читает подпись, когда поле получает фокус, и пользователь слышит «Email, редактируемый текст», а не просто «редактируемый текст». А щелчок по подписи ставит фокус в поле или отмечает флажок, что даёт каждому, особенно на телефоне, цель побольше. placeholder (серая подсказка внутри поля) подписью не является: он исчезает, как только начинаешь печатать, часто плохо контрастирует, а некоторые вспомогательные технологии его игнорируют.

Типы полей

Атрибут type у <input> меняет элемент управления. text является однострочным полем по умолчанию. email, tel и url выглядят похоже, но на телефонах показывают подходящую клавиатуру, а браузер проверяет, что адрес почты имеет правильную форму. number принимает цифры, и у него могут быть min и max. password скрывает вводимое, date предлагает календарь, а checkbox и radio являются полями для отметки. Для длинного текста используй <textarea>, а для выбора из списка <select> с элементами <option> внутри.

Группировка вариантов

Переключатели (radio), относящиеся к одному вопросу, имеют одинаковый name, и выбрать можно только один из них. Оберни группу в <fieldset>, а вопрос помести в <legend>. Тогда экранный диктор прочитает вопрос вместе с каждым вариантом: «Loaf size, Small, переключатель, 1 из 2». У каждого переключателя всё равно своя подпись.

Кнопки и встроенные проверки

<button> внутри формы по умолчанию отправляет её. Запись type="submit" делает это явным, а type="button" создаёт кнопку, которая ничего не делает, пока JavaScript не даст ей работу. Перед отправкой браузер может проверить поля за тебя. required останавливает форму, если поле пустое, type="email" отвергает текст без @, а minlength, min и max задают пределы. Эти проверки помогают посетителю исправить ошибки заранее, но выполняются в его браузере и их можно обойти, поэтому сервер должен проверить данные ещё раз. Атрибут autocomplete со значениями вроде email или name позволяет браузеру подставить сохранённые данные. Это экономит набор всем и особенно помогает людям с трудностями движения или памяти.