mozilla

Version 447827 von <select>

  • Adressname der Version: Web/HTML/Element/select
  • Titel der Version: <select>
  • ID der Version: 447827
  • Erstellt:
  • Autor: TylerChilds
  • Aktuelle Version? Nein
  • Kommentar

Inhalt der Version

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

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.

Specifications

Specification Status Comments
{{SpecName('HTML5 W3C', 'forms.html#the-select-element', '<select>')}} {{Spec2('HTML5 W3C')}}  
{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<select>')}} {{Spec2('HTML4.01')}}  

Browser 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")}}.
{{HTML:Element_Navigation}}

Quelltext der Version

<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="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"). 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="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="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="HTML/Element/Input">radioboxes</a> and <a href="/en-US/docs/HTML/Element/Input" title="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>
<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")}}</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>
<div>
  {{HTML:Element_Navigation}}</div>
Zu dieser Version zurücksetzen