XHTML » Tags » select

Syntax:
<select> ... </select>

The select tag is used to create a pull-down list form control (field). Control is a technical term that refers to the various elements (buttons, check boxes, radio buttons, text areas) that can be used inside a form to gather information.

The four tags that can be used to build a form are:
 
button     input     select     textarea
 
The select tag is used to delimit the start and stop of a multiple choice pull-down menu. The default for this tag is to create a one-line window with a button on the left side. (Optionally, you can display a multi-line window.) When you single click onto the button with a mouse, the one-line window expands to display a list of items. You can then select one item from the list by simply clicking on the item with the mouse. (Optionally, you can allow more than one item to be selected.) Note that the user can select or unselect the item(s) any number of times. When an item(s) is selected, it is added to the contents of the form and when the form is submitted, the selected item(s) will be passed along with all of the other contents.
 
The beauty of the select form control is that it can occupy as little as one line of space on a form, yet allow the user to choose from a very large selection of items. For example, your pull-down could be a list of all fifty states. As another example, note the pull-down list at the top of this HTML Quick Reference page. When you select an item, it acts as a link and directs you to another page in this HTML Quick Reference.
 
You must use the option or the optgroup tags to define each item in the menu.
 
The separate closing tag is mandatory.
 

Examples

Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>DevGuru XHTML select Tag Example</title>
</head>
<body>
Gold Fish Types
<br />
<select>
<option selected="selected">Comet</option>
<option>Oranda</option>
<option>Ranchu</option>
<option>Ryukin</option>
</select>
</body>
</html>
Output:
Explanation:

This is a simple pull-down that allows the choice of one item.

Language(s): XHTML

Events

onclick

Syntax: onclick="action"

The onclick event is associated with the single click of a mouse on a selected HTML tag (element). Whenever you single click the element, the script code of the onclick is executed. This script can also call functions or subroutines which contain code that you want to run when the single click occurs.

ondblclick

Syntax: ondblclick="action"

The ondblclick event is associated with the double click of a mouse on a selected HTML element. Whenever you double click the element, the script code of the ondblclick is executed. This script can also call functions or subroutines which contain code that you want to run when the double click occurs.

onkeydown

Syntax: onkeydown="action"

The onkeydown event is associated with pressing down a key on the keyboard while the mouse is inside a selected HTML tag (element). In other words, the key down event occurred while the HTML element was in focus. Whenever you press down the key, the script code of the onkeydown is executed.

onkeypress

Syntax: onkeypress="action"

The onkeypress event is associated with press of a key on the keyboard while the mouse is inside a selected HTML element. In other words, the key press event occurred while the HTML element was in focus. Whenever you press the key, the script code of the onkeypress is executed.

onkeyup

Syntax: onkeyup="action"

The onkeyup event is associated with releasing up a key on the keyboard while the mouse is inside a selected HTML tag (element). In other words, the key up event occurred while the HTML element was in focus. Whenever you release the key, the script code of the onkeyup is executed.

onmousedown

Syntax: onmousedown="action"

The onmousedown event is associated with clicking down the mouse button while the mouse is inside a selected HTML tag (element). In other words, the mouse down event occurred while the HTML element was in focus. Every time you click down the mouse, while inside the element, the script code of the onmousedown is executed. This script can also call functions or subroutines which contain code that you want to run when this event occurs.

onmousemove

Syntax: onmousemove="action"

The onmousemove event is associated with moving the mouse around while inside a selected HTML tag (element). In other words, the mouse move event occurred while the HTML element was in focus. Every time you move the mouse around the element, the script code of the onmousemove is executed. This script can also call functions or subroutines that contain code that you want to run when this event occurs.

onmouseout

Syntax: onmouseout="action"

The onmouseout event is associated with moving the mouse out of a selected HTML tag (element). In other words, the mouse out event occurred while the HTML element was in focus. Every time you move the mouse out of the element, the script code of the onmouseout is executed. This script can also call functions or subroutines which contain code that you want to run when this event occurs.

onmouseover

Syntax: onmouseover="action"

The onmouseover event is associated with moving the mouse over a selected HTML tag (element). In other words, the mouse over event occurred while the HTML element was in focus. Every time you move the mouse over the element, the script code of the onmouseover is executed. This script can also call functions or subroutines which contain code that you want to run when this event occurs.

onmouseup

Syntax: onmouseup="action"

The onmouseup event is associated with the releasing up portion of a click of the mouse while inside a selected HTML tag (element). In other words, the mouse up event occurred while the HTML element was in focus. Every time you release the mouse up, while in the element, the script code of the onmouseup is executed. This script can also call functions or subroutines which contain code that you want to run when this event occurs.

See Also: