Форма — это, пожалуй, самый недооценённый по сложности элемент HTML. На первый взгляд всё просто: тег form, внутри несколько input, кнопка отправки. Но стоит копнуть чуть глубже, и оказывается, что там масса деталей, влияющих и на удобство, и на доступность сайта.
У input есть множество типов помимо обычного текстового: email проверяет формат почты прямо в браузере, tel подсказывает мобильным устройствам показать цифровую клавиатуру, date открывает календарь. Использование правильного типа избавляет от части ручной валидации и делает форму удобнее на телефоне.
Тег label — это не просто подпись рядом с полем, а элемент, который официально связан с конкретным input через атрибут for. Клик по такой подписи ставит фокус в поле, а скринридер озвучивает подпись при переходе к полю. Без этой связи форма формально работает, но становится куда менее удобной.
Кнопка отправки может быть как обычной button, так и input с типом submit — разница небольшая, но button гибче, потому что внутрь можно вставить, например, иконку. Важно не забывать про атрибут type у кнопок внутри формы, иначе браузер по умолчанию считает любую кнопку submit-кнопкой, что иногда приводит к неожиданной отправке формы.
Разбор всех типов полей и атрибутов валидации подробно описан в руководстве MDN по веб-формам.
Атрибут required, добавленный к полю, включает встроенную проверку браузера — попытка отправить пустую обязательную форму покажет стандартную подсказку без единой строчки JavaScript. Этого не всегда достаточно для сложной валидации, но для простых форм обратной связи такого встроенного поведения нередко хватает с запасом.
Отдельно стоит продумать, что происходит после отправки формы — пустая белая страница с надписью "спасибо" где-то в углу редко радует посетителя. Понятное сообщение об успехе прямо на том же экране куда лучше показывает, что заявка действительно ушла и её не нужно отправлять повторно.
