HTML Readonly vs Disabled vs Inert in Forms

Imagine asking a friend for some information on a webpage. The field should explain exactly what you need.

What You Need to Know

Readonly allows focus and submission for supported fields. Disabled prevents interaction and submission. Inert suppresses interaction throughout a region.

Try the Example

Take a look at the example. We’ll explain the important lines right below it.

<section inert>
    <button type="button">Unavailable while loading</button>
</section>
<form action="/save" method="post">
    <label for="reference">Reference (submitted)</label>
    <input id="reference" name="reference" readonly value="R-99">
    <label for="display-note">Display-only note (not submitted)</label>
    <input id="display-note" name="display-note" disabled value="Not editable">
    <button type="submit">Continue</button>
</form>

Let’s Read the Code

for: For connects a label or output with a control by ID.
<section>: A section groups content with a shared topic.
<button>: The button offers an action; its type or command determines what happens.
inert: Inert prevents interaction and normal focus on a region.

Read the named elements and attributes together. They explain how the browser connects this feature to the rest of the page.

What Happens in the Browser?

The HTML controls work in the browser, but saving an answer requires the example action path to be handled by a real server.

Compare field states. A disabled control is normally omitted from submission. A supported readonly control can still be submitted, while an inert region prevents ordinary interaction. These attributes solve different problems, so choose them for their behavior rather than their appearance.

Your Turn

Open the Network panel, submit the form, and compare what arrives before and after adding disabled. Which values disappear?

Common Beginner Mistakes

Expecting a disabled form field to be included in the submitted values.
The three attributes do different jobs; do not treat them as interchangeable.

Key Takeaways

A control needs a clear label and, when submitted, a meaningful name and value.
for: For connects a label or output with a control by ID.
Remember that HTML form rules help the visitor, but server-side code must decide whether received data is valid.