The Speed Coding

HTML <option> Tag


Example

A drop-down list with four options:

<label for="cars" > Choose a car:</label>

<select id="cars">
  <option value="volvo" > Volvo</option>
  <option value="saab" > Saab</option>
  <option value="opel" > Opel</option>
  <option value="audi" > Audi</option>
</select>

Definition and Usage

The <option> tag defines an option in a select list.

<option> elements go inside a <select>, <optgroup>, or <datalist> element.

Note: The <option> tag can be used without any attributes, but you usually need the value attribute, which indicates what is sent to the server on form submission.

Tip: If you have a long list of options, you can group related options within the <optgroup> tag. 


Browser Support

Element
<option> Yes Yes Yes Yes Yes

Attributes

Attribute Value Description
disabled disabled Specifies that an option should be disabled
label text Specifies a shorter label for an option
selected selected Specifies that an option should be pre-selected when the page loads
value text Specifies the value to be sent to a server

Global Attributes

The <option> tag also supports the Global Attributes in HTML.


Event Attributes

The <option> tag also supports the Event Attributes in HTML.


More Examples

Example

Use of <option> in a <datalist> element:

<label for="browser" > Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">

<datalist id="browsers" >
  <option value="Edge" >
  <option value="Firefox" >
  <option value="Chrome" >
  <option value="Opera" >
  <option value="Safari" >
</datalist>

Example

Use of <option> in <optgroup> elements:

<label for="cars" > Choose a car:</label>
<select id="cars">
  <optgroup label="Swedish Cars" >
    <option value="volvo" > Volvo</option>
    <option value="saab" > Saab</option>
  </optgroup>
  <optgroup label="German Cars" >
    <option value="mercedes" > Mercedes</option>
    <option value="audi" > Audi</option>
  </optgroup>
</select>

Related Pages

HTML DOM reference: Option Object


Default CSS Settings

None.