Атрибут disabled

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

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

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"

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

        
          
          <fieldset disabled>  <label>    Ваше имя    <input type="text">  </label>  <label>    Ваш номер телефона    <input type="text">  </label></fieldset>
          <fieldset disabled>
  <label>
    Ваше имя
    <input type="text">
  </label>
  <label>
    Ваш номер телефона
    <input type="text">
  </label>
</fieldset>

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

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

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

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

Как понять

Секция статьи "Как понять"

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

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

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

Подсказки

Секция статьи "Подсказки"

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