Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to specify that the element is read-only in HTML?
In HTML, the readonly attribute specifies that an input field or textarea element cannot be edited by the user. The element displays its value but does not accept user input, making it useful for displaying data that should not be modified while still allowing the value to be submitted with forms.
The readonly attribute is commonly used for form fields that contain calculated values, reference data, or information that should be visible but not editable. Unlike the disabled attribute, readonly elements can still receive focus and their values are included in form submissions.
Syntax
Following is the syntax for the readonly attribute −
<input type="text" readonly> <textarea readonly></textarea>
The readonly attribute can also be written with a value −
<input type="text" readonly="readonly"> <input type="text" readonly="true">
Applicable Elements
The readonly attribute can be used with the following HTML elements −
-
<input>elements of type text, password, email, url, tel, search, number, date, datetime-local, month, time, week -
<textarea>elements
Note − The readonly attribute does not work with input types like checkbox, radio, submit, button, or file.
Using readonly with Text Input
Example
Following example demonstrates the readonly attribute with text input fields −
<!DOCTYPE html>
<html>
<head>
<title>Readonly Text Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Information Form</h2>
<form action="/submit" method="post">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" value="john_doe" readonly><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" value="john@example.com"><br><br>
<label for="userid">User ID:</label><br>
<input type="text" id="userid" name="userid" value="12345" readonly><br><br>
<input type="submit" value="Update Profile">
</form>
</body>
</html>
In this form, the username and user ID fields are readonly, while the email field can be edited −
Username: john_doe (readonly, cannot be changed) Email: john@example.com (editable) User ID: 12345 (readonly, cannot be changed) [Update Profile]
Using readonly with Textarea
Example
Following example shows how to use the readonly attribute with textarea elements −
<!DOCTYPE html>
<html>
<head>
<title>Readonly Textarea</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Terms and Conditions</h2>
<form>
<textarea rows="6" cols="60" readonly>
Terms of Service:
1. You must be 18 years or older to use this service.
2. All content must comply with community guidelines.
3. Your account may be suspended for violations.
4. We reserve the right to modify these terms.
</textarea><br><br>
<label for="agreement">
<input type="checkbox" id="agreement" name="agreement">
I agree to the terms and conditions
</label><br><br>
<input type="submit" value="Accept">
</form>
</body>
</html>
The textarea displays the terms of service but users cannot modify the text. They can only check the agreement checkbox.
JavaScript Interaction with readonly Elements
Example
Following example demonstrates how JavaScript can interact with readonly elements −
<!DOCTYPE html>
<html>
<head>
<title>JavaScript with readonly</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Order Calculator</h2>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" value="1" onchange="calculateTotal()"><br><br>
<label for="price">Unit Price:</label>
<input type="text" id="price" value="$25.00" readonly><br><br>
<label for="total">Total:</label>
<input type="text" id="total" value="$25.00" readonly><br><br>
<button onclick="toggleReadonly()">Toggle Price Editing</button>
<script>
function calculateTotal() {
var quantity = document.getElementById("quantity").value;
var total = quantity * 25;
document.getElementById("total").value = "$" + total.toFixed(2);
}
function toggleReadonly() {
var priceField = document.getElementById("price");
priceField.readOnly = !priceField.readOnly;
}
</script>
</body>
</html>
This example shows a calculated total field that updates automatically, and demonstrates how JavaScript can toggle the readonly state of elements.
Common Use Cases
The readonly attribute is commonly used in the following scenarios −
-
Calculated fields − Total amounts, taxes, or other computed values in forms
-
Reference data − User IDs, order numbers, or timestamps that should not be modified
-
Terms and conditions − Legal text that must be displayed but not edited
-
System-generated values − Data populated by the system that users should see but not change
-
Confirmation displays − Showing user selections or calculated results before final submission
CSS Styling for readonly Elements
Example
Following example shows how to style readonly elements differently −
<!DOCTYPE html>
<html>
<head>
<title>Styling readonly Elements</title>
<style>
input[readonly] {
background-color: #f5f5f5;
border: 2px solid #ddd;
color: #666;
}
textarea[readonly] {
background-color: #f9f9f9;
border: 1px solid #ccc;
resize: none;
}
.form-group {
margin-bottom: 15px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Styled readonly Fields</h2>
<form>
<div class="form-group">
<label>Editable Field:</label><br>
<input type="text" value="You can edit this">
</div>
<div class="form-group">
<label>readonly Field:</label><br>
<input type="text" value="You cannot edit this" readonly>
</div>
<div class="form-group">
<label>readonly Textarea:</label><br>
<textarea readonly>This textarea is read-only with custom styling.</textarea>
</div>
</form>
</body>
</html>
The readonly elements are styled with a gray background and border to visually indicate they cannot be edited.
Conclusion
The readonly attribute in HTML makes form elements non-editable while keeping them focusable and including their values in form submissions. It is ideal for displaying calculated values, reference data, or system-generated information that users should see but not modify. Unlike disabled elements, readonly elements maintain their visual appearance and remain part of the form submission process.
269 Views
