Dofactory.com
Dofactory.com

HTML <option> Tag

Dropdown controls are created with a <select> tag.

The <option> tag adds a selectable option to the dropdown list.

When the control is submitted the value of the selected option is sent.

Example

#

A <select> dropdown control with 5 <option> items.

<select>
  <option value="">-- Select city -- </option>
  <option value="losangeles">Los Angeles</option>
  <option value="newyorkn">New York</option>
  <option value="houston">Houston</option>
  <option value="chicago">Chicago</option>
</select>

Using <option>

The <option> tag creates an option item inside <select>, <datalist>, or <optgroup> elements.

Options can be used with or without any attributes and value.

When submitting the control, the value of the selected option is sent.

More Examples

A <select> control with a list of cities. The Houston <option> is pre-selected and Chicage is disabled (unselectable).

<select>
  <option value="">-- Select city -- </option>
  <option value="losangeles">Los Angeles</option>
  <option value="newyork">New York</option>
  <option value="houston" selected>Houston</option>
  <option value="chicago" disabled>Chicago</option>
</select>

Attributes for <option>

This table lists the <option> tag attributes.

Attribute Value Description
label text The text that will display in the dropdown option.
value text Option value to be sent to a server.
selected selected Specifies whether the option is selected.
id   identifier Defines a unique identifier for the option.
class   classnames Sets one or more CSS classes to be applied to the option.
style   CSS-styles Sets the style for the option.
data-*   value Defines additional data that can be used by JavaScript.
hidden   hidden Specifies whether the option is hidden.
disabled disabled Specifies whether the option is disabled.

For additional global attributes see our global attributes list.


Did you know?

Did you know?

Styling the <option> tag with CSS

The appearance of <option> items can be changed with CSS.
Click the dropdown to see the styled options.

<style>
  option.styled {background:steelblue;color:white;}
</style>

<select>
  <option class="styled" value="">-- Select city -- </option>
  <option class="styled" value="losangeles">Los Angeles</option>
  <option class="styled" value="newyork">New York</option>
  <option class="styled" value="houston">Houston</option>
  <option class="styled" value="chicago">Chicago</option>
</select>

Browser support

Here is when <option> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like


Last updated on Sep 30, 2023




Guides