HTML <option> Tag

The HTML <option> tag represents an option in a <select> element or as part of a list of suggestions in a <datalist> element.

The <option> tag can be used as a child of a <select>, <datalist>, and a <optgroup> element.

Syntax

The <option> tag is written as <option></option> with the element's content inserted between the start and end tags.

The value attribute is normally used to provide a value that can be referenced by any script that processes the form.

Like this:

Examples

Basic tag usage

Here, the <option> tag is used with a <select> tag to present a list of options that the user can choose from.

The selected Attribute

Here, we use the selected attribute to ensure that an option is the default selection (i.e. it is already selected as soon as the page loads).

In this case, we specify that Chiang Mai is the default selection.

Using the <optgroup> Element

Items within a <option> element can be sorted into logical groups. You can do this using the <optgroup> element.

Here, we group a list of cities by country.

Using the <datalist> Element

The <option> tag can be used with the <input> and <datalist> tags to provide a list of suggestions for the user. These aren't necessarily all available options, just a mere list of suggestions.

Try typing the letter "B" into the field below. Then try "H". Then try say, "M".

Your browser may also provide a means for seeing all available options. However, there's nothing to stop you from entering an option that's not on the list.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

The <option> element accepts the following attributes.

AttributeDescription
disabledDisables the input control. The button won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either disabled or disabled="disabled").

Possible values:

  • [Empty string]
  • disabled
labelSpecifies a label to be used as an alternative to the option item's contents. Useful if you'd prefer a shorter, more concise label.
selectedSpecifies that this option will be pre-selected when the user first loads the page.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either selected or selected="selected").

Possible values:

  • [Empty string]
  • selected
valueSpecifies the initial value of the option item.

Global Attributes

The following attributes are standard across all HTML elements. Therefore, you can use these attributes with the <option> tag , as well as with all other HTML tags.

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handlers

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.

For more detail, see HTML event handler content attributes.