The readOnly property in HTML is used to specify that an input field is read-only. A read-only field cannot be modified; however, a user can still highlight and copy the text from it. This property is useful when you want to display information to the user that they should not be able to change directly, but still be able to select and copy.
Definition and Usage
The readOnly attribute is a boolean attribute. When present, it specifies that the input field is read-only.
Syntax
The readOnly attribute can be used in the following way:
<input type="text" readOnly />
or
<input type="text" readOnly="true" />
| Attribute | Value | Description |
|---|---|---|
| `readOnly` | `readOnly`, `true`, `false` | Specifies whether the text field is read-only. When set to `readOnly` or `true`, the text field cannot be edited. When omitted or set to `false`, the text field can be edited. |
Examples
Basic Usage
The most basic use of the readOnly property is to prevent users from modifying the content of a text input field.
<form>
<label for="readOnlyInput">Read-Only Input:</label>
<input type="text" id="readOnlyInput" value="This is read-only" readOnly />
</form>
<form>
<label for="readOnlyInput_out">Read-Only Input:</label>
<input type="text" id="readOnlyInput_out" value="This is read-only" readOnly />
</form>
In this example, the text input field contains the text “This is read-only,” and users cannot change this text.
Setting readOnly with JavaScript
You can dynamically set the readOnly property using JavaScript. This is particularly useful when you want to toggle the read-only state based on certain conditions.
<form>
<label for="dynamicReadOnlyInput">Dynamic Read-Only Input:</label>
<input type="text" id="dynamicReadOnlyInput" value="Editable initially" />
<button type="button" onclick="toggleReadOnly()">Toggle Read-Only</button>
</form>
<script>
function toggleReadOnly() {
const inputField_toogle = document.getElementById("dynamicReadOnlyInput");
inputField_toogle.readOnly = !inputField_toogle.readOnly;
}
</script>
<form>
<label for="dynamicReadOnlyInput_out">Dynamic Read-Only Input:</label>
<input type="text" id="dynamicReadOnlyInput_out" value="Editable initially" />
<button type="button" onclick="toggleReadOnly_out()">Toggle Read-Only</button>
</form>
<script>
function toggleReadOnly_out() {
const inputField_toogle_out = document.getElementById("dynamicReadOnlyInput_out");
inputField_toogle_out.readOnly = !inputField_toogle_out.readOnly;
}
</script>
Clicking the button will toggle the readOnly state of the input field.
Styling a readOnly Input Field
You can use CSS to style readOnly input fields to visually indicate their state. For example, you might want to change the background color or cursor.
<style>
input[readOnly] {
background-color: #eee;
cursor: not-allowed;
}
</style>
<form>
<label for="styledReadOnlyInput">Styled Read-Only Input:</label>
<input
type="text"
id="styledReadOnlyInput"
value="This is styled read-only"
readOnly
/>
</form>
<style>
input[readOnly] {
background-color: #eee;
cursor: not-allowed;
}
</style>
<form>
<label for="styledReadOnlyInput_out">Styled Read-Only Input:</label>
<input
type="text"
id="styledReadOnlyInput_out"
value="This is styled read-only"
readOnly
/>
</form>
This CSS will change the background color of the readOnly input field to light gray and change the cursor to not-allowed.
Real-World Example: Displaying User Information
A common use case for the readOnly property is displaying user information in a profile form, where certain fields should not be directly editable by the user.
<form>
<label for="username">Username:</label>
<input type="text" id="username" value="john_doe" readOnly /><br /><br />
<label for="email">Email:</label>
<input type="email" id="email" value="[email protected]" /><br /><br />
<label for="bio">Bio:</label>
<textarea id="bio">A web developer who loves coding.</textarea>
</form>
<form>
<label for="username_out">Username:</label>
<input type="text" id="username_out" value="john_doe" readOnly /><br /><br />
<label for="email_out">Email:</label>
<input type="email" id="email_out" value="[email protected]" /><br /><br />
<label for="bio_out">Bio:</label>
<textarea id="bio_out">A web developer who loves coding.</textarea>
</form>
In this example, the username is readOnly, while the email and bio fields are editable. 📝
Distinguishing readOnly from disabled
It’s important to distinguish between readOnly and disabled. A readOnly input field can still be focused, and its value is submitted with the form. A disabled input field, however, cannot be focused, and its value is not submitted with the form.
<form>
<label for="readOnlyField">Read-Only:</label>
<input
type="text"
id="readOnlyField"
value="This is read-only"
readOnly
/><br /><br />
<label for="disabledField">Disabled:</label>
<input
type="text"
id="disabledField"
value="This is disabled"
disabled
/>
</form>
<form>
<label for="readOnlyField_out">Read-Only:</label>
<input
type="text"
id="readOnlyField_out"
value="This is read-only"
readOnly
/><br /><br />
<label for="disabledField_out">Disabled:</label>
<input
type="text"
id="disabledField_out"
value="This is disabled"
disabled
/>
</form>
- readOnly: The user can still select and copy the text, and the value will be submitted with the form.
- disabled: The user cannot interact with the field at all, and the value will not be submitted. 🚫
Tips and Considerations
- Accessibility: Ensure that
readOnlyfields are clearly indicated to users, especially those using assistive technologies. Use appropriate styling and labels. - Form Submission: Remember that
readOnlyfields are still submitted with the form, unlikedisabledfields. - JavaScript Interaction: You can dynamically control the
readOnlystate using JavaScript to create interactive forms.
Browser Support
The readOnly property is supported by all major browsers. 👍
Conclusion
The readOnly property is a useful tool for creating input fields that display information without allowing direct modification. By understanding its behavior and how it differs from the disabled property, you can create more effective and user-friendly forms.
