HTML readonly Attribute

The HTML readonly attribute is a Boolean attribute that prevents users from changing the value of a supported form control. A read-only control can still be focused, selected, and submitted with a form.

Elements That Use the readonly Attribute

The readonly attribute is used with supported <input> controls and the <textarea> element.

Element	Description
`<input>`	Prevents the user from changing the value of supported input types.
`<textarea>`	Prevents the user from editing the text contained in the multiline control.

Boolean Attribute

The readonly attribute is a Boolean attribute. Its presence makes the supported form control read-only, so it does not need a value.

<input type="text" value="Account 1024" readonly>

For Boolean attributes, writing a value such as readonly="false" does not make the control editable. If the attribute is present, the read-only state is enabled. To make the control editable, omit the attribute.

Supported Input Types

The readonly attribute applies to the following <input> types:

Input Type	Input Type
`text`	`search`
`url`	`tel`
`email`	`password`
`date`	`month`
`week`	`time`
`datetime-local`	`number`

The attribute does not apply to input types such as hidden, range, color, checkbox, radio, file, submit, image, reset, or button.

How readonly Works

When readonly is present on a supported form control, the user cannot edit its value. The value can still be displayed, selected, copied, focused, and included when the form data is submitted.

<label for="account">Account Number:</label>
<input type="text" id="account" name="account" value="1024-A" readonly>

The attribute is useful when a form needs to display a value that should be submitted with the form but should not be changed by the user.

Read-Only Textarea

The same behavior can be applied to a multiline <textarea> control.

<textarea name="terms" rows="4" readonly>
This text can be read and selected, but it cannot be edited.
</textarea>

readonly vs disabled

The readonly and disabled attributes both restrict user interaction with form controls, but they behave differently.

Feature	`readonly`	`disabled`
User can edit the value	No	No
Can receive focus	Yes	No
Value submitted with form	Yes	No

Use readonly when the value should remain part of the form but should not be changed by the user. Use disabled when the control itself should be unavailable.

Form Validation

A form control with the readonly attribute is barred from constraint validation. Because the user cannot change its value, the browser does not validate the control using normal form validation constraints.

The required attribute must not be specified on an <input> element when readonly is also specified.

<input type="email" name="email" value="user@example.com" readonly>

The read-only value can still be submitted with the rest of the form data.

Common Mistakes

Do not use readonly="false" to make a control editable. Because readonly is a Boolean attribute, its presence enables the read-only state regardless of the text assigned to it.

Do not confuse readonly with disabled. A read-only control can still receive focus and its value is normally submitted with the form, while a disabled control does not participate in form submission.

Do not use readonly on unsupported controls such as checkboxes, radio buttons, file inputs, or buttons. The attribute does not provide a read-only state for those controls.

Do not combine readonly and required on an <input> element. Read-only controls are excluded from constraint validation.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The readonly attribute is widely supported on applicable <input> controls and the <textarea> element in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the readonly Attribute

The example contains an editable field and a read-only field. Try changing both values to see how the readonly attribute prevents the second field from being edited.

Play in Editor

Summary

The HTML readonly Boolean attribute prevents users from changing the value of supported <input> controls and <textarea> elements. Read-only controls can still receive focus and their values can be submitted with a form, but they are excluded from constraint validation.