Практика: общая инструкция для группы полей
Несколько связанных полей иногда требуют одной общей инструкции. Упражнение сочетает fieldset и legend с короткой подсказкой, доступной рядом с группой и связанной с полями.
Назначение
Несколько связанных полей иногда требуют одной общей инструкции. Упражнение сочетает fieldset и legend с короткой подсказкой, доступной рядом с группой и связанной с полями.
Как это работает
Legend называет группу, label — каждое отдельное поле. Общий текст имеет уникальный id; aria-describedby указывает на него у обоих полей. Такой вариант удобен для короткой подсказки, но длинный повтор при каждом фокусе нужно оценивать отдельно.
Пример
<fieldset><legend>Размер учебной иллюстрации</legend><p id="dimensions-help">Укажите целые значения в пикселях. Оба значения должны быть больше нуля.</p><label for="picture-width">Ширина</label><input id="picture-width" type="number" min="1" step="1" required aria-describedby="dimensions-help"><label for="picture-height">Высота</label><input id="picture-height" type="number" min="1" step="1" required aria-describedby="dimensions-help"></fieldset>
<style>fieldset{display:grid;gap:.6rem;max-width:30rem}input{font:inherit;padding:.5rem;min-width:0}</style>Что должно получиться
Группа имеет общее название, а каждое поле — собственную подпись и связь с инструкцией. Макет предназначен для проверки доступности, поэтому отправка данных и серверные имена полей здесь не реализованы.
Граница применения и частая ошибка
Один legend не заменяет подписи отдельных полей. Не связывайте каждое поле с большим абзацем нерелевантной помощи. Общая инструкция не должна быть единственным местом сообщения конкретной ошибки после проверки формы.
Самостоятельная проверка
Перейдите между полями клавиатурой и проверьте их доступные имена и описания. Для реальной формы добавьте осмысленные name и обработчик. Сравните удобство общей подсказки с двумя короткими индивидуальными пояснениями.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.