HTML 5 <option> Tag

The HTML <option> tag is used for defining option items within a list.

This element can be used in conjunction with the <select> or <datalist> elements.

Also see <optgroup> tag for grouping your option items.

Demo

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example, style="color:black;".

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

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 5 tags (although the tabindex attribute does not apply to dialog elements).

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

Event Handler Content Attributes

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.

For a full list of event handlers, see HTML 5 event handler content attributes.