Практика: временно отключённая группа полей

Назначение

Группа связанных полей может стать недоступной до выполнения предыдущего шага. Важно объяснить причину вне отключённой области и не рассчитывать только на серый цвет элементов.

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

Disabled у fieldset отключает поддерживаемые дочерние элементы управления. В примере объяснение расположено перед группой и связано через aria-describedby. Включение после реального события должно быть реализовано отдельно.

Пример

<p id="group-disabled-note">Размеры пока недоступны: сначала выберите изображение в своём редакторе.</p><fieldset disabled aria-describedby="group-disabled-note"><legend>Размер изображения</legend><label for="disabled-width">Ширина</label><input id="disabled-width" name="width" type="number" value="800"><label for="disabled-height">Высота</label><input id="disabled-height" name="height" type="number" value="450"></fieldset>
<style>fieldset{display:grid;gap:.5rem;max-width:24rem}input{font:inherit;padding:.5rem}</style>

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

Поля видны, но недоступны для обычного редактирования и не включаются в FormData как активные поля. Пояснение остаётся доступным обычным текстом страницы.

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

У содержимого первого legend есть исключение из наследуемого отключения; не помещайте туда случайные интерактивные действия. Не используйте disabled для хранения доверенных серверных значений. При повторном включении проверьте актуальность сохранённого ввода.

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

В учебной копии снимите disabled и пройдите поля клавиатурой. Сравните FormData до и после включения в составе формы. Убедитесь, что причина недоступности понятна даже без цветового оформления.

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

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

• Раскладка Grid
• Иллюстрация с подписью
• Клавиатурная проверка