Включённое состояние
Оригинальное название: enabled
Коротко
Обычное рабочее состояние элемента формы, в котором он принимает фокус и ввод, реагирует на нажатия и передаёт своё значение при отправке формы.
Что такое «Включённое состояние»
Почти все элементы на странице находятся в этом состоянии по умолчанию, и о нём вспоминают, только когда есть противоположность — отключённое состояние. В HTML понятие относится к элементам, которые вообще можно отключить: button, input, select, textarea, option, optgroup и fieldset. Ссылка или обычный div так не умеют, у них нет атрибута disabled.
Включённый элемент участвует во всём: на него можно перейти клавишей Tab, его значение попадает в данные при отправке формы, на нём срабатывают события клика и ввода. Отключённый пропускается при навигации с клавиатуры, а его значение на сервер не уходит.
Пример стилей с псевдоклассом :enabled
button:enabled:hover {
background: #1a7f37;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
input:enabled:focus-visible {
outline: 2px solid #0969da;
}
Псевдокласс :enabled выбирает только включённые элементы. Это позволяет не показывать эффект наведения на заблокированной кнопке: иначе она «подсвечивается» и обманывает ожидания.
Неочевидные случаи
- Отключённый fieldset. Атрибут
disabledнаfieldsetвыключает все поля внутри, даже если у них самих атрибута нет. Исключение — элементы в первойlegendгруппы. - Только для чтения. Поле с
readonlyостаётся включённым: оно получает фокус и отправляет значение, просто его нельзя изменить. Это разные вещи, и для поля, которое должно уйти на сервер, нужен именноreadonly. - aria-disabled. Атрибут
aria-disabled="true"только сообщает вспомогательным технологиям о недоступности. Для браузера элемент остаётся включённым: он кликается и фокусируется, поэтому действие нужно блокировать скриптом. Зато такую кнопку можно найти с клавиатуры и услышать подсказку, почему она недоступна.

