HTML <option> Attributes

HTML <option> disabled Attribute

A drop-down list with one disabled option:

<select>
<option value=”volvo” disabled>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”vw”>VW</option>
<option value=”audi”>Audi</option>
</select>

Try it Yourself »


Definition and Usage

The disabled attribute is a boolean attribute.

When present, it specifies that an option should be disabled.

A disabled option is unusable and un-clickable.

The disabled attribute can be set to keep a user from selecting the option until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript is required to remove the disabled value, and make the option selectable.

HTML <option> label Attribute

Use of the label attribute in <option> elements:

<select>
<option label=”Volvo”>Volvo (Latin for “I roll”)</option>
<option label=”Saab”>Saab (Swedish Aeroplane AB)</option>
<option label=”Mercedes”>Mercedes (Mercedes-Benz)</option>
<option label=”Audi”>Audi (Auto Union Deutschland Ingolstadt)</option>
</select>

Try it Yourself »


Definition and Usage

The label attribute specifies a shorter version of an option.

The shorter version will be displayed in the drop-down list.

HTML <option> value Attribute

A drop-down list inside an HTML form:

<form action=”/action_page.php”>
<select name=”cars”>
<option value=”volvo”>Volvo XC90</option>
<option value=”saab”>Saab 95</option>
<option value=”mercedes”>Mercedes SLK</option>
<option value=”audi”>Audi TT</option>
</select>
<input type=”submit” value=”Submit”>
</form>

Try it Yourself »


Definition and Usage

The value attribute specifies the value to be sent to a server when a form is submitted.

The content between the opening <option> and closing </option> tags is what the browsers will display in a drop-down list. However, the value of the value attribute is what will be sent to the server when a form is submitted.

Note: If the value attribute is not specified, the content will be passed as a value instead.

HTML <option> selected Attribute

A drop-down list with a pre-selected option:

<select>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”vw”>VW</option>
<option value=”audi” selected>Audi</option>
</select>

Try it Yourself »


Definition and Usage

The selected attribute is a boolean attribute.

When present, it specifies that an option should be pre-selected when the page loads.

The pre-selected option will be displayed first in the drop-down list.

Tip: The selected attribute can also be set after the page loads, with a JavaScript.