Понятная форма: подписи, подсказки и ошибки

Задача и ограничения

Форма должна объяснять, что вводить, какие поля обязательны и как исправить ошибку. Placeholder не решает все эти задачи: он исчезает после ввода и не заменяет устойчивую подпись.

Пошаговое решение

У каждого поля создайте label с совпадающим id/for. Для подсказки используйте отдельный текст и свяжите его через aria-describedby. Required включает базовую браузерную проверку, но обязательность нужно обозначить и словами.

После серверной ошибки сохраните безопасно отображаемые введённые значения, покажите объяснение рядом с полем и при необходимости общий список ошибок. Признак aria-invalid добавляйте при фактической ошибке, а не всем пустым полям сразу. Отправка и обработка в нашей песочнице отключены.

Код компонента

<style>
form { max-width: 420px; display: grid; gap: 10px; }
input, textarea { box-sizing: border-box; width: 100%; padding: 10px; }
.hint { font-size: 14px; color: #53665a; margin: 0; }
</style>
<form action="/send/" method="post"><label for="email">Email — обязательно</label><input id="email" name="email" type="email" autocomplete="email" aria-describedby="email-help" required><p id="email-help" class="hint">Укажите адрес для ответа.</p><label for="question">Вопрос</label><textarea id="question" name="question" rows="3"></textarea><button type="submit">Отправить вопрос</button></form>

Что может пойти не так

Как проверить результат

1. Нажмите на подпись и проверьте переход фокуса.
2. Убедитесь, что подсказка остаётся видимой после ввода.
3. В собственном проекте проверьте ошибки обработчика и повторную отправку.

Разберите также: label, input, form.