<select>

  • Revision slug: HTML/Element/select
  • Revision title: <select>
  • Revision id: 349945
  • Created:
  • Creator: brunoais
  • Is current revision? No
  • Comment Starting on IE10, IE supports it.

Revision Content

Summary

The HTML select (<select>) element represents a control that presents menu of options. The options within the menu are represented by {{ HTMLElement("option") }} elements, which can be grouped by {{ HTMLElement("optgroup") }} elements. Options can be pre-selected for the user.

Usage content

Content categories flow content, phrasing content, interactive content, listed, labelable, resettable, and submittable form-associated element
Permitted content Zero or more {{ HTMLElement("option") }} or {{ HTMLElement("optgroup") }} elements.
Tag omission none, both the start tag and the end tag are mandatory
Permitted parent elements any element that accepts phrasing content
Normative document HTML5, section 4.10.9 (HTML4.01, section 17.6)

Attributes

This element includes the global attributes.

{{ htmlattrdef("autofocus") }} {{ HTMLVersionInline("5") }}
This attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the autofocus attribute, which is a Boolean.
{{ htmlattrdef("disabled") }}
This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example fieldset; if there is no containing element with the disabled attribute set, then the control is enabled.
{{ htmlattrdef("form") }} {{ HTMLVersionInline("5") }}
The form element that the select element is associated with (its "form owner"). The value of the attribute must be an ID of a form element in the same document. If this attribute is not specified, the select element must be a descendant of a form element. This attribute enables you to place select elements anywhere within a document, not just as descendants of their form elements.
{{ htmlattrdef("multiple") }}
This Boolean attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.
{{ htmlattrdef("selectedIndex") }}
The index of the selected {{ HTMLElement("option") }} element.
{{ htmlattrdef("name") }}
The name of the control.
{{ htmlattrdef("required") }} {{ HTMLVersionInline("5") }}
A Boolean attribute indicating that an option with a non-empty string value must be selected.
{{ htmlattrdef("size") }}
If the control is presented as a scrolled list box, this attribute represents the number of rows in the list that should be visible at one time. Browsers are not required to present a select elements as a scrolled list box. The default value is 0.
Firefox note: According to the HTML5 specification, the default value for size should be 1; however, in practice, this has been found to break some web sites, and no other browser currently does that, so Mozilla have opted to continue to return 0 for the time being with Firefox.

DOM Interface

This element implements the HTMLSelectElement interface.

Examples

<!-- The second value will be selected initially -->
<select name="select">
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>

Result

Notes

The content of this element is actually static and not editable. If you want to emulate an editable select through a {{HTMLElement("fieldset")}} of radioboxes and textboxes (written in pure CSS, without JavaScript), please see this example.

Compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop("1.0") }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
required attribute {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("2.0") }} 10 {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }} {{ CompatGeckoMobile("1.0") }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
required attribute {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("2.0") }} {{ CompatNo() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}

See also

  • Other form-related elements: {{ HTMLElement("form") }}, {{ HTMLElement("legend") }}, {{ HTMLElement("label") }}, {{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("datalist") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("input") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }} and {{ HTMLElement("meter") }}.

Revision Source

<h2 id="Summary">Summary</h2>
<p>The HTML <em>select</em> (<code>&lt;select&gt;</code>) element represents a control that presents menu of options. The options within the menu are represented by <code>{{ HTMLElement("option") }}</code> elements, which can be grouped by <code>{{ HTMLElement("optgroup") }}</code> elements. Options can be pre-selected for the user.</p>
<h2 id="Usage_content">Usage content</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td><a href="/en-US/docs/HTML/Content_categories" title="/en-US/docs/HTML/Content categories">Content categories</a></td>
      <td><a href="/en-US/docs/HTML/Content_categories#flow_content" title="/en-US/docs/HTML/Content categories#flow content">flow content</a>, <a href="/en-US/docs/HTML/Content_categories#phrasing_content" title="/en-US/docs/HTML/Content categories#phrasing content">phrasing content</a>, <a href="/en-US/docs/HTML/Content_categories#interactive_content" title="/en-US/docs/HTML/Content categories#interactive content">interactive content</a>, <a href="/en-US/docs/HTML/Content_categories#form_listed" title="/en-US/docs/HTML/Content categories#form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#form_labelable" title="/en-US/docs/HTML/Content categories#form labelable">labelable</a>, <a href="/en-US/docs/HTML/Content_categories#form_resettable" title="/en-US/docs/HTML/Content categories#form resettable">resettable</a>, and <a href="/en-US/docs/HTML/Content_categories#form_submittable" title="/en-US/docs/HTML/Content categories#form submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#form-associated_" title="/en-US/docs/HTML/Content categories#form-associated ">form-associated </a>element</td>
    </tr>
    <tr>
      <td>Permitted content</td>
      <td>Zero or more {{ HTMLElement("option") }} or {{ HTMLElement("optgroup") }} elements.</td>
    </tr>
    <tr>
      <td>Tag omission</td>
      <td>none, both the <span title="syntax-start-tag">start tag</span> and the <span title="syntax-end-tag">end tag</span> are mandatory</td>
    </tr>
    <tr>
      <td>Permitted parent elements</td>
      <td>any element that accepts phrasing content</td>
    </tr>
    <tr>
      <td>Normative document</td>
      <td><a class="external" href="http://dev.w3.org/html5/spec/the-button-element.html#the-select-element" rel="external nofollow" target="_blank" title="http://dev.w3.org/html5/spec/the-button-element.html#the-select-element">HTML5, section 4.10.9</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.6" title="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.6">HTML4.01, section 17.6</a>)</td>
    </tr>
  </tbody>
</table>
<h2 id="Attributes">Attributes</h2>
<p><span style="line-height: 21px;">This element includes the&nbsp;</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
<dl>
  <dt>
    {{ htmlattrdef("autofocus") }} {{ HTMLVersionInline("5") }}</dt>
  <dd>
    This attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the <code>autofocus</code> attribute, which is a Boolean.</dd>
  <dt>
    {{ htmlattrdef("disabled") }}</dt>
  <dd>
    This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example <code>fieldset</code>; if there is no containing element with the <code>disabled</code> attribute set, then the control is enabled.</dd>
  <dt>
    {{ htmlattrdef("form") }} {{ HTMLVersionInline("5") }}</dt>
  <dd>
    The form element that the select element is associated with (its "form owner"). The value of the attribute must be an ID of a form element in the same document. If this attribute is not specified, the select element must be a descendant of a form element. This attribute enables you to place select elements anywhere within a document, not just as descendants of their form elements.</dd>
  <dt>
    {{ htmlattrdef("multiple") }}</dt>
  <dd>
    This Boolean attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.</dd>
  <dt>
    {{ htmlattrdef("selectedIndex") }}</dt>
  <dd>
    The index of the selected {{ HTMLElement("option") }} element.</dd>
  <dt>
    {{ htmlattrdef("name") }}</dt>
  <dd>
    The name of the control.</dd>
  <dt>
    {{ htmlattrdef("required") }} {{ HTMLVersionInline("5") }}</dt>
  <dd>
    A Boolean attribute indicating that an option with a non-empty string value must be selected.</dd>
  <dt>
    {{ htmlattrdef("size") }}</dt>
  <dd>
    If the control is presented as a scrolled list box, this attribute represents the number of rows in the list that should be visible at one time. Browsers are not required to present a select elements as a scrolled list box. The default value is 0.</dd>
</dl>
<div class="note">
  <strong>Firefox note:</strong> According to the HTML5 specification, the default value for size should be 1; however, in practice, this has been found to break some web sites, and no other browser currently does that, so Mozilla have opted to continue to return 0 for the time being with Firefox.</div>
<dl>
</dl>
<h2 id="DOM.C2.A0Interface">DOM&nbsp;Interface</h2>
<p>This element implements the <code><a href="/en-US/docs/DOM/HTMLSelectElement" title="/en-US/docs/DOM/select">HTMLSelectElement</a></code> interface.</p>
<h2 id="Examples">Examples</h2>
<pre class="brush: html">
&lt;!-- The second value will be selected initially --&gt;
&lt;select name="select"&gt;
&nbsp; &lt;option value="value1"&gt;Value 1&lt;/option&gt; 
&nbsp;&nbsp;&lt;option value="value2" selected&gt;Value 2&lt;/option&gt;
&nbsp; &lt;option value="value3"&gt;Value 3&lt;/option&gt;
&lt;/select&gt;
</pre>
<h4 id="Result">Result</h4>
<p><select name="select"><option value="value1">Value 1</option><option selected="selected" value="value2">Value 2</option><option value="value3">Value 3</option></select></p>
<h3 id="Notes">Notes</h3>
<p>The content of this element is actually static and not <a href="/en-US/docs/HTML/Content_Editable" title="en-US/docs/HTML/Content_Editable">editable</a>. If you want to emulate an editable select through a {{HTMLElement("fieldset")}} of <a href="/en-US/docs/HTML/Element/Input" title="en-US/docs/HTML/Element/Input">radioboxes</a> and <a href="/en-US/docs/HTML/Element/Input" title="en-US/docs/HTML/Element/Input">textboxes</a> (<strong>written in pure CSS</strong>, without JavaScript), please <a href="/files/4563/editable_select.html" title="Simulating an editable select through a fieldset of radioboxes and textboxes">see this example</a>.</p>
<h3 id="Compatibility">Compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>required</code> attribute</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>10</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoMobile("1.0") }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>required</code> attribute</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>Other form-related elements: {{ HTMLElement("form") }}, {{ HTMLElement("legend") }}, {{ HTMLElement("label") }}, {{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("datalist") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("input") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }} and {{ HTMLElement("meter") }}.</li>
</ul>
Revert to this revision