Thanks to visit codestin.com
Credit goes to www.cssportal.com

CSS Portal

HTML readonly Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

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

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="[email protected]" readonly>
</form>

Browser Support

The following information will show you the current browser support for the HTML readonly attribute. Hover over a browser icon to see the version that first introduced support for this HTML attribute.

This attribute is supported by all modern browsers.
Desktop
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 26th March 2024

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!