Клавиша / esc

Атрибут disabled

Если у элемента формы есть этот атрибут, то с ним нельзя взаимодействовать.

Время чтения: меньше 5 мин

Кратко

Скопировано

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

Пример

Скопировано

В примере атрибут задан для целой группы элементов. В итоге ни с одним из полей внутри отключённого <fieldset> нельзя взаимодействовать:

        
          
          <fieldset disabled>  <label>    Имя:    <input type="text">  </label>  <label>    Телефон:    <input type="tel">  </label></fieldset>
          <fieldset disabled>
  <label>
    Имя:
    <input type="text">
  </label>
  <label>
    Телефон:
    <input type="tel">
  </label>
</fieldset>

        
        
          
        
      

Как пишется

Скопировано

Это булевый атрибут. Само его наличие говорит браузеру, что элемент нужно отключить.

Может применяться к следующим элементам формы:

Открыть демо в новой вкладке

Доступность

Скопировано

В ARIA есть атрибут aria-disabled. Он тоже указывает на то, что элемент нельзя изменить или взаимодействовать с ним другим способом.

Старайтесь использовать disabled. aria-disabled поможет в сложных ситуациях, когда создаёте кастомные элементы.

Как понять

Скопировано

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

Атрибут срабатывает не только на самом элементе, но и на всех его потомках.

Наличие атрибута disabled отключает влияние атрибутов required и pattern. Потому что значение неактивного поля не может быть изменено браузер экономит время на их проверке.

Подсказки

Скопировано

💡 Элемент с атрибутом disabled можно стилизовать при помощи псевдокласса :disabled. По умолчанию браузер делает их серыми и менее контрастными.