14.4. The select forms control: menus

14.4. The `select` forms control: menus

This control allows the user to select one of a fixed set of choices. There are two general styles:

A drop-down menu takes up very little space on the form. When the user clicks on it, a list of the choices will drop down.
If you have more room, you can display a scrollable list of choices. You specify how many lines to show with the size attribute. If there are more choices than that, the control will have a scrollbar that allows the user to scroll through all the choices.

Here is the content model:

element select
{ attribute name { text },
  attribute size { xsd:positiveInteger }?,
  attribute multiple { 'multiple' }?,
  attribute tabindex { xsd:nonNegativeInteger }?,
  attribute onchange { text }?,
  attribute onfocus { text }?,
  attribute onblur { text }?,
  Common.attrib,
  ( option | optgroup ) +
}

name

This required attribute specifies the control's name.

size

If you omit this attribute, you will get a drop-down menu. To create a scrollable list, specify how many lines to display. If there are too many choices to display at once, the control will have a scrollbar.

multiple

By default, the user will be able to select only one of the choices. If you specify the multiple='multiple' attribute, the user will be able to select any number of them, or none at all. The method for selecting multiple choices depends on the browser. For example, in Firefox, clicking any choice selects it; control-click adds a choice to the selected set, or removes it if it was already selected.

If a user selects more than one choice, the handler script will receive a list of choices, rather than a single choice, for that element. If the user selects no choices at all, the control will not be considered successful, and the handler script will not receive a name/value pair for that control.

tabindex

See Section 15.7, “The tabindex attribute: Specifying tab traversal order”.

onchange, onfocus, onblur

See Section 16, “Event attributes”.

Common.attrib

This control can carry any of the attributes described in Section 15.3, “The common attributes: Common.attrib”.

( option | optgroup )+

There are two ways to organize the options inside a select control. You can include a sequence of option elements; each defines one choice. You can also organize the options into groups: the content inside the select element is a sequence of optgroup elements, each of which has a sequence of option elements inside it.

See Section 14.5, “The option element: One choice inside a select control” and Section 14.6, “The optgroup element: A group of choices inside a select control”.

Here is an example of a single-level, drop-down select control with three mutually exclusive choices.

  <select name='porridge-temp'>
    <option value='hot'>Too hot</option>
    <option value='cold'>Too cold</option>
    <option value='perfectamundo'>Just right</option>
  </select>

Here's a more complex example. This control displays a list six lines high, and allows the user to select any number of different movies. The movies are grouped into genres.

  <select name='movies' size='6' multiple='multiple'>
    <optgroup label='Date movies'>
      <option>Animal House</option>
      <option>History of the World Part I</option>
      <option>Over the Hedge</option>
    </optgroup>
    <optgroup label='Comedies'>
      <option>Love story</option>
      <option>When Harry met Sally</option>
      <option>On golden pond</option>
    </optgroup>
  </select>

Building web pages with XHTML 1.1

14.4. The select forms control: menus

14.4. The `select` forms control: menus