Revision 32787 of <option>

  • Revision slug: HTML/Element/option
  • Revision title: option
  • Revision id: 32787
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment update for bug 659596; 41 words added

Revision Content

Summary

In a web form, the HTML option element (<option>) is used to create a control representing an item within a {{ HTMLElement("select") }}, an {{ HTMLElement("optgroup") }} or a {{ HTMLElement("datalist") }} HTML5 element.

Usage context

Permitted content Text with eventually escaped characters (like &eacute;)
Tag omission The start tag is mandatory. The end tag is optional 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") }} (HTML5) element.

Normative document HTML5, section 4.10.12 (HTML4.01, section 17)

Attributes

Like all other HTML elements, this element has 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 received 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: the label attribute is designed to contain a short label typically used in a hierarchical menu. The value 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 multiple 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. The value attribute describes a longer label designed to be used near a radio button, for example.

DOM interface

This element implements the HTMLOptionElement interface.

Examples

See <select> examples.

Browser compatibility

Gecko notes

{{ gecko_callout_heading("7.0") }}

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") }}.

{{ languages( { "fr": "fr/HTML/Element/Option" } ) }}

Revision Source

<h2>Summary</h2>
<p>In a web form, the HTML<em> option </em>element (<span style="font-family: Courier New;">&lt;option&gt;</span>) is used to create a control representing an item within a {{ HTMLElement("select") }}, an {{ HTMLElement("optgroup") }} or a {{ HTMLElement("datalist") }} HTML5 element.</p>
<h2>Usage context</h2>
<table class="standard-table"> <tbody> <tr> <td>Permitted content</td> <td>Text with eventually escaped characters (like &amp;eacute;)</td> </tr> <tr> <td>Tag omission</td> <td>The <span title="syntax-start-tag">start tag</span> is mandatory. The <span title="syntax-end-tag">end tag</span> is optional this element is immediately followed by another <span style="font-family: Courier New;">&lt;option&gt;</span> element or an {{ HTMLElement("optgroup") }}, or if the parent element has no more content.</td> </tr> <tr> <td>Permitted parent elements</td> <td> <p>A {{ HTMLElement("select") }}, an {{ HTMLElement("optgroup") }} or a {{ HTMLElement("datalist") }} (HTML5) element.</p> </td> </tr> <tr> <td>Normative document</td> <td><a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-option-element" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-option-element">HTML5, section 4.10.12</a> (<a class=" external" href="http://www.w3.org/TR/REC-html40/interact/forms.html#edef-OPTION" title="http://www.w3.org/TR/REC-html40/interact/forms.html#edef-OPTION">HTML4.01, section 17</a>)</td> </tr> </tbody>
</table>
<h2>Attributes</h2>
<p>Like all other HTML elements, this element has the <a href="../../../../en/HTML/Global_attributes" rel="internal">global attributes</a>.</p>
<dl> <dt>{{ htmlattrdef("disabled") }}</dt> <dd>If this Boolean attribute is set, this option is not checkable. Often browsers grey out such control and it won't received 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.</dd> <dt>{{ htmlattrdef("label") }}</dt> <dd>This attribute is text for the label indicating the meaning of the option. If the <strong>label</strong> attribute isn't defined, its value is that of the element text content.<br> <div class="note"><em>Usage note: </em>the <strong>label</strong> attribute is designed to contain a short label typically used in a hierarchical menu. The<span style="font-weight: bold;"> <strong>value</strong><strong> </strong></span>attribute describes a longer label designed to be used near a radio button, for example.</div> </dd>
</dl>
<dl> <dt>{{ htmlattrdef("selected") }}</dt> <dd>If present, this Boolean attribute indicates that the option is initially selected. If the <span style="font-family: Courier New;">&lt;option&gt;</span> element is the descendant of a{{ HTMLElement("select") }} element whose <strong><a href="/en/HTML/Element/select#attr-multiple" title="en/HTML/Element/select#attr-multiple">multiple</a> </strong>attribute is not set, only one single <span style="font-family: Courier New;">&lt;option&gt;</span> of this {{ HTMLElement("select") }} element may have the <strong>selected</strong> attribute.</dd>
</dl>
<dl> <dt>{{ htmlattrdef("value") }}</dt> <dd>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. <div class="note"><em>Usage note: </em>the <strong>label</strong> attribute is designed to contain a short label typically used in a hierarchical menu. The<span style="font-weight: bold;"> <strong>value</strong><strong> </strong></span>attribute describes a longer label designed to be used near a radio button, for example.</div> </dd>
</dl>
<h2>DOM interface</h2>
<p>This element implements the <a href="/en/DOM/HTMLOptionElement" title="en/DOM/HTMLOptionElement">HTMLOptionElement</a> interface.</p>
<h2>Examples</h2>
<p>See <a href="/en/HTML/Element/select#Examples" title="https://developer.mozilla.org/en/HTML/Element/select#Examples">&lt;select&gt;</a> examples.</p>
<h2>Browser compatibility</h2>
<h3>Gecko notes</h3>
<div class="geckoVersionNote">
<p>{{ gecko_callout_heading("7.0") }}</p>
<p>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.</p>
</div>
<h2>See also</h2>
<ul> <li>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") }}.</li>
</ul>
<p>{{ languages( { "fr": "fr/HTML/Element/Option" } ) }}</p>
Revert to this revision