Урок 34 · CSS

Красная обводка не вместо текста

Браузер умеет пометить пустое обязательное поле. Цвета без слов недостаточно.

Почему это следующий шаг

Печатная версия собрана. Вернись к форме: человек должен понять ошибку на экране.

Как сделать

Селектор :user-invalid или :invalid красит рамку после неудачного ввода. Рядом оставь текст ошибки в элементе, который не зависит от цвета. Не крась поле красным до того, как человек успел что-то ввести: пустая форма при загрузке ещё не ошибка. :focus-visible на этом поле остаётся заметным.

input:user-invalid { border-color: #b42318; }
.error { color: #b42318; }

Что проверить

• Пустая форма при открытии не выглядит сломанной.
• После плохого ввода есть слова, а не только красный край.
• Фокус на поле по-прежнему виден.