selectable list

<select><option>

Browser
Internet Explorer Firefox Opera
Type
Inline-block

The SELECT element defines a selectable list, and the OPTION element is used to define a list item.

<select name="example">
<option value="item1">Item 1</option>
</select>

The OPTION element is placed inside the SELECT element.

The </option> end tag is optional.

<select name="example">
<option value="item1">Item 1
<option value="item2">Item 2
<option value="item3">Item 3
</select>

The SELECT element

<select name="example" size="3" multiple> - </select>

Attribute Value Explanation
name=" " field name a unique name for the field
size=" " number the number of visible items (the default is 1)
multiple multiple multiple items can be selected
(HTML : multiple | XHTML : multiple="multiple")

name=""

The field name is used to identify the form field.

size=""

Specifies the number of visible items in the list.

size="1" :
size="3" :

multiple

Multiple items can be selected at a time.

Use the SHIFT or CTRL key to select multiple items.

The OPTION element

<option value="item1" selected>Item 1</option>

Attribute Value Explanation
value=" " initial value this value is submitted
selected selected that item is selected
(HTML : selected | XHTML : selected="selected")

value=""

This value is submitted to the server when selected.

<option value="item1">Item 1</option>

If the value attribute is not used, the content of the OPTION element is submitted to the server.

<option>Item 1</option>

selected

That item is selected in the initial state.

Tips and Notes

The style of the list field can be changed with CSS. Please see the "Related Document" for details on CSS.

Example

<form method="POST" action="example.cgi">

<p>
What's your favorite color? :
<select name="color1">
<option value="white">White</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</p>

</form>
Output

What's your favorite color? :

This form cannot submit because of a sample.

The third row selected

<form method="POST" action="example.cgi">

<p>
The third row selected :
<select name="color2">
<option value="white">White</option>
<option value="red">Red</option>
<option value="yellow" selected>Yellow</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</p>

</form>
Output

The third row selected :

This form cannot submit because of a sample.

Three visible rows

<form method="POST" action="example.cgi">

<p>
Three visible rows :
<select name="color3" size="3">
<option value="white">White</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</p>

</form>
Output

Three visible rows :

This form cannot submit because of a sample.

Select multiple items

<form method="POST" action="example.cgi">

<p>
Select multiple items :
<select name="color4" size="5" multiple>
<option value="white">White</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</p>

</form>
Output

Select multiple items :

Use the SHIFT or CTRL key to select multiple items.

This form cannot submit because of a sample.

Multiple items selected

<form method="POST" action="example.cgi">

<p>
Multiple items selected :
<select name="color5" size="5" multiple>
<option value="white">White</option>
<option value="red" selected>Red</option>
<option value="yellow">Yellow</option>
<option value="blue" selected>Blue</option>
<option value="green">Green</option>
</select>
</p>

</form>
Output

Multiple items selected :

This form cannot submit because of a sample.