Draft This page is not complete.
The Boolean readonly
attribute, when present, makes the element not mutable, meaning the user can not edit the control.readonly
The readonly
attribute is supported by text
, search
, url
, tel
, email
, password
, date
, month
, week
, time
, datetime-local
, and number
<input>
types and the <textarea>
form control elements. If present on any of these input types and elements, the :read-only
pseudo class will match. If the attribute is not included, the :read-write
pseudo class will match.
The attribute is not supported or relevant to <select>
or input types that are already not mutable, such as checkbox and radio or cannot, by definition, start with a value, such as the file input type. range and color, as both have default values. It is also not supported on hidden as it can not be expected that a user to fill out a form that is hidden. Nor is it supported on any of the button types, including image
.
Note: Only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the readonly
attribute does not apply.
When an input has the readonly
attribute, the :read-only
pseudo-class also applies to it. Conversely, inputs that support the readonly
attribute but don't have the attribute set match the :read-write
pseudo-class.
Attribute interactions
The difference between disabled
and readonly
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 it's value changed by a user interaction, required
does not have any effect on inputs with the readonly
attribute also specified.
The only way to modify dynamically the value of the readonly attribute is through a script.
Note: The required
attribute is not permitted on inputs with the readonly
attribute specified.
Usability
Browsers display the readonly
attribute...
Constraint validation
If the element is readonly, then the element's value can not be updated by the user, and does not participate in constraint validation.
Example
HTML
<div class="group">
<input type="textbox" value="Some value" readonly="readonly"/>
<label>Textbox</label>
</div>
<div class="group">
<input type="date" value="2020-01-01" readonly="readonly"/>
<label>Date</label>
</div>
<div class="group">
<input type="email" value="Some value" readonly="readonly"/>
<label>Email</label>
</div>
<div class="group">
<input type="password" value="Some value" readonly="readonly"/>
<label>Password</label>
</div>
<div class="group">
<textarea readonly="readonly">Some value</textarea>
<label>Message</label>
</div>
Result
Examples
<fieldset>
<legend>Checkboxes buttons</legend>
<p><label>
<input type="checkbox" name="chbox" value="regular"> Regular
</label></p>
<p><label>
<input type="checkbox" name="chbox" value="readonly" readonly> readonly
</label></p>
<p><label>
<input type="checkbox" name="chbox" value="disabled" disabled> disabled
</label></p>
</fieldset>
<fieldset>
<legend>Radio buttons</legend>
<p><label>
<input type="radio" name="radio" value="regular"> Regular
</label></p>
<p><label>
<input type="radio" name="radio" value="readonly" readonly> readonly
</label></p>
<p><label>
<input type="radio" name="radio" value="disabled" disabled> disabled
</label></p>
</fieldset>
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living StandardThe definition of 'readonly attribute' in that specification. | Living Standard | |
HTML5The definition of 'readonly attribute' in that specification. | Recommendation | |
HTML 5.1The definition of 'readonly attribute' in that specification. | Recommendation |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
No compatibility data found. Please contribute data for "html.elements.attributes.readonly" (depth: 1) to the MDN compatibility data repository.
See also
HTML attribute: readonly by Mozilla Contributors is licensed under CC-BY-SA 2.5.