disabled: неактивный элемент и данные формы

Назначение

Атрибут disabled отключает поддерживаемый элемент формы, например кнопку или поле, когда действие временно недоступно.

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

Отключённое поле обычно не участвует в последовательном фокусе и не включается в набор отправляемых данных формы. В отличие от readonly это влияет не только на возможность редактирования.

Пример

<p id="reason">Отправка станет доступна после подключения обработчика.</p>
<input name="code" value="DEMO" disabled aria-label="Демонстрационный код">
<button type="button" disabled aria-describedby="reason">Отправить</button>

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

Оба элемента неактивны, но объяснение остаётся обычным доступным текстом. Значение отключённого поля не следует ожидать в результате штатной отправки формы.

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

Не отключайте единственный элемент, объясняющий причину недоступности. Сообщение должно быть видимым рядом; aria-disabled само по себе не воспроизводит нативное поведение disabled.

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

Снимите disabled у поля и кнопки. Проверьте изменение порядка Tab, а в локальном проекте сравните набор FormData до и после включения поля.

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

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

• Формы HTML
• Элемент input
• Проверка с клавиатуры