Пользователи ошибаются при заполнении форм: забывают поле, вводят почту без «собаки», оставляют телефон пустым. Хорошая форма замечает это сразу и мягко подсказывает, что исправить, — не заставляя гадать. Приятно, что базовую проверку можно организовать вообще без программирования, силами HTML и CSS: браузер сам проверит данные, а мы визуально подсветим правильные и ошибочные поля. Это делает формы надёжнее и дружелюбнее.

После этого урока вы сможете настроить встроенную проверку формы и наглядно показывать пользователю, какие поля заполнены верно, а какие требуют внимания.

Что уже умеем / что добавим

Вы умеете оформлять поля и их состояния фокуса и наведения. Теперь добавим визуальную обратную связь о правильности ввода. В сквозном проекте мы завершим форму обратной связи: подсветим корректные и ошибочные поля и обозначим обязательные.

Что вы узнаете в рамках статьи

• Как работает встроенная валидация браузера.
• Как псевдокласс :required помечает обязательные поля.
• Как :valid и :invalid отражают правильность ввода.
• Как подсвечивать поля цветом в зависимости от состояния.
• Почему браузерной валидации недостаточно для настоящей защиты.

Ключевые термины

• Валидация — проверка правильности введённых данных.
• :required — псевдокласс обязательного поля.
• :valid — псевдокласс поля с корректным значением.
• :invalid — псевдокласс поля с некорректным значением.
• Встроенная валидация — проверка данных силами браузера.

Встроенная валидация браузера

Вы уже познакомились с атрибутами required и type="email". Оказывается, они не просто удобны — браузер использует их для проверки. Когда пользователь пытается отправить форму, браузер сам смотрит: заполнены ли обязательные поля, соответствует ли email формату адреса, и если нет — не отправляет форму и показывает подсказку.

<input type="email" name="email" required>

Такое поле браузер проверит дважды: что оно не пустое (из-за required) и что в нём похожий на адрес текст (из-за type="email"). Всё это работает без единой строки скриптов. Наша задача в этом уроке — не настроить саму проверку (она уже включена атрибутами), а красиво показать её результат средствами CSS.

Обязательные поля: :required

Псевдокласс :required выбирает поля с атрибутом required. Он удобен, чтобы визуально выделить обязательные поля — например, лёгким фоном или пометкой:

input:required,
textarea:required {
  border-left: 3px solid #1a3c8c;
}

У всех обязательных полей появится синяя полоса слева — пользователь сразу видит, что их нельзя пропустить. Это чисто визуальная подсказка поверх уже работающей логики required. Так вы делаете требования формы наглядными, ещё до попытки отправки.

Правильность ввода: :valid и :invalid

Два парных псевдокласса отражают результат проверки. :valid выбирает поле, значение которого корректно, :invalid — поле с ошибкой (например, пустое обязательное или email в неверном формате). Подсветим их цветом рамки:

input:valid {
  border-color: #2e9e5b;
}

input:invalid {
  border-color: #d64545;
}

Поле с корректным значением получит зелёную рамку, с ошибочным — красную. Пользователь по ходу заполнения видит, всё ли в порядке. Есть нюанс: изначально пустые обязательные поля сразу считаются :invalid и краснеют, что может выглядеть агрессивно. На практике часто комбинируют состояния — например, показывают ошибку только после того, как пользователь тронул поле, — но базовый механизм именно такой.

Границы возможностей и хорошая практика

Важно понимать: встроенная валидация — это удобство для пользователя, но не защита. Её легко обойти, поэтому по-настоящему данные всегда проверяют ещё раз на сервере. Для нас, на уровне вёрстки, HTML/CSS-валидация решает свою задачу — помогает человеку заполнить форму правильно и получить мгновенную обратную связь.

Чтобы подсветка не была слишком резкой для ещё не заполненных полей, аккуратный приём — совмещать :invalid с :focus, показывая красный цвет только у активного ошибочного поля:

input:focus:invalid {
  border-color: #d64545;
}

Здесь красная рамка появится только когда пользователь работает с полем и ввёл что-то некорректное. Такие комбинации псевдоклассов дают деликатную, не пугающую валидацию. Это уже уровень продуманного пользовательского опыта.

Применяем в проекте

Завершим форму обратной связи наглядной валидацией. Обозначим обязательные поля, подсветим корректные зелёным, а активные ошибочные — красным.

.contact input:required,
.contact textarea:required {
  border-left: 3px solid #1a3c8c;
}

.contact input:valid,
.contact textarea:valid {
  border-color: #2e9e5b;
}

.contact input:focus:invalid,
.contact textarea:focus:invalid {
  border-color: #d64545;
}

Обновите страницу и заполните форму: обязательные поля отмечены синей полосой, правильно заполненные подсвечиваются зелёным, а если в активном поле ошибка — оно краснеет. Попробуйте отправить форму пустой — браузер не даст этого сделать и подскажет, что заполнить. Ваша форма обратной связи стала полностью рабочей, удобной и наглядной.

Частые ошибки

• Ожидание защиты от валидации.
  Браузерная проверка — для удобства пользователя, реальная защита данных делается на сервере.
• Агрессивная подсветка пустых полей.
  Пустые обязательные поля сразу :invalid; смягчайте это через :focus:invalid.
• Валидация без атрибутов.
  :valid/:invalid работают на основе required, type и подобных — без них проверять нечего.
• Только цвет для ошибки.
  Не полагайтесь исключительно на цвет; браузерная подсказка и текст помогают тем, кто не различает оттенки.

Итоги

Замечательно — вы завершили раздел о формах на сильной ноте! Теперь вы понимаете, как работает встроенная валидация браузера, и умеете наглядно её показывать: помечать обязательные поля через :required, подсвечивать корректный ввод через :valid и ошибки через :invalid, а также деликатно комбинировать состояния. И всё это — без единой строки программирования. Ваша форма обратной связи стала по-настоящему завершённой и дружелюбной.

Поздравляем — вы освоили формы целиком, от разметки до валидации! В следующем, заключительном разделе курса мы наведём порядок в самом CSS-коде: разберём именование по BEM, специфичность и аккуратную организацию стилей.