Формы в HTML: типы полей и встроенная валидация

Что получится и сколько это займёт

За 20–30 минут вы соберёте форму, которая сама проверяет email, номер телефона, обязательные поля и длину пароля — без JavaScript. Браузер покажет подсказку возле неверного поля и не отправит форму, пока данные не пройдут проверку. Всё это работает в актуальных версиях Chrome, Firefox, Safari и Edge (2024 год).

Дальше — разбор типов полей и атрибутов валидации на уровне HTML5. Серверная проверка данных — отдельная тема: встроенная валидация браузера удобна для пользователя, но никогда не заменяет проверку на сервере, потому что клиентскую проверку легко обойти.

Что нужно иметь до начала

• любой текстовый редактор — VS Code, Notepad++ или что угодно;
• браузер актуальной версии (2023–2024), чтобы поддерживались все типы полей;
• базовое понимание тега <form> и того, что такое атрибут в HTML.

Типы полей: не только text

Тип поля задаётся атрибутом type у элемента <input>. От него зависит не только внешний вид, но и то, какую проверку браузер применит автоматически.

Важная деталь: type="tel" не проверяет формат телефона сам — он лишь подсказывает мобильным браузерам показать цифровую клавиатуру. Формат задают через pattern. То же с паролем: type="password" только скрывает ввод точками, но не требует ни цифр, ни спецсимволов.

Атрибуты валидации

Проверку включают атрибуты на самих полях. Основные:

• required — поле обязательно, пустым форму не отправить;
• minlength и maxlength — минимальная и максимальная длина текста;
• min, max, step — границы и шаг для чисел и дат;
• pattern — регулярное выражение, которому должно соответствовать значение;
• title — текст подсказки, который браузер покажет, если pattern не совпал.

Рабочая форма целиком

Этот фрагмент можно скопировать в файл form.html, открыть в браузере и сразу проверить. Оставьте поля пустыми и нажмите кнопку — браузер не даст отправить форму и подсветит первое незаполненное поле.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Регистрация</title>
</head>
<body>

<form action="/register" method="post">

  <label>Имя
    <input type="text" name="name" required minlength="2" maxlength="40">
  </label>

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

  <label>Телефон
    <!-- Ждём формат +7 и 10 цифр -->
    <input type="tel" name="phone"
           pattern="\+7[0-9]{10}"
           title="Формат: +7 и 10 цифр без пробелов">
  </label>

  <label>Возраст
    <input type="number" name="age" min="18" max="120">
  </label>

  <label>Пароль
    <!-- Минимум 8 символов, хотя бы одна буква и одна цифра -->
    <input type="password" name="password"
           required minlength="8"
           pattern="(?=.*[A-Za-z])(?=.*[0-9]).{8,}"
           title="Минимум 8 символов, минимум одна буква и одна цифра">
  </label>

  <button type="submit">Зарегистрироваться</button>
</form>

</body>
</html>

Как понять, что работает: введите в поле «Email» слово без @ и нажмите кнопку — появится подсказка вроде «Введите адрес электронной почты». Введите в «Возраст» число меньше 18 — браузер сообщит, что значение должно быть не меньше 18.

Псевдоклассы для стилизации

CSS умеет подсвечивать поля по результату проверки через псевдоклассы :valid и :invalid. Красная рамка на невалидном поле — одна строка стилей:

input:invalid {
  border: 2px solid #d33;
}

input:valid {
  border: 2px solid #3a3;
}

Один нюанс: :invalid срабатывает сразу при загрузке, ещё до того как пользователь что-то ввёл. Чтобы рамка краснела только после попытки ввода, используют псевдокласс :user-invalid — он поддержан в Firefox давно, в Chrome и Safari появился позже (проверяйте текущую поддержку на caniuse).

Встроенная валидация HTML — это удобство для пользователя, а не защита. Любой может отключить JavaScript, поправить HTML в инструментах разработчика или отправить запрос напрямую. Данные с формы проверяйте на сервере всегда.

Где встроенная валидация ломается

Проверка email слишком слабая

Браузер считает валидным a@b — без домена первого уровня. Формально это допустимый адрес по спецификации, но на практике почта туда не дойдёт. Если нужна строгая проверка, добавьте pattern с требованием точки в доменной части — но учтите, что идеального регулярного выражения для email не существует, финальную проверку делает только письмо с подтверждением.

Ошибка pattern невнятна без title

Если pattern не совпал, а атрибута title нет, браузер покажет сухое «Соответствуйте требуемому формату» — пользователь не поймёт, что именно от него хотят. Всегда пишите title с человеческим объяснением формата.

required у чекбокса и группы radio

Для одиночного чекбокса required работает: галочку обязательно поставить. Но для группы радиокнопок достаточно поставить required на любую одну кнопку группы (с одинаковым name) — браузер потребует выбрать хотя бы одну.

Стандартные подсказки не стилизуются

Всплывающее сообщение об ошибке нельзя оформить через CSS — его вид задаёт браузер, и в Chrome, Firefox и Safari он разный. Если нужен единый дизайн ошибок, придётся перехватывать событие через JavaScript-метод setCustomValidity и рисовать сообщение самому — это уже выход за рамки чистого HTML.

Что настроить дальше

Форма проверяется в браузере — следующий обязательный шаг серверная валидация тех же данных. Клиентская проверка отсеивает опечатки и разгружает сервер, но доверять ей нельзя. Дальше стоит посмотреть в сторону атрибута novalidate у формы (отключает встроенную проверку, когда вы делаете свою на JS) и метода checkValidity() для программной проверки полей. Актуальный список поддержки типов полей и псевдоклассов по браузерам сверяйте на caniuse.com — он меняется от версии к версии.