| Menus are perfect for offering your visitors a choice from a given set of options. Figure 17.26. Menus are made up of two (X)HTML tags: select and option. You set the common name attribute in the select tag and the individual value attribute in each of the option tags. 
To create menus: 1. | If desired, type the text that will describe your menu.
| 2. | Type <select.
Figure 17.27. We'll use CSS again to push the menu over in line with the other fields. 
| 3. | Type name="label", where label will identify the data collected from the menu when it is sent to the server.
| 4. | If desired, type size="n", where n represents the height (in lines) of the menu.
| 5. | If desired, type multiple="multiple" to allow your visitor to select more than one menu option (with Ctrl or Command). (The ="multiple" is optional in HTML.)
| 6. | Type >.
| 7. | Type <option.
| 8. | If desired, type selected="selected" if you want the option to be selected by default. (The ="selected" is optional in HTML.)
| 9. | Type value="label", where label identifies the data that will be sent to the server if the option is selected.
| 10. | If desired, type label="menu option", where menu option is the word that should appear in the menu.
| 11. | Type >.
| 12. | Type the option name as you wish it to appear in the menu.
| 13. | Type </option>.
| 14. | Repeat steps 713 for each option.
| 15. | Type </select>.
Figure 17.28. A visitor will not be able to select nothing in a menu unless you set the size attribute. The default selection is either the first option in the menu or the one you've set as selected in step 8. 
|
If you have a particularly large menu with many options, you may want to group the options into categories. Figure 17.29. Each submenu has a title, specified in the label attribute of the optgroup tag, and a series of options (defined with option tags and regular text). 
To group menu options: 1. | Create a menu as described on page 266.
| 2. | Before the first option tag in the first group that you wish to place together in a submenu, type <optgroup.
| 3. | Type label="submenutitle">, where submenutitle is the header for the submenu.
| 4. | After the last option tag in the group, type </optgroup>.
| 5. | Repeat steps 24 for each submenu.
Figure 17.30. Browsers generally don't create true submenus, but rather group the items in a single menu with subgroups. 
|
 Tips
If you add the size attribute in step 4, the menu appears more like a list, and there is no automatically selected option (unless you use selectedsee step 8). If size (see step 4) is bigger than the number of options, visitors can deselect all values by clicking in the empty space. The closing option tag in step 13 is optional in HTML 4 (but not in XHTML). You can also use the abbreviated selected and multiple in HTML, whereas XHTML requires selected= "selected" and multiple="multiple".
|
