Практика: обязательные поля без загадочной звёздочки

Назначение

Пользователь должен заранее понимать, какие поля обязательны. Упражнение показывает явные текстовые обозначения и нативный required вместо зависимости от цвета или необъяснённого символа.

Как это работает

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

Пример

<fieldset><legend>Учебная заявка</legend><p>Укажите тему. Комментарий можно оставить пустым.</p><label for="topic-name">Тема — обязательно</label><input id="topic-name" name="topic" required><label for="topic-comment">Комментарий — необязательно</label><textarea id="topic-comment" name="comment" rows="3"></textarea></fieldset>
<style>fieldset{display:grid;gap:.6rem;max-width:30rem}input,textarea{font:inherit;padding:.5rem;box-sizing:border-box;width:100%}</style>

Что должно получиться

Назначение обоих полей понятно до ввода. Браузер знает об обязательности темы из required, а человек видит ту же информацию в подписи. Необязательное поле не создаёт ложного ожидания.

Граница применения и частая ошибка

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

Самостоятельная проверка

Проверьте клавиатурный переход и клик по подписям. В отдельном тестовом файле посмотрите validity.valueMissing у пустой темы. Затем заполните только обязательное поле и подтвердите, что комментарий действительно можно пропустить.

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

Связанные материалы

• Подпись поля
• Клавиатурная навигация
• Сетка Grid