Summary
In a Web form, the HTML <option>
element is used to create a control representing an item within a {{HTMLElement("select")}}, an {{HTMLElement("optgroup")}} or a {{HTMLElement("datalist")}} HTML5 element.
- Content categories None.
- Permitted content Text with eventually escaped characters (like
é
). - Tag omission The start tag is mandatory. The end tag is optional if this element is immediately followed by another
<option>
element or an {{HTMLElement("optgroup")}}, or if the parent element has no more content. - Permitted parent elements A {{HTMLElement("select")}}, an {{HTMLElement("optgroup")}} or a {{HTMLElement("datalist")}} element.
- DOM interface {{domxref("HTMLOptionElement")}}
Attributes
This element includes the global attributes.
- {{htmlattrdef("disabled")}}
- If this Boolean attribute is set, this option is not checkable. Often browsers grey out such control and it won't receive any browsing event, like mouse clicks or focus-related ones. If this attribute is not set, the element can still be disabled if one its ancestors is a disabled {{HTMLElement("optgroup")}} element.
- {{htmlattrdef("label")}}
-
This attribute is text for the label indicating the meaning of the option. If the
label
attribute isn't defined, its value is that of the element text content.
Usage note: thelabel
attribute is designed to contain a short label typically used in a hierarchical menu. Thevalue
attribute describes a longer label designed to be used near a radio button, for example. - {{htmlattrdef("selected")}}
-
If present, this Boolean attribute indicates that the option is initially selected. If the
<option>
element is the descendant of a{{HTMLElement("select")}} element whose {{htmlattrxref("multiple", "select")}} attribute is not set, only one single<option>
of this {{HTMLElement("select")}} element may have the selected attribute. - {{htmlattrdef("value")}}
-
The textual content of this attribute represents the label explaining the option. If it is not defined, its default value is the text content of the element.
Usage note: the
label
attribute is designed to contain a short label typically used in a hierarchical menu. Thevalue
attribute describes a longer label designed to be used near a radio button, for example.
Examples
See {{HTMLElement("select")}} examples.
Samples
<select> <option value="NY"> New York </option> <option value="IL"> Chicago </options> </select>
{{ EmbedLiveSample('Samples') }}
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('HTML WHATWG', 'the-button-element.html#the-option-element', '<option>')}} | {{Spec2('HTML WHATWG')}} | |
{{SpecName('HTML5 W3C', 'forms.html#the-option-element', '<option>')}} | {{Spec2('HTML5 W3C')}} | |
{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<option>')}} | {{Spec2('HTML4.01')}} |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1.0 | {{CompatGeckoMobile("1.0")}} [1] | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatVersionUnknown}} | {{CompatGeckoMobile("1.0")}} [1] | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
Gecko notes
[1] Prior to Gecko 7.0, {{geckoRelease("7.0")}}, the label attribute incorrectly returned an empty string if not defined, instead of returning the element text content.
See also
- Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.
{{HTMLRef}}