What is the Readonly Attribute?
The readonly attribute is a Boolean HTML attribute that, when present, makes an element non-editable. When applied to form controls, it prevents users from modifying the element's value while still allowing interactions like selecting and copying text. Unlike completely removing input capability, readonly maintains the element's presence in the page.
According to the MDN Web Docs, the readonly attribute prevents user editing through typing, pasting, or keyboard shortcuts while still allowing text selection and copying.
Key characteristics:
- Prevents user editing through typing, pasting, or keyboard shortcuts
- Allows text selection and copying
- Element remains focusable via keyboard navigation
- Value is included in form submission
- Supported on input types: text, search, tel, url, email, password, date, month, week, time, datetime-local, number
- Also supported on textarea elements
When building interactive web applications with our web development services, readonly fields provide essential functionality for displaying pre-populated data, calculated values, and confirmation information. Proper implementation of readonly attributes contributes to better form accessibility and improved user experience across your applications.
| Element/Type | Supports Readonly | Notes |
|---|---|---|
| <input type="text"> | Yes | Standard text input |
| <input type="email"> | Yes | Email validation still applies |
| <input type="date"> | Yes | Date picker disabled |
| <input type="number"> | Yes | Spinner controls disabled |
| <input type="password"> | Yes | Masked characters shown |
| <textarea> | Yes | Scrollable, selectable |
| <select> | No | Use disabled instead |
| <input type="checkbox"> | No | Use disabled instead |
| <input type="radio"> | No | Use disabled instead |
1<!-- Different ways to specify readonly (all equivalent) -->2<input type="text" value="Example" readonly>3<input type="text" value="Example" readonly="readonly">4<input type="text" value="Example" readonly="">5 6<!-- Readonly textarea -->7<textarea readonly>This content is read-only.</textarea>8 9<!-- Readonly with other attributes -->10<input type="email" name="email" value="[email protected]" readonly required>Understanding the distinction is crucial for proper form behavior
User Can Focus
Readonly: Yes | Disabled: No - Readonly elements can receive keyboard focus, disabled cannot
Text Selection
Readonly: Yes | Disabled: No - Users can select and copy text in readonly fields
Form Submission
Readonly: Yes | Disabled: No - Only readonly values are submitted with the form
Tab Navigation
Readonly: Included | Disabled: Skipped - Readonly fields are in tab order, disabled are not
Default Styling
Readonly: Normal | Disabled: Grayed out - Browsers visually distinguish disabled elements
Screen Readers
Readonly: Announced | Disabled: Skipped - Accessibility behavior differs significantly
1<!-- Readonly: Can focus, select, submits value -->2<input type="text" value="Readonly value" readonly>3 4<!-- Disabled: Cannot focus, cannot select, does NOT submit -->5<input type="text" value="Disabled value" disabled>6 7<!-- When to use each -->8<!-- Use readonly for: pre-populated fields, calculated values, data that must be submitted -->9<!-- Use disabled for: conditional fields, unavailable features, fields that should not be submitted -->JavaScript Manipulation
JavaScript provides multiple approaches to control the readonly property of form elements. Understanding these techniques is essential for building dynamic interfaces where input states change based on user interactions or application logic.
The DOM property readOnly (camelCase) is the recommended approach for manipulation, as it provides cleaner syntax and better performance than attribute-based methods. For more complex form interactions, our advanced JavaScript resources cover object manipulation patterns that complement these techniques.
1// Setting readonly using property (recommended)2element.readOnly = true;3 4// Removing readonly5element.readOnly = false;6 7// Using setAttribute8element.setAttribute('readonly', '');9 10// Using removeAttribute11element.removeAttribute('readonly');12 13// Checking readonly status14if (element.readOnly) {15 console.log('Element is readonly');16}17 18// Dynamic example: Toggle based on checkbox19document.getElementById('agreeCheckbox').addEventListener('change', function() {20 document.getElementById('termsTextarea').readOnly = !this.checked;21});CSS Styling for Readonly Elements
The CSS :read-only pseudo-class allows you to target elements that cannot be edited by the user. This selector works for both <input> elements and <textarea> elements with the readonly attribute set. Combined with our CSS techniques guide, you can create visually distinct readonly states that improve user interface clarity.
For additional styling techniques, explore our resources on CSS editors to learn about professional development environments that enhance your styling workflow.
1/* Style readonly inputs */2input:read-only,3textarea:read-only {4 background-color: #f5f5f5;5 border: 1px solid #ddd;6 color: #666;7 cursor: not-allowed;8 opacity: 0.8;9}10 11/* Focus state for readonly */12input:read-only:focus {13 outline: 2px solid #ccc;14 outline-offset: 2px;15}16 17/* Editable fields (contrast) */18input:read-write {19 background-color: #fff;20 border: 1px solid #007bff;21 cursor: text;22}Pre-populated User Profiles
Display user ID, account creation date, or system-generated information that users can view but shouldn't modify.
Calculated Values
Show subtotals, taxes, and grand totals that are automatically calculated based on user inputs.
Terms and Conditions
Display legal text that users can read and copy, but cannot modify before acceptance.
Confirmation Pages
Review submitted data before final submission, ensuring accuracy without allowing changes.
Order Summaries
Display order details, shipping information, and totals that are final and should not be altered.
Generated Identifiers
Show system-generated IDs, reference numbers, or tracking codes that are set automatically.
1<form id="orderForm">2 <!-- Editable fields -->3 <label for="quantity">Quantity:</label>4 <input type="number" id="quantity" name="quantity" min="1" value="5">5 6 <label for="unitPrice">Unit Price:</label>7 <input type="number" id="unitPrice" name="unitPrice" min="0" step="0.01" value="29.99">8 9 <!-- Readonly calculated fields -->10 <label for="subtotal">Subtotal:</label>11 <input type="number" id="subtotal" name="subtotal" readonly>12 13 <label for="tax">Tax (8%):</label>14 <input type="number" id="tax" name="tax" readonly>15 16 <label for="total">Total:</label>17 <input type="number" id="total" name="total" readonly>18</form>19 20<script>21function calculateTotals() {22 const quantity = parseFloat(document.getElementById('quantity').value) || 0;23 const unitPrice = parseFloat(document.getElementById('unitPrice').value) || 0;24 const subtotal = quantity * unitPrice;25 const tax = subtotal * 0.08;26 const total = subtotal + tax;27 28 document.getElementById('subtotal').value = subtotal.toFixed(2);29 document.getElementById('tax').value = tax.toFixed(2);30 document.getElementById('total').value = total.toFixed(2);31}32 33// Calculate on page load and input changes34document.addEventListener('DOMContentLoaded', calculateTotals);35document.getElementById('quantity').addEventListener('input', calculateTotals);36document.getElementById('unitPrice').addEventListener('input', calculateTotals);37</script>Accessibility Considerations
Screen Reader Behavior
Readonly elements are announced by screen readers, informing users that the field is not editable. This is an important distinction from disabled elements, which are typically skipped entirely by assistive technologies. According to LinkedIn's analysis of disabled vs readonly attributes, this difference in accessibility behavior is crucial for building inclusive forms.
ARIA Attributes
For enhanced accessibility, use aria-readonly="true" to explicitly indicate the readonly state:
<input type="text" value="Read-only value" readonly aria-readonly="true">
Best Practices
- Always include labels for readonly fields (even if they're visually obvious)
- Use
aria-describedbyto provide additional context about why a field is readonly - Consider adding visual indicators that clearly communicate the readonly state
- Test forms with screen readers to ensure proper announcements
Our accessibility consulting services can help ensure your forms meet WCAG guidelines and provide excellent experiences for all users.