Revision 1124443 of <select>

<h2 id="Summary">Summary</h2>

<p>The HTML <em>select</em> (<code>&lt;select&gt;</code>) element represents a control that presents a 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="HTML/Content categories">Content categories</a></td>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, <a href="/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">interactive content</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">labelable</a>, <a href="/en-US/docs/HTML/Content_categories#Form_resettable" title="HTML/Content categories#Form resettable">resettable</a>, and <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_" title="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>
 </tbody>
</table>

<h2 id="Attributes">Attributes</h2>

<p><span style="line-height:21px">This element includes the&nbsp;</span><a href="/en-US/docs/Web/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"). If this attribute is specified, its value must be the ID of a form element in the same document. This 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("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 element as a scrolled list box. The default value is 0.</dd>
 <dt>{{htmlattrdef("selected")}}</dt>
 <dd>Boolean attribute indicates that a specific option can&nbsp;be initially selected.&nbsp;</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_Interface">DOM&nbsp;Interface</h2>

<p>This element implements the <code><a href="/en-US/docs/DOM/HTMLSelectElement" title="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>

<h3 id="Result">Result</h3>

<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 static and not <a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content_Editable">editable</a>.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comments</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#the-select-element', '&lt;select&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;select&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<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")}}<sup> [3]</sup></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}}<sup> [1]</sup></td>
   <td>{{CompatGeckoMobile("1.0")}}<sup> [2]</sup></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>

<p>&nbsp;</p>

<p>[1] In the Browser app for Android 4.1 (and possibly later versions), there is a bug where the menu indicator triangle on the side of a {{HTMLElement("select")}} will not be displayed if a {{ cssxref("background") }}, {{ cssxref("border") }}, or {{ cssxref("border-radius") }} style is applied to the {{HTMLElement("select")}}.</p>

<p>[2] Firefox for Android, by default, sets a {{ cssxref("background-image") }} gradient on all <code>&lt;select multiple&gt;</code> elements. This can be disabled using <code>background-image: none</code>.</p>

<p>[3] Historically, Firefox has allowed keyboard and mouse events to bubble up from the <code>&lt;option&gt;</code> element to the parent {{HTMLElement("select")}} element. This doesn't happen in Chrome, however, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode and the <code>&lt;select&gt;</code> element is displayed as a drop-down list. The behavior is unchanged if the <code>&lt;select&gt;</code> is presented inline and it has either the <code>multiple</code> attribute defined or a <code>size</code> attribute set to more than 1. Rather than watching <code>&lt;option&gt;</code> elements for events, you should watch for {{event("change")}} events on {{HTMLElement("select")}}. See {{bug(1090602)}} for details.</p>

<p>Chrome and Safari both ignore {{cssxref("border-radius")}} on {{HTMLElement("select")}} elements unless {{cssxref("-webkit-appearance")}} is overridden to an appropriate value.</p>

<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>

<div>{{HTMLRef}}</div>