Формы HTML: поля, подписи и проверка

Как связать label с input, собрать значения и использовать встроенную проверку браузера.

Форма собирает данные пользователя: например, имя, email и выбранный курс. Элемент form объединяет поля и кнопки, input создает поле ввода, а label – его подпись.

Подпись, поле и кнопка

index.html

<form action="/registration" method="post">
  <label for="student">Имя</label>
  <input id="student" name="student" autocomplete="given-name" required />
 
  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" required />
 
  <button type="submit">Проверить поля</button>
  <button type="reset">Очистить</button>
</form>

for="email" у подписи совпадает с id="email" у поля. Нажатие на подпись переводит фокус в поле. Скринридер тоже понимает эту связь.
name="email" задает имя данных при отправке. id связывает элементы на странице, а name обозначает поле в отправляемых данных. Это разные задачи.
type="email" включает проверку формата адреса. Без type обычный input создает текстовое поле.
autocomplete подсказывает браузеру, какие сохраненные сведения можно предложить пользователю.
required делает поле обязательным. Как и другие булевы атрибуты HTML, он действует по своему присутствию.

action задает адрес обработки, а method="post" отправляет данные в теле запроса. В этом примере /registration – пример адреса, не готовый обработчик. Чтобы регистрация действительно работала, его нужно реализовать на сервере. Позже разберем обработку формы через JavaScript и Next.js.

Попробуйте проверку браузера

Отправьте пустую форму, затем впишите неверный email и попробуйте снова. Нажмите подпись поля или перейдите к нему клавишей Tab.

Попробуйте отправить пустую форму или email без @. Данные остаются только в этом примере.

В этом тренажере поля такие же, как в коде выше. Небольшой JavaScript-обработчик отменяет отправку на сервер и выводит значения под формой. Ничего никуда не отправляется. HTML самостоятельно проверяет required и формат email до вызова обработчика.

Другие поля

Элемент	Для чего	На что обратить внимание
`input type="password"`	Пароль	Скрывает символы на экране, но само по себе не защищает передачу
`input type="number"`	Числовое значение	`min`, `max`, `step` ограничивают допустимые значения
`input type="checkbox"`	Независимый выбор	Несколько флажков могут быть отмечены одновременно
`input type="radio"`	Один вариант из группы	Одинаковый `name` объединяет варианты
`textarea`	Многострочный текст	У элемента есть парный закрывающий тег
`select` с `option`	Выбор из списка	У каждой опции можно задать `value`

value – значение поля. У флажка оно отправляется, только когда тот отмечен; у переключателя отправляется значение выбранного варианта. Поле без name обычно не входит в отправляемые данные. Отключенное поле с disabled тоже не отправляется.

Три типа кнопки

type="submit" отправляет форму после проверки.
type="reset" возвращает поля к начальным значениям. Такая кнопка нужна не всегда: случайное нажатие может стереть введенное.
type="button" не отправляет форму; действие для нее обычно задают через JavaScript.

У обычного button внутри формы по умолчанию поведение submit. Указывайте тип явно: иначе кнопка «Показать пароль» может неожиданно попытаться отправить форму.

placeholder – подсказка внутри пустого поля. Она исчезает при вводе и не заменяет label. Подпись должна оставаться понятной, даже когда поле уже заполнено.

Подробнее: первая форма на MDN, проверка данных в браузере и подписи полей W3C.