Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Listing 8.5 HTML Code to Produce a Menu

<SELECT MULTIPLE SIZE=4 NAME=”nsLO”>
<OPTION>(Any)
<OPTION>*Albany - Schenectady-Troy
<OPTION>*Albuquerque
<OPTION>*Anchorage
<OPTION>*Atlanta
<OPTION>*Austin
...
<OPTION>*Waco
<OPTION>*Washington DC
<OPTION>*Wilmington, DE
...
</SELECT>

Each option in the menu is specified inside of its own <OPTION> container tag. If you want an option to be preselected, include the SELECT attribute in the appropriate <OPTION> tag. The value passed to the server is the menu item that follows the <OPTION> tag unless you supply an alternative using the VALUE attribute. For example:

<FORM ...>
<SELECT NAME=”STATE” MULTIPLE>
<OPTION VALUE=”NY”>New York</OPTION>
<OPTION VALUE=”DC”>Washington, DC</OPTION>
<OPTION VALUE=”FL”>Florida</OPTION>
...
</SELECT>
...
</FORM>

In the preceding menu, the user clicks a state name, but it is the state’s two-letter abbreviation that passes to the server.

---

NOTE:  If multiple menu options are selected, all the values are passed to the server using the name specified by the NAME attribute in the <SELECT> tag. This means that multiple “copies” of that variable have to be created—one for each value selected.

In the code above, for example, a user might choose the states of New York and Florida. In that case, you would have two copies of the form field STATE—one set equal to “NY” and the other set equal to “FL,” and both would be passed on to the server. This means your processing script has to be ready to handle multiple instances of a variable if they appear.

---

One other tag related to the <SELECT> tag is <OPTGROUP>. <OPTGROUP> and its companion closing tag </OPTGROUP> enable you to create logical groups of menu options. You specify the name to associate with the option group by using the LABEL attribute of the <OPTGROUP> tag.

Grouping-related menu options can be invaluable in a long list of options where it may be difficult for the user to keep track of them all. Consider, for example, the following list of Web server configuration options:

<SELECT NAME=”server_options” MULTIPLE>
<OPTION>Windows NT 4.0
<OPTION>Solaris 2.6
<OPTION>Netscape Enterprise Server
<OPTION>Apache
<OPTION>Microsoft IIS
<OPTION>Firewall server
<OPTION>Pre-production test server
<OPTION>Emergency backup server
</SELECT>

Many options are in the list, but they are something of a mixed bag—a collection of operating systems, HTTP servers, and other support computers. You can use the <OPTGROUP> tag to logically group these options into a more intelligible list:

<SELECT NAME=”server_options” MULTIPLE>
<OPTGROUP LABEL=”Operating Systems”>
   <OPTION>Windows NT 4.0
   <OPTION>Solaris 2.6
</OPTGROUP>
<OPTGROUP LABEL=”HTTP Servers”>
   <OPTION>Netscape Enterprise Server
   <OPTION>Apache
   <OPTION>Microsoft IIS
</OPTGROUP>
<OPTGROUP LABEL=”Other Servers”>
   <OPTION>Firewall server
   <OPTION>Pre-production test server
   <OPTION>Emergency backup server
</OPTGROUP>
</SELECT>

Although it is not required of browsers, one presentation possibility for menus that use logically grouped options is to present a cascading menu—although as of this writing, no major browsers have implemented this approach. When users first see the menu, they see only the names of the option groups. Then, by moving their mouse pointer over one of the option group names, they can reveal the individual options under that group. You can see an example of this behavior in the way a browser handles bookmarks. Bookmarks that are grouped into subfolders are presented via cascading menus (see Figure 8.6).

FIGURE 8.6  Logically grouped menu options may someday be available via cascading menus, like Netscape Navigator bookmarks are.

Action Buttons

The handy <INPUT> tag provides an easy way of creating the form action buttons you see in many of the preceding figures. Action buttons can be of two types: Submit and Reset. Clicking a Submit button instructs the browser to package the form data and send it to the server. Clicking a Reset button clears out any data entered into the form and sets all the named input fields back to their default values.

Regular Submit and Reset Buttons Any form you compose should have a Submit button so that users can submit the data they enter. The one exception to this rule is a form containing only one input field. For such a form, pressing Enter automatically submits the data. Reset buttons are technically not necessary but are usually provided as a user courtesy.

Even though you technically don’t need to include a Submit button on a single-field form, you should do so as a guide for users who are less experienced with Web forms.

If you want to get fancy, you can leave the Submit button off and use the JavaScript submit() method to submit the form. See Chapter 21 for more details.

To create Submit or Reset buttons, use the <INPUT> tags as follows:

<INPUT TYPE=”SUBMIT” VALUE=”Submit Data”>
<INPUT TYPE=”RESET” VALUE=”Clear Data”>

Use the VALUE attribute to specify the text that appears on the button. You should set VALUE to a text string that concisely describes the function of the button. If VALUE is not specified, the button text is “Submit” for Submit buttons and “Reset” for Reset buttons.

Using Images as Submit Buttons You can create a custom image to be a Submit button for your forms, and you can set up the image so that clicking it instructs the browser to submit the form data (see Figure 8.7). To do this, you set TYPE equal to IMAGE in your <INPUT> tag, and you provide the URL of the image you want to use with the SRC attribute:

<INPUT TYPE=”IMAGE” SRC=”images/submit_button.gif”>

You can also use the ALIGN attribute in this variation of the <INPUT> tag to control how text appears next to the image (TOP, MIDDLE, or BOTTOM), or to float the image in the left or right margin (LEFT or RIGHT).