Creating List Menus

The SELECT and OPTION elements are used together to create a list menu, with the SELECT element indicating the content is a list menu (or selection menu) and nested OPTION elements specifying the options that will be displayed in the menu. This type of control initially only displays the first option, whereas clicking on the list menu box then causes the list of options to expand (either dropping down or popping up, depending on the position of the list menu on the Web page). You select an option by clicking on it, after which it is displayed in the collapsed list box. Enter the following code to create an example list menu that queries visitors about how they found out about your site (see Figures 7.7 and 7.8):

<p>How did you find out about my site?</p>
<p><select name="Where">
   <option selected>Google
   <option>Yahoo
   <option>AltaVista
   <option>Excite
   <option>HotBot
   <option>Infoseek
   <option>Lycos
   <option>WebCrawler
   <option>Other Search Engine/Directory
   <option>Friend, Relative, or Associate
   <option>Another Web Page
   <option>Magazine/Newspaper
   <option>Radio/Television
   <option>Other
</select>
</form>

Figure 7.7: Before a list menu is clicked, it displays only the currently selected option.

Figure 7.8: After a list menu is clicked, the full list of options is expanded.

Setting List Menu Attributes

Two attributes can optionally be used with the SELECT element: SIZE and MULTIPLE. The SIZE attribute allows the initial display of more than one option, whereas the MULTIPLE attribute is a standalone attribute that allows users to select more than one option. Set up the list menu to initially display five options and allow for multiple selections (see Figure 7.9):

<p>How did you find out about this site? (<i>Hold down Ctrl
or Shift key to make multiple selections.</i>)</p>
<p><select name="Where" size="5" multiple>

Figure 7.9: You can set a list menu so it is automatically expanded and allows multiple selections.

Browsers vary how they display a list menu if only the MULTIPLE attribute is set. Internet Explorer displays the first four options, with scroll bars provided to access the remainder. The Netscape and Mozilla browsers, however, display all of the options in the list. To ensure that the same number of options will be displayed in all browsers, always also set a SIZE attribute when setting the MULTIPLE attribute.