select Element

Module

The select element is an inline element declared by the XHTML 1.1 Forms Module

Elements in the Forms Module are:
form | label | textarea | select | optgroup | option | button | fieldset | legend |
input type="button" | input type="checkbox" | input type="file" | input type="hidden" | input type="image" | input type="password" | input type="radio" | input type="reset" | input type="submit" | input type="text"

Description

The select element is used within a form to create a list of options from which a user may choose. Each option within the list is specified using an option element.

By default, only a single option may be chosen from a select list. To allow the user to select more than one option, the multiple attribute must be specified on the select element. A single-choice (non-multiple) select list is logically equivalent to a set of radio buttons (i.e. a set of input type="radio" elements, each with the same value for its name attribute) and a multiple-choice select list is logically equivalent to a set of input type="checkbox" elements, each with the same value for its name attribute.

The number of options visible at any one time (for scrolled lists) may be controlled by the size attribute.

<label for="colour">Colour:</label>
<select id="colour" name="colour">
  <option value="1">Black</option>
  <option value="2" selected="selected">Red</option>
  <option value="3">Blue</option>
</select>

<label for="days">I wish to help on:</label>
<select id="days" name="days" multiple="multiple" size="4">
  <option value="1" selected="selected">Monday</option>
  <option value="2">Tuesday</option>
  <option value="3" selected="selected">Wednesday</option>
  <option value="4">Thursday</option>
  <option value="5">Friday</option>
  <option value="6">Saturday</option>
  <option value="7">Sunday</option>
</select>

For a multiple list, one name=value pair is sent to the processing URI for each option selected, where the value is that of the corresponding option element's value attribute (or the contents of the option element if no value attribute is specified). For example, for the multiple list above with only the Monday and Thursday options selected, the pairs days=1 and days=4 would be sent to be processed.

Groups of option elements may be created within a single select list using optgroup elements.

#REQUIRED Attributes

There are no #REQUIRED attributes on the select element.

Specific Attributes

From the Forms Module - the Element's own Module

disabled [ type Boolean ]

If this attribute is present, the select list is initially disabled - no data is sent to the processing URI for disabled elements when the form is submitted. The user cannot interact with a disabled control.

multiple [ type Boolean ]

If this attribute is present, then multiple selections are allowed, otherwise only a single option may be selected

name [ type CDATA ]

This is the name sent to the processing URI for the select list when the form is submitted (if the name attribute is not present, no data will be sent for this element). The value sent (in a name=value pair) is the value attribute of the currently selected option element (or that element's content if no value attribute is specified). If multiple options are selected, more than one pair is sent, e.g. product=2 and also product=5. If no options are selected, no data is sent for the select list.

size [ type Number ]

If the select element is rendered as a scrolled list, this attribute specifies the number of items which should be visible at any one time. If the list is displayed in a different manner (e.g. a drop-down list) this attribute is not relevant.

tabindex [ type Number ]

An integer between 0 and 32767 specifying the position of the select list in the tabbing order of the document

From the Intrinsic Events Module

onblur [ type Script ]

Script to be executed when the element loses focus

onchange [ type Script ]

Script to be executed when the option chosen within the select list is changed.

onfocus [ type Script ]

Script to be executed when the element receives focus

Common Attributes

From the Core Attribute Collection

class [ type NMTOKENS ]

One or more space separated classes

id [ type ID ]

A unique identifier for the element

style [ type CDATA ], from the Style Attribute Module (deprecated)

Element-specific styles

title [ type Text ]

Descriptive title for the element (in some user agents this may appear as a "tooltip" when the mouse hovers over the element)

xmlns [ type URI - #FIXED 'http://www.w3.org/1999/xhtml' ]

XML namespace

From the I18N Attribute Collection

dir [ type Enumeration (ltr | rtl) ], from the Bi-directional Text Module

Left-to-right or right-to-left directionality

xml:lang [ type LanguageCode ]

A language code for the element

From the Events Attribute Collection

All attributes in the Events Attribute Collection are supported:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Content Model

( optgroup | option )+

NOTE: This element cannot be empty

See Content Model & Nesting for information about Content Model syntax and Nesting Groups.

Valid children of select

• From the Forms Module: optgroup, option

Valid parents of select

• From the Text Module: abbr, acronym, address, cite, code, dfn, div, em, h1 - h6, kbd, p, q, samp, span, strong, var
• From the Hypertext Module: a
• From the List Module: dd, dt, li
• From the Tables Module: caption, td, th
• From the Forms Module: fieldset, label, legend
• From the Presentation Module: b, big, i, small, sub, sup, tt
• From the Edit Module: del, ins
• From the Bi-directional Text Module: bdo
• From the Object Module: object
• From the Ruby Annotation Module: rb, rt