HTML readonly Attribute

Introduction

The readonly attribute makes a form field non-editable while keeping it focusable and included in form submission. Use it to show values users should see but not change — like an order ID, account email on a profile page, or a pre-filled shipping address. Unlike disabled, readonly fields can be tabbed to, selected, and copied. Set element.readOnly = true in JavaScript (note camelCase). Readonly is not a security control — always validate on the server.

What You’ll Learn

Purpose of readonly Attribute

Forms often need to display data the user should not accidentally change — a username on a settings page, a reference number on a checkout form, or a calculated total. The readonly attribute prevents typing and editing while still showing the value clearly and sending it when the form submits.

Choose readonly over disabled when the value must reach the server. Choose disabled when the control should be completely inactive or excluded from submission.

📝 Syntax

Add readonly as a boolean attribute on supported inputs or textarea:

<label for="username">Username:</label>
<input type="text" id="username" name="username"
  value="jane_doe" readonly>

<label for="orderId">Order ID:</label>
<input type="text" id="orderId" name="orderId"
  value="ORD-1042" readonly="readonly">

<textarea id="notes" name="notes" readonly>Pre-filled note.</textarea>

Syntax Rules

• Boolean attribute — presence means true: readonly or readonly="readonly".
• Remove the attribute or set readOnly = false in JS to make the field editable again.
• Valid on text-like input types and textarea.
• Not valid on checkbox, radio, select, button, or file.
• JavaScript property is readOnly (camelCase), not readonly.
• Readonly fields are submitted; disabled fields are not.
• Users can focus, select, and copy readonly content.

💎 Values

The readonly attribute is a boolean — it has no meaningful string values:

• readonly — Field is read-only (most common).
• readonly="readonly" — XHTML-style equivalent.
• Attribute absent — Field is editable (default).
• element.readOnly = true / false — JavaScript toggle.

<!-- Boolean presence -->
<input type="email" value="user@example.com" readonly>

<!-- JavaScript -->
<script>
  input.readOnly = true;   // lock
  input.readOnly = false;  // unlock
</script>

Applicable Elements

readonly vs disabled vs value

Examples Gallery

Read-only form fields, toggling readOnly in JavaScript, and comparing submission behavior with disabled.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"
    value="jane_doe" readonly>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email"
    value="jane@example.com" readonly>

  <label for="comments">Notes:</label>
  <textarea id="comments" name="comments" readonly>Account created on Jan 2025.</textarea>

  <button type="submit">Save changes</button>
</form>

<input type="text" id="dynamicField" value="Editable until locked">
<button type="button" id="lockBtn">Lock field</button>

<script>
  document.getElementById("lockBtn").addEventListener("click", function () {
    document.getElementById("dynamicField").readOnly = true;
  });
</script>

<form id="demoForm">
  <input type="text" name="readonlyField" value="kept" readonly>
  <input type="text" name="disabledField" value="dropped" disabled>
  <button type="submit">Submit</button>
</form>

♿ Accessibility

• Screen readers — Readonly fields are announced as read-only. Users can still navigate to them with Tab.
• Visual distinction — Browsers may style readonly fields differently; add helper text if the locked state is not obvious.
• Don’t use readonly for buttons — Use disabled on buttons and toggles instead.
• Labels still required — Associate every readonly field with a <label>.
• Explain why — Tell users why a field cannot be edited (e.g. “Contact support to change email”).

💡 Best Practices