Атрибут readonly

Атрибут readonly добавляется полям формы, которые пользователь не сможет редактировать. Они будут доступны только для чтения.

В данном примере нельзя отредактировать дату своего рождения:

        
          
          <form>  <div class="group">    <input type="date" value="1995-04-04" readonly="readonly" id="date">    <label for="date">Дата рождения</label>  </div></form>
          <form>
  <div class="group">
    <input type="date" value="1995-04-04" readonly="readonly" id="date">
    <label for="date">Дата рождения</label>
  </div>
</form>

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

Атрибут readonly булевый, его можно добавить со значением: readonly="readonly", или без него — <input type="text" readonly>.

Атрибут readonly можно использовать для <textarea> и <input> со следующими типами:

• text,
• search,
• url,
• tel,
• email,
• password,
• date,
• month,
• week,
• time,
• datetime-local,
• number.

Не используется:

• с тегом <select>;
• с любым типом кнопок (даже если это изображение);
• если у поля есть атрибут hidden.

Также для полей с атрибутом readonly не сработает атрибут required.

Есть разница между disabled и readonly. Так, поля, доступные только для чтения (readonly), по-прежнему могут получать фокус и будут отправляться вместе с формой в отличие от неактивных полей (disabled).

💡 Поле с атрибутом readonly можно стилизовать при помощи псевдокласса :read-only, а поля без этого атрибута - :read-write.