HTML <option> disabled and value Attributes

A form should feel easy to use. The visitor sees a question, gives an answer, and needs to know what will happen next.

What You Need to Know

Each option has a submitted value; disabled prevents people from choosing the unavailable CSS item.

In this example: offer a disabled placeholder option.

Try the Example

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

<label for="topic">Choose a topic</label>
<select id="topic" name="topic">
    <option value="">Please choose</option>
    <option value="html">HTML</option>
    <option value="css" disabled>CSS (coming soon)</option>
    <option value="js">JavaScript</option>
</select>

Let’s Read the Code

value: The value is the actual data associated with a control or choice.
<label>: The label tells people what the input is for. A matching for/id pair makes the label clickable.
<select>: The select lets someone choose an item from a list.
for: For connects a label or output with a control by ID.

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.
Disabled options are not selectable, so they must not be the only way to explain a required choice.

Key Takeaways

With <option> disabled and value Attributes, the main idea is to match the HTML to the visitor’s task, not just to copy an unfamiliar attribute.
value: The value is the actual data associated with a control or choice.
Test the behavior you expect rather than trusting how the snippet looks in your editor.