Формы и валидация
Тема дорожной карты · Frontend разработчик
HTML-формы — главный механизм сбора пользовательского ввода в интернете: интерактивные элементы управления группируются внутри элемента <form>, который задаёт способ отправки данных через атрибуты method (GET или POST) и action. Основные элементы форм — <input> (с типами text, email, password, checkbox, radio, number, date и file), <textarea>, <select> и <button> — обеспечивают встроенную браузерную валидацию и клавиатурную доступность при правильной разметке через <label for="..."> или элементы-обёртки <label>. Атрибуты HTML5-валидации — required, pattern, minlength, maxlength, min, max и type="email" — позволяют выполнять клиентскую проверку без JavaScript, сокращая лишние обращения к серверу. В современной frontend-разработке HTML-формы дополняются JavaScript-фреймворками React (react-hook-form, formik) и типизированными схемами валидации (zod) для сложной проверки, однако знание нативного HTML Forms API и Web API FormData остаётся обязательным для создания доступных и прогрессивно улучшаемых веб-приложений.
Как это работает
Формы и валидация — семантическая структура страницы. Элементы описывают смысл, не вид: <article> — статья, <button> — кнопка, <nav> — навигация. Браузер строит DOM-дерево из разметки; CSS таргетит его селекторами; JavaScript манипулирует через DOM API. Семантическая разметка критична для SEO, accessibility (screen reader'ы её разбирают), поддерживаемости. Формы — <form>, инпуты (<input>, <select>, <textarea>), сабмит через HTTP без JS.
Когда применять
Используйте семантические HTML-элементы везде, где есть смысл — <button> вместо <div onclick>, <a> вместо роутинга в JS, <input type="email"> для email. Браузеры (и screen reader'ы, и поисковики) получают keyboard navigation, accessibility, SEO бесплатно. <div>/<span> — только как обёртки последнего средства. Запускайте Lighthouse accessibility-аудит регулярно.
Типичные ошибки
Ловушки Формы и валидация: <div onclick> вместо <button> (нет клавиатуры, screen reader, focus management); пропущенный alt на изображениях (screen reader + SEO); инпуты без <label> (невозможно использовать с assistive tech); вложенный <a> в <a> (невалидный HTML, undefined behaviour); h1-h6 для визуального размера, а не иерархии документа. Браузеры много чинят за вас — это прячет баги от тестов, но не от реальных пользователей.