A SELECT element presents a set of options to the user . If only a single entry can be selected and no visible size has been specified, the options are presented in a combo box (drop-down menu); list boxes are used when multiple selections are permitted or a specific visible size has been specified. The choices themselves are specified by OPTION entries embedded in the SELECT element. The typical format is as follows :
<SELECT NAME=" Name " ...> <OPTION VALUE=" Value1 "> Choice 1 Text <OPTION VALUE=" Value2 "> Choice 2 Text ... <OPTION VALUE=" ValueN "> Choice N Text </SELECT>
The HTML 4.0 specification also defines OPTGROUP (with a single attribute of LABEL ) to enclose OPTION elements to create cascading menus .
HTML Element: <SELECT NAME="..." ...> ... </SELECT>
Attributes: NAME (required), SIZE , MULTIPLE , ONCLICK , ONFOCUS , ONBLUR , ONCHANGE
SELECT creates a combo box or list box for selecting among choices. You specify each choice with an OPTION element enclosed between <SELECT ...> and </SELECT> .
HTML Element: <OPTION ...> (End Tag Optional)
Attributes: SELECTED , VALUE
This element specifies the menu choices; it is valid only inside a SELECT element.
Listing 19.8 creates a menu of programming language choices. Because only a single selection is allowed and no visible SIZE is specified, it is displayed as a combo box. Figures 19-16 and 19-17 show the initial appearance and the appearance after the user activates the menu by clicking on it. If the entry Java is active when the form is submitted, then language=java is sent to the server-side program. Notice that it is the VALUE attribute, not the descriptive text, that is transmitted.
Listing 19.8 Example of a SELECT menu
Favorite language: <SELECT NAME="language"> <OPTION VALUE="c">C <OPTION VALUE="c++">C++ <OPTION VALUE="java" SELECTED>Java <OPTION VALUE="lisp">Lisp <OPTION VALUE="perl">Perl <OPTION VALUE="smalltalk">Smalltalk </SELECT>
Figure 19-16. A SELECT element displayed as a combo box (drop-down menu).
Figure 19-17. Choosing options from a SELECT menu.
The second example shows a SELECT element rendered as a list box. If more than one entry is active when the form is submitted, then more than one value is sent, listed as separate entries (repeating NAME ). For instance, in the example shown in Listing 19.9 (Figure 19-18), language=java&language=perl gets added to the data being sent to the server. Multiple entries that share the same name is the reason servlet authors need to be familiar with the getParameterValues method of HttpServletRequest in addition to the more common getParameter method. See Chapter 4 (Handling the Client Request: Form Data) for details.
Listing 19.9 Example of a SELECT menu that permits selection of multiple options
Languages you know:<BR> <SELECT NAME="language" MULTIPLE > <OPTION VALUE="c">C <OPTION VALUE="c++">C++ <OPTION VALUE="java" SELECTED>Java <OPTION VALUE="lisp">Lisp <OPTION VALUE="perl" SELECTED>Perl <OPTION VALUE="smalltalk">Smalltalk </SELECT>
Figure 19-18. A SELECT element that specifies MULTIPLE or SIZE results in a list box.
HTML Element: <OPTGROUP ...> ... </OPTGROUP>
Attributes: LABEL (required)
This element, supported by Netscape 7.0 and Internet Explorer 6.0, permits grouping of menu choices. It is valid only inside a SELECT element.
Listing 19.10 creates a menu of server-side language choices. Here the menu choices are categorized into two groups by the OPTGROUP element. The first group is Common Servlet Languages, and the second group is Common CGI Languages. Figure 19-19 shows the displayed menu with Java selected for the common CGI language. For this selection the request data sent to the server is language=java . Be aware that no additional information is sent to the server by Netscape and Internet Explorer to indicate which OPTGROUP choice was selected. As a result, you should use unique values for all the menu choices, regardless of group.
Figure 19-19. A SELECT element using OPTGROUP to group menu choices in Netscape 7.0.
Listing 19.10 Example of a SELECT menu categorized into two groups with the OPTGROUP element
Server-side Languages: <SELECT NAME="language"> <OPTGROUP LABEL="Common Servlet Languages"> <OPTION VALUE="java1">Java </OPTGROUP> <OPTGROUP LABEL="Common CGI Languages"> <OPTION VALUE="c">C <OPTION VALUE="c++">C++ <OPTION VALUE="java2">Java <OPTION VALUE="perl">Perl <OPTION VALUE="vb">Visual Basic </OPTGROUP> </SELECT>