HTML 4.01 and XHTML 1.0 Reference: <select> Tag

HTML <select> Tag
Syntax	This element uses separate opening and closing tags. <select>...</select>
Usage	The <select> tag is used inside of a form element to create a menu or scrolling list of items that can be selected by the user. Each item in the list is created using an <option> tag. The <option> tags are contained between the opening and closing <select> tags, and at least one <option> tag is required. Also, the <optgroup> tag can be used to group related items into logical groupings. HTML <select> tag example that only allows a single selection. <form action="example_input.php" method="post"> <p> <select name="seltest" title="numbers"> <option>one</option> <option selected="selected">two</option> <option>three</option> </select> <input type="submit" value="Send"> <input type="reset"> </p> </form> XHTML <select> tag example that only allows a single selection. <form action="example_input.php" method="post"> <p> <select name="seltest" title="numbers"> <option>one</option> <option selected="selected">two</option> <option>three</option> </select> <input type="submit" value="Send" /> <input type="reset" /> </p> </form> HTML <select> tag example using <optgroup> to group selection items. <form action="example_input.php" method="post"> <p> <select name="seltest" title="numbers"> <option>none</option> <optgroup label="single digit"> <option>one</option> <option selected="selected">two</option> <option>three</option> </optgroup> <optgroup label="double digit"> <option>ten</option> <option>eleven</option> <option>twelve</option> </optgroup> </select> <input type="submit" value="Send"> <input type="reset"> </p> </form> XHTML <select> tag example using <optgroup> to group selection items. <form action="example_input.php" method="post"> <p> <select name="seltest" title="numbers"> <option>none</option> <optgroup label="single digit"> <option>one</option> <option selected="selected">two</option> <option>three</option> </optgroup> <optgroup label="double digit"> <option>ten</option> <option>eleven</option> <option>twelve</option> </optgroup> </select> <input type="submit" value="Send" /> <input type="reset" /> </p> </form>
Content Model	The <select> element can contain the following tags between its opening and closing tags. <optgroup> <option>

HTML <select> Tag

Syntax

This element uses separate opening and closing tags.

<select>...</select>

Usage

The <select> tag is used inside of a form element to create a menu or scrolling list of items that can be selected by the user. Each item in the list is created using an <option> tag. The <option> tags are contained between the opening and closing <select> tags, and at least one <option> tag is required. Also, the <optgroup> tag can be used to group related items into logical groupings.

HTML <select> tag example that only allows a single selection.

<form action="example_input.php" method="post">
<p>
 <select name="seltest" title="numbers">
  <option>one</option>
  <option selected="selected">two</option>
  <option>three</option>
 </select>  
 <input type="submit" value="Send"> <input type="reset">
</p>
</form>

XHTML <select> tag example that only allows a single selection.

<form action="example_input.php" method="post">
<p>
 <select name="seltest" title="numbers">
  <option>one</option>
  <option selected="selected">two</option>
  <option>three</option>
 </select>  
 <input type="submit" value="Send" /> <input type="reset" />
</p>
</form>

HTML <select> tag example using <optgroup> to group selection items.

<form action="example_input.php" method="post">
<p>
 <select name="seltest" title="numbers">
  <option>none</option>
  <optgroup label="single digit">
   <option>one</option>
   <option selected="selected">two</option>
   <option>three</option>
  </optgroup>
  <optgroup label="double digit">
   <option>ten</option>
   <option>eleven</option>
   <option>twelve</option>
  </optgroup>
 </select>  
 <input type="submit" value="Send"> <input type="reset">
</p>
</form>

XHTML <select> tag example using <optgroup> to group selection items.

<form action="example_input.php" method="post">
<p>
 <select name="seltest" title="numbers">
  <option>none</option>
  <optgroup label="single digit">
   <option>one</option>
   <option selected="selected">two</option>
   <option>three</option>
  </optgroup>
  <optgroup label="double digit">
   <option>ten</option>
   <option>eleven</option>
   <option>twelve</option>
  </optgroup>
 </select>  
 <input type="submit" value="Send" /> <input type="reset" />
</p>
</form>

Content Model

The <select> element can contain the following tags between its opening and closing tags.

<select> Tag Attribute Summary
Required	Tag Specific	Core	Focus	Events	Language
	disabled multiple name onchange size	id class style title	onblur onfocus tabindex	onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup	dir lang xml:lang¹
Notes: 1. XHTML only.

