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
Edge Chrome Firefox Opera Safari
121112.11
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18412.1114.4

Last updated by CSSPortal on: 26th March 2024