<select><option>

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O
Type

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 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.

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.