Практика: дополнительная подсказка к полю через details
Длинное объяснение формата можно вынести в раскрывающийся блок, сохранив краткую обязательную инструкцию рядом с полем. Так пользователь понимает минимум требований без дополнительных действий.
Назначение
Длинное объяснение формата можно вынести в раскрывающийся блок, сохранив краткую обязательную инструкцию рядом с полем. Так пользователь понимает минимум требований без дополнительных действий.
Как это работает
Свяжите поле с короткой подсказкой через aria-describedby. Details разместите рядом и назовите summary конкретным вопросом. Внутри оставьте только дополнительные примеры, а не единственное описание обязательного ограничения.
Пример
<label for="sample-name">Имя учебного файла</label>
<input id="sample-name" name="filename" aria-describedby="sample-hint">
<p id="sample-hint">Укажите имя HTML-файла, например lesson.html.</p>
<details><summary>Как выбрать понятное имя файла?</summary><p>Используйте короткое название темы. В учебном проекте удобно избегать пробелов и придерживаться одного регистра: grid-lesson.html.</p></details>Что должно получиться
Краткое требование видно постоянно, развёрнутый совет открывается по запросу. Поле имеет отдельную подпись и описание. Пример не проверяет существование файла и ничего не отправляет.
Граница применения и частая ошибка
Не связывайте поле только со скрытым длинным текстом в надежде, что все программы озвучат его одинаково. Раскрытие не должно перехватывать введённое значение или сбрасывать форму. Совет об имени не заменяет проверку пути на сервере.
Самостоятельная проверка
Пройдите от поля к summary клавиатурой и вернитесь назад. Убедитесь, что введённый текст не потерялся. Затем закройте блок и проверьте, достаточно ли видимой инструкции для успешного выполнения задания.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.