Attribute readonly

The readonly attribute is added to form fields that the user cannot edit. They will be read-only.

In this example, you cannot edit your birth date:

        
          
          <form>  <div class="group">    <input type="date" value="1995-04-04" readonly="readonly" id="date">    <label for="date">Birth date</label>  </div></form>
          <form>
  <div class="group">
    <input type="date" value="1995-04-04" readonly="readonly" id="date">
    <label for="date">Birth date</label>
  </div>
</form>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The readonly attribute is boolean; it can be added with the value: readonly="readonly", or without it — <input type="text" readonly>.

The readonly attribute can be used for <textarea> and <input> with the following types:

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

Not used:

• with the tag <select>;
• with any type of buttons (even if it is an image);
• if the field has the hidden attribute.

Also, for fields with the readonly attribute, the required attribute will not work.

There is a difference between disabled and readonly. Thus, fields that are read-only (readonly) can still receive focus and will be submitted along with the form, unlike inactive fields (disabled).

💡 A field with the readonly attribute can be styled using the pseudo-class :read-only, while fields without this attribute can be styled with :read-write.