<select> Tag Attributes
Attribute	Description
disabled	The disabled attribute is used to disable the control so that it cannot be activated. HTML <select> tag example using the disabled attribute. <form action="example_input.php" method="post"> <p> <select name="seltest" disabled="disabled" title="numbers"> <option>one</option> <option selected="selected">two</option> <option>three</option> </select> <input type="submit" value="Send"> <input type="reset"> </p> </form> XHTML <select> tag example using the disabled attribute. <form action="example_input.php" method="post"> <p> <select name="seltest" disabled="disabled" title="numbers"> <option>one</option> <option selected="selected">two</option> <option>three</option> </select> <input type="submit" value="Send" /> <input type="reset" /> </p> </form>
multiple	The multiple attribute, when set, allows multiple items to be selected. When not set, only a single item may be selected. HTML <select> tag example that allows multiple selections. <form action="example_input.php" method="post"> <p> <select name="seltestarr[]" multiple="multiple" title="numbers"> <option>one</option> <option selected="selected">two</option> <option>three</option> </select> <input type="submit" value="Send"> <input type="reset"> </p> </form> XHTML <select> tag example that allows multiple selections. <form action="example_input.php" method="post"> <p> <select name="seltestarr[]" multiple="multiple" title="numbers"> <option>one</option> <option selected="selected">two</option> <option>three</option> </select> <input type="submit" value="Send" /> <input type="reset" /> </p> </form>
name	The name attribute assigns a name to the control. The control name is paired with the current selected item(s) and submitted with the form.
onchange	The onchange attribute is used to specify a script to be be run when the control loses its focus, if its value has changed.
size	The size attribute specifies the number of rows that should be visible. HTML <select> tag example using the size attribute. <form action="example_input.php" method="post"> <p> <select name="seltest" size="5" title="numbers"> <option>one</option> <option selected="selected">two</option> <option>three</option> </select> <input type="submit" value="Send"> <input type="reset"> </p> </form> XHTML <select> tag example using the size attribute. <form action="example_input.php" method="post"> <p> <select name="seltest" size="5" title="numbers"> <option>one</option> <option selected="selected">two</option> <option>three</option> </select> <input type="submit" value="Send" /> <input type="reset" /> </p> </form>
id	The id attribute assigns a unique name to a tag. This allows style sheets or scripts to reference the tag. See id Example
class	The class attribute assigns a class name to a tag. The class name does not need to be unique. More than one tag can have the same class name. This allows style sheets or scripts to reference multiple tags with a single class name. See class Example
style	The style attribute specifies styles for the tag. For Cascading Style Sheets (CSS), the syntax is name:value. Each name:value pair is separated by semicolons. See style Example
title	The title attribute specifies additional information about the tag. It is common for browsers to display the title when the pointing device stops over the object. See title Example
onblur	The onblur attribute specifies a script to be run when the tag loses focus. See onblur Example
onfocus	The onfocus attribute specifies a script to be run when the tag receives focus. See onfocus Example
tabindex	The tabindex attribute specifies the tabbing position of the tag. The tabbing sequence runs from lower values to higher values. The valid range of values is between 0 and 32767. See tabindex Example
onclick	The onclick attribute specifies a script to be run when the object is clicked with a mouse or other pointing device. See onclick Example
ondblclick	The ondblclick attribute specifies a script to be run when the object is double clicked with a mouse or other pointing device. See ondblclick Example
onkeydown	The onkeydown attribute specifies a script to be run when a key is pressed down. See onkeydown Example
onkeypress	The onkeypress attribute specifies a script to be run when a key is pressed and released. See onkeypress Example
onkeyup	The onkeyup attribute specifies a script to be run when a key is released. See onkeyup Example
onmousedown	The onmousedown attribute specifies a script to be run when the mouse button, or other pointing device button, is pressed while over the object. See onmousedown Example
onmousemove	The onmousemove attribute specifies a script to be run when the mouse, or other pointing device, is moved while it is over the object. See onmousemove Example
onmouseout	The onmouseout attribute specifies a script to be run when the mouse, or other pointing device, is moved away from an object after being over it. See onmouseout Example
onmouseover	The onmouseover attribute specifies a script to be run when the mouse, or other pointing device, is moved onto the object. See onmouseover Example
onmouseup	The onmouseup attribute specifies a script to be run when the mouse button, or other pointing device button, is released while over the object. See onmouseup Example
dir	The dir attribute tells the browser whether the text should be displayed from left-to-right or right-to-left. It does not reverse the direction of the characters, like the <bdo> tag does, but it can help the browser to determine if the text should be aligned on the left side or the right side. See dir Example
lang	The lang attribute specifies a language. This attribute can help the browser to correctly display text. This attribute can also be useful for braille translation software, speech synthesizers, dictionary definitions, etc. See lang Example
xml:lang	The xml:lang attribute specifies a language for XHTML documents. This attribute can help the browser to correctly display text. This attribute can also be useful for braille translation software, speech synthesizers, dictionary definitions, etc. See xml:lang Example Note: XHTML only.

HTML <select> Tag Examples
<select> tag example that only allows a single selection. <select> tag example using <optgroup> to group selection items. <select> tag example using the disabled attribute. <select> tag example that allows multiple selections. <select> tag example using the size attribute.