HTML readonly Attribute
Description
The HTML readonly
attribute is a boolean attribute used in form input elements to prevent modification of the element's value by the user. When applied, it makes the field non-editable, meaning the content displayed in the input field cannot be changed directly through the user interface. However, users can still select and copy the text from a readonly field, and the field's value will be sent when the form is submitted. This attribute is particularly useful for displaying pre-populated values that should not be altered by the user, such as a confirmation number or a fixed amount in a payment form.
It's important to note that readonly
can be applied to various types of input elements, including text
, date
, datetime-local
, email
, month
, number
, password
, search
, tel
, textarea
, time
, url
, and week
. Unlike the disabled
attribute, which also prevents user interaction, readonly fields remain focusable and can receive focus, which means they are still accessible to keyboard users and screen readers. Additionally, while disabled
fields are not included in the form submission, readonly
fields are included, allowing their values to be collected and processed on the server side.
Syntax
<input readonly>
Values
The readonly
attribute is a boolean attribute, therefore no values are associated with this attribute.
Applies To
The readonly
attribute can be used on the following html elements.
Example
<form>
<label for="fname">Full Name:</label>
<input type="text" id="fname" name="fname" value="John Doe" readonly>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" value="johndoe@example.com" readonly>
</form>
Browser Support
The following table will show you the current browser support for the HTML readonly
Attribute.
Desktop | |||||
12 | 1 | 1 | 12.1 | 1 |
Tablets / Mobile | |||||
18 | 4 | 12.1 | 1 | 1 | 4.4 |
Last updated by CSSPortal on: 26th March 2024