Включённое состояние

Оригинальное название: 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" только сообщает вспомогательным технологиям о недоступности. Для браузера элемент остаётся включённым: он кликается и фокусируется, поэтому действие нужно блокировать скриптом. Зато такую кнопку можно найти с клавиатуры и услышать подсказку, почему она недоступна.

Обновлено:

Все термины раздела «Frontend»

Что будем искать? Например,Продвижение