HTML/Form Tags/selectable list - TAG index

<select><option>

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

Categories