Problem Statement
What's the difference between readonly and disabled attributes?
Explanation
The readonly and disabled attributes both prevent users from editing form inputs, but they have significant differences in behavior and purpose. Understanding these differences is important for creating functional forms. The readonly attribute prevents editing but keeps the field active and includes its value in form submission. Readonly fields appear normal and can receive focus. Users can click on them, tab to them, and select or copy the text. The cursor appears when focused, but typing has no effect. The value is sent to the server when the form submits. Readonly is typically used for displaying information that should not be changed but needs to be submitted, like auto-generated order numbers, user IDs from the database, calculated totals that update dynamically, or pre-filled data that should not be edited but must be sent to the server. Readonly fields remain part of the form and participate in validation. The disabled attribute completely removes the field from form functionality. Disabled fields appear grayed out and cannot receive focus. Users cannot click, tab to, or interact with them in any way. Most importantly, disabled field values are not sent to the server when the form submits. The field is effectively not part of the form at all. Disabled is used for fields that should not be editable or submitted, like temporarily disabling submit buttons until conditions are met, hiding irrelevant fields based on other selections, showing options that are not currently available, or preventing access to features based on permissions. Key differences include form submission, where readonly values are submitted but disabled values are not. Focus behavior varies, with readonly fields being focusable while disabled fields are not. Visual appearance shows readonly fields looking normal, while disabled fields appear grayed out. User interaction allows readonly fields to be selected and copied, while disabled fields cannot be interacted with. Validation applies to readonly fields but is skipped for disabled fields. Styling differs, with readonly using the readonly pseudo-class and disabled using the disabled pseudo-class. Use cases are distinct, with readonly for data that should not change but must be submitted, and disabled for fields that should not exist in the current context. Practical examples include order forms where the order ID is readonly because it should not be changed but must be submitted for processing. A shipping address might be disabled if users check same as billing, removing it from submission entirely. An account balance display might be readonly to show the current balance without allowing changes, while submitting it for verification. Best practices include using readonly when the field value must be sent to the server. Use disabled when the field should not be part of the submission. Consider using hidden inputs instead of readonly for values that do not need to be visible. For better accessibility, ensure readonly and disabled fields are clearly distinguishable. Use JavaScript to conditionally enable or disable fields based on user actions. Always validate on the server regardless of readonly or disabled status on the client. Understanding the distinction between readonly and disabled demonstrates knowledge of form behavior and data handling, topics commonly covered in technical interviews.
Code Solution
SolutionRead Only
<!-- READONLY EXAMPLES -->
<form action="/update" method="POST">
<!-- Readonly: Value IS submitted -->
<label for="orderid">Order ID:</label>
<input type="text"
id="orderid"
name="order_id"
value="ORD-12345"
readonly>
<!-- User can see and copy, but not edit -->
<!-- Value "ORD-12345" will be sent to server -->
<label for="email">Email:</label>
<input type="email"
id="email"
name="email"
value="john@example.com">
<!-- This CAN be edited -->
<button type="submit">Update</button>
</form>
<!-- DISABLED EXAMPLES -->
<form action="/submit" method="POST">
<!-- Disabled: Value is NOT submitted -->
<label for="inactive">Inactive Field:</label>
<input type="text"
id="inactive"
name="inactive_field"
value="This will NOT be sent"
disabled>
<!-- Field appears grayed out -->
<!-- Value will NOT be sent to server -->
<label for="name">Name:</label>
<input type="text"
id="name"
name="name"
value="John Doe">
<!-- This will be sent -->
<button type="submit">Submit</button>
</form>
<!-- Server only receives name=John Doe -->
<!-- inactive_field is completely ignored -->
<!-- PRACTICAL COMPARISON -->
<form action="/checkout" method="POST">
<!-- Readonly subtotal (calculated, needs to submit) -->
<label for="subtotal">Subtotal:</label>
<input type="text"
id="subtotal"
name="subtotal"
value="$100.00"
readonly>
<!-- Readonly: shown and submitted -->
<!-- Disabled shipping (not needed if same as billing) -->
<label>
<input type="checkbox"
id="same-address"
onchange="toggleShipping()">
Shipping same as billing
</label>
<input type="text"
id="shipping"
name="shipping_address"
placeholder="Shipping Address"
disabled>
<!-- Disabled: completely removed from submission -->
<button type="submit">Complete Purchase</button>
</form>
<!-- CONDITIONAL ENABLING -->
<form>
<label>
<input type="radio"
name="account_type"
value="personal"
checked
onchange="updateFields()">
Personal
</label>
<label>
<input type="radio"
name="account_type"
value="business"
onchange="updateFields()">
Business
</label>
<!-- Disabled when Personal is selected -->
<input type="text"
id="company"
name="company_name"
placeholder="Company Name"
disabled>
<!-- Always readonly -->
<input type="text"
name="user_id"
value="USR-789"
readonly>
</form>Practice Sets
This question appears in the following practice sets: