HTML attribute: readonly
The Booleanreadonly attribute, when present, makes the element not mutable, meaning the user can not edit the control.
Try it
<label for="firstName">First Name:</label><input name="firstName" type="text" value="Adam" /><label for="age">Age:</label><input name="age" type="number" value="42" readonly /><label for="hobbies">Hobbies:</label><textarea name="hobbies" readonly>Baseball</textarea>label { display: block; margin-top: 1em;}input:read-only,textarea:read-only { background-color: silver;}Overview
If thereadonly attribute is specified on an input element, because the user can not edit the input, the element does not participate in constraint validation.
Thereadonly attribute is supported by textual form controls, including:
<input>elements of type:<textarea>
The attribute is not relevant to all other elements, including<select> and<button>. It also does not apply to non-textual input elements, including:
Inputs that support thereadonly attribute but don't have the attribute set match the:read-write pseudo-class. All other elements match the:read-only pseudo-class.
Attribute interactions
The difference betweendisabled andreadonly is that read-only controls can still function and are still focusable, whereas disabled controls can not receive focus and are not submitted with the form and generally do not function as controls until they are enabled.
Because a read-only field cannot have its value changed by a user interaction,required does not have any effect on inputs with thereadonly attribute also specified.
The only way to modify dynamically the value of the readonly attribute is through a script.
Note:Therequired attribute is not permitted on inputs with thereadonly attribute specified.
Usability
Browsers display thereadonly attribute.
Constraint validation
If the element is read-only, then the element's value can not be updated by the user, and does not participate in constraint validation.
Example
HTML
<div> <input type="text" value="Some value" readonly="readonly" /> <label for="text">Text box</label></div><div> <input type="date" value="2020-01-01" readonly="readonly" /> <label for="date">Date</label></div><div> <input type="email" value="Some value" readonly="readonly" /> <label for="email">Email</label></div><div> <input type="password" value="Some value" readonly="readonly" /> <label for="pwd">Password</label></div><div> <textarea readonly="readonly">Some value</textarea> <label for="ta">Message</label></div>Result
Specifications
| Specification |
|---|
| HTML # attr-input-readonly |
| HTML # attr-textarea-readonly |