HTML Help & Resources
Form Input Option/Select
The select html tag offers a different kind of user input, in the form of scrollable lists, such as pull-down menus or listbox menus. Users are able to select just one option or several, depending upon the configuration. See examples below.
The elements of style, and how to use them, are not covered in this reference. For more information on how to utilize the power of cascadding style, visit our CSS reference instead.
SELECT
NAME
Name must be identified in order to access user input. Avoid using spaces or non-alpha numeric characters for the name identifier.
SIZE
Size identifies the select input to be a box, defined by a number of visible rows. This value is helpful to show a number of options ay any one time, and when allowing users to select multiple options.
MULTIPLE
When set, allows user to select more than one option, usually by holding the CTRL key down while clicking the mouse button.
READONLY
Input will not be allowed when this parameter is set, as whatever the value is set to initially, will remain.
DISABLED
Disables user input and changes the text input to grey/silver. This parameter is unreliable, and does not work in all browsers. It should not be relied upon.
ONFOCUS
When the input receives focus.
ONBLUR
When the input losses focus.
ONCHANGE
When the input losses focus, but its value has changed since initial focus.
OPTION
VALUE
If this parameter is omitted, form submits the select option(s) text defined between the <option> and </option> tags.
SELECTED
When this is set, option is highlighted in scroll bar/box. This is equivalent to setting a default value.
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
... META DATA ...
</HEAD>
<BODY>
<!-- Basic select input -->
<SELECT CLASS="userInput" NAME="oList">
<OPTION VALUE="" SELECTED>Choose an option...</OPTION>
<OPTION VALUE="1">Option Number 1</OPTION>
<OPTION VALUE="2">Option Number 2</OPTION>
<OPTION VALUE="3">Option Number 3</OPTION>
</SELECT>
<!-- Multiple select input box -->
<SELECT CLASS="userInput" NAME="oList[]" SIZE="3" MULTIPLE>
<OPTION CLASS="spOption" VALUE="1">Option Number 1</OPTION>
<OPTION VALUE="2">Option Number 2</OPTION>
<OPTION VALUE="3">Option Number 3</OPTION>
<OPTION CLASS="spOption" VALUE="4">Option Number 4</OPTION>
<OPTION VALUE="5">Option Number 5</OPTION>
</SELECT>
</BODY>
</HTML>
The first example will display a basic select bar.
The second example will display a scrollable box with 3 visible rows, and allow user to select multiple options. Notice, the class definition for two of the options. CSS style allows you to alter the appearance of each option in the select list.
Move on to the Next Topic - Miscellaneous HTML Tags.