select (HTML element)
| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 2 |
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
Example
This example shows a
very simple select element:
<form>
<label for="favoritefood">Favorite food</label>
<select name="favoritefood" id="favoritefood">
<option>Cheese</option>
<option>Egg</option>
<option>Cabbage</option>
⋮
</select>
</form>
- Type
- inline element
- Contains
- optgroup, option
- Contained by
- block-level elements, inline elements (except button and select)
Description
The
select form control is a container for a series of
option elements that display in the
browser as a pull-down menu (that is, a drop-down list). Unless you use
the multiple attribute, the
control will allow the user to pick just one item from the list of options
that’s generated by the contents of the nested option
elements. The select renders slightly differently
depending on the browser and operating system in use, and is well known as
a troublesome HTML element to style with CSS (because the display is
inherited from the operating system, rather than provided by the browser).
If there isn’t enough room on the page for the list to display below the
control, it will open up above it. Figure 1 shows an expanded (opened)
select list in Firefox.
Use This For …
This element is
used to allow visitors to make selections from a long list of items. The
alternative approach would involve the use of radio
input selections, but this would require all the
options to be displayed on the page at once; select
controls generally display in a smaller amount of page real
estate.
Compatibility
| IE | 5.5 | Full |
|---|---|---|
| 6.0 | Full | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
It causes no compatibility issues, and has excellent support across all tested browsers.
In this Section
- accesskey
assigns a key to place focus on this group of form controls - disabled
disables theselectso that it can’t be used - multiple
allows the user to make multiple selections from the list - name
specifies a name by which theselectwill be referenced - size
specifies the number of options that will be displayed in theselectlist - tabindex
indicates the order in the logical tabbing sequence for this control
User-contributed notes
- ID:
- #1
- Date:
- Sat, 17 May 2008 14:24:06 GMT
It should be noted, that if the <code>size</code> property is set, the widget is rendered different, than when it is not set.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
