HTML/Elements/select

From Web Education Community Group
< HTML‎ | Elements
Revision as of 14:00, 19 November 2011 by Rworth (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

<select>

The <select> element represents a control for selecting amongst a set of options.

Point

  • The list of options for a select element consists of all the option element children of the select element, and all the option element children of all the optgroup element children of the select element, in tree order.


HTML Attributes

  • autofocus = boolean
    Allows the author to indicate that a control is to be focused as soon as the page is loaded


  • disabled = boolean
    If present, make the control non-interactive and to prevent its value from being submitted.


  • form = the ID of a form element in the element's owner
    Associate the select element with its form owner.
    By default, the select element is associated with its nearest ancestor form element.


  • multiple = boolean
    If the attribute is present, then the select element represents a control for selecting zero or more options from the list of options. [Example B]


  • name = unique name
    Represents the element's name.


  • required = boolean
    When specified, the user will be required to select a value before submitting the form.


  • size = valid non-negative intege
    Gives the number of options to show to the user.
    If the multiple attribute is present, then the size attribute's default value is 4. If the multiple attribute is absent, then the size attribute's default value is 1.


See also global attributes.


Examples

Example A

The following example shows how a select element can be used to offer the user with a set of options from which the user can select a single option. The default option is preselected. [try it]:

<p>
  <label for="unittype">Select unit type:</label>
  <select id="unittype" name="unittype">
    <option value="1"> Miner </option>
    <option value="2"> Puffer </option>
    <option value="3" selected> Snipey </option>
    <option value="4"> Max </option>
    <option value="5"> Firebot </option>
  </select>
</p>

Select01.png

Example B

Here, the user is offered a set of options from which he can select any number. By default, all five options are selected [try it]:

<p>
  <label for="allowedunits">Select unit types to enable on this map:</label>
  <select id="allowedunits" name="allowedunits" multiple>
    <option value="1" selected> Miner </option>
    <option value="2" selected> Puffer </option>
    <option value="3" selected> Snipey </option>
    <option value="4" selected> Max </option>
    <option value="5" selected> Firebot </option>
  </select>
</p>

Select02.png

HTML Reference

The HTML5 specification defines the <select> element in 4.10.9 The select element.