TAG:  select
<select> ... </select>
Available in versions: 2.0, 3.2, 4.0
Browser compatibility: Explorer 4, 5  Netscape 4, 6
 
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 closing tag is mandatory.
 
Core Attributes
 
class    dir    id    lang    onclick    ondblclick    onkeydown    onkeypress    onkeyup    onmousedown    onmousemove    onmouseout    onmouseover    onmouseup    style    title
 
Attributes
 
disabled
The disabled attribute is a Boolean value that, if present, prevents the form control (field) from functioning. In some browsers, the control (field) will appear to be greyed out.
 
multiple
The multiple attribute allows the user to choose more than one item in the pull-down. The default is to be able to choose only one item.
 
name
The name attribute is a string of characters that is used to label a form control (field) with a name. The name must be unique to that document and cannot be reused.
 
onblur
The onblur attribute is an event that allows the execution of JavaScript code when an element loses focus (for example, the mouse was clicked onto another element or a tab navigation directed the cursor elsewhere).
 
onchange
The onchange attribute is an event that allows the execution of JavaScript code when the form control (field) has been changed and loses focus.
 
onfocus
The onfocus attribute is an event that allows the execution of JavaScript code when an element comes into focus (for example, the mouse was clicked onto the element or a tab navigation brought the cursor to the element).
 
size
The size attribute allows the user to have more than one item on display in the pull-down window. Up and down buttons will allow you to scroll through the list. The default is to display only one item.
 
tabindex
The tabindex attribute specifies an integer that defines the rank in the tabbing order for the specified element when you use the keyboard to navigate (tab through) a page. This attribute is poorly supported.
 
This is a simple pull-down that allows the choice of one item.
 
Code:
<select>
<option selected>Angel fish</option>
<option>Cat fish</option>
<option>Discus</option>
<option>Neon tetra</option>
</select>
 
Output:

 
Here is the code for the pull-down at the top of this page.
 
Code:
<select name="SeeAlsoSelect" onChange=ViewCrossReference(this); style="height: 22px; width: 240px">
<option value="html_form.html" selected>form tag</option>
<option value="html_input.html">input tag</option>
<option value="html_button.html">button tag</option>
<option value="html_optgroup.html">optgroup tag</option>
<option value="html_option.html">option tag</option>
<option value="html_textarea.html">textarea tag</option>
</select>
<a href="javascript:ViewCrossReference(document.MainForm.SeeAlsoSelect)" border=0>
<img src="images/go.gif" border="0" height=22 width="20" value="Go">
</a>
 
This JavaScript function is placed in the head element.
 
<script language="JavaScript">
function ViewCrossReference (selSelectObject)
{
   if (selSelectObject.options[selSelectObject.selectedIndex].value != "")
   {
     location.href=selSelectObject.options[selSelectObject.selectedIndex].value
   }
}
</script>

Copyright 1999-2001 by Infinite Software Solutions, Inc. All rights reserved.
Trademark Information