Атрибут disabled

С помощью атрибута 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>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

• <button>;
• <fieldset>;
• <optgroup>;
• <option>;
• <select>;
• <textarea>;
• <input>.

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

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

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

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

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

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