Что такое обязательное поле — и почему про звёздочку советуют разное

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

А теперь смотри. Nielsen Norman Group, главная контора по юзабилити, в статье от 16 июня 2019 года пишет: помечай звёздочкой каждое обязательное поле. Дизайн-система GOV.UK — эталон государственных сервисов Британии — пишет буквально: «Никогда не помечайте обязательные поля звёздочками». И добавляет: не ставьте на поля required.

Оба совета правильные. Разница — в том, какую форму они имеют в виду.

Что делает атрибут required

Технически всё просто. required на поле означает: браузер не отправит форму, пока поле пустое.

<label for="email">Электронная почта</label>
<input id="email" name="email" type="email" required />

Браузер сам покажет всплывающую подсказку у поля и переведёт на него фокус. В CSS появляются :required и :invalid — можно подсветить. Скринридер прочитает поле как обязательное.

Тут же прячется ловушка, на которую натыкаются почти все, кто решил подсветить обязательные поля красным. Селектор :invalid срабатывает сразу: пустое обязательное поле невалидно уже при загрузке страницы, и форма встречает человека россыпью красных рамок, хотя он ещё ничего не сделал. Лечится это соседним селектором :user-invalid — он включается только после того, как человек с полем повзаимодействовал или попробовал отправить форму. По данным MDN, он доступен во всех браузерах с ноября 2023 года, так что можно брать.

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

Почему GOV.UK отказывается и от звёздочки, и от required

У них форма устроена иначе. В их дизайн-системе действует правило «один вопрос на страницу», а перед добавлением вопроса команда обязана объяснить, зачем он нужен. Результат: почти каждое поле обязательное. Звёздочка у каждого поля — это уже не информация, а визуальный шум. Поэтому GOV.UK помечает наоборот: у редких необязательных полей прямо в подписи стоит «(optional)».

С required причина другая, техническая: они советуют вообще отключать встроенную проверку браузера через novalidate. Аргумент честный — вид, расположение и текст браузерных сообщений нельзя привести к своим компонентам, а свои они довели до доступного состояния и проверили на людях.

Почему NN/g настаивает на звёздочке

NN/g смотрит на другие формы: регистрация, заказ, заявка. Там необязательных полей полно — телефон, компания, промокод, «как вы о нас узнали».

Их аргументы против «пометим только необязательные»:

• Инструкцию сверху формы не читают. «Все поля обязательны, если не указано иное» — классическая строчка, которую пропускают глазами.
• Даже прочитанное забывают. Особенно в длинной форме и особенно на телефоне, где легко отвлечься.
• Человек начинает гадать. «Телефон? Да наверняка не обязательно» — и уходит в ошибку на отправке.

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

Правило выбора за десять секунд

1. Посчитай поля. Обязательных большинство → помечай словом «необязательное» редкие исключения. Обязательных меньшинство → звёздочка на них.
2. Никогда не оставляй форму совсем без пометок. Молчание — худший из вариантов: человек всё равно будет гадать, просто молча.
3. Дублируй смысл словами, а не только цветом. Красная звёздочка без пояснения — это загадка для того, кто не различает цвета. Добавь легенду («* — обязательное поле») или само слово рядом.
4. Проверь, что поле правда нужно. Самый дешёвый способ упростить форму — выкинуть вопрос. Если поле не влияет ни на одно твоё решение, его не надо ни помечать, ни валидировать.
5. Длинную форму лучше не помечать, а разбить на шаги — тогда обязательных на экране два-три, и вопрос отпадает сам.

И маленькая деталь, про которую забывают: слово «Required» лучше держать снаружи поля, а не в плейсхолдере. NN/g отдельно отмечает, что внутри поля его не видно, когда поле уже заполнено, — а именно тогда и хочется быстро найти незаполненные.

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

Можно ли обойтись одной звёздочкой, без слова?

Да, звёздочка узнаваема — но добавь расшифровку где-то рядом с формой и убедись, что скринридер сообщает об обязательности. Полагаться только на цвет нельзя: красный не для всех красный.

Если поле обязательное, его всё равно надо проверять на сервере?

Да, всегда. required — подсказка человеку в браузере, а не барьер. Запрос к твоему серверу можно отправить и без формы вообще, поэтому обязательность полей проверяется там же, где хранятся данные. Автозаполнение, кстати, на это не влияет — оно подставляет значения, но не отвечает за их наличие.