Adding a ListMenu

Adding a List/Menu

Another common form element is what's referred to in the forms category of the Insert Bar as a list/menu . It's actually the two forms of the HTML select tag: either a pop-up menu or a scrolling list of options. If it's the latter, you can decide whether the user can click on a single option or on multiple options.

To add a pop-up menu:

1.	Choose where in your form you want your pop-up menu to appear, and click the list/menu button on the Insert Bar.
2.	The List Values dialog will appear ( Figure 10.17 ). Enter your desired options. The Item Label is what appears in the pop-up, and the Value is what's sent to the server-side CGI/JavaScript. Figure 10.17. You'll enter all the values for pop-up menus and scrolling option lists in the List Values dialog.
3.	Click OK, and your new pop-up will appear on your page ( Figure 10.18 ). Figure 10.18. The new pop-up menu is now on your form.
4.	If the pop-up menu hasn't been automatically selected, select it, and you'll see the options you can change for your new field in the Property Inspector ( Figure 10.19 ): List/Menu: This is the field name that will be passed back to the server-side CGI/JavaScript when it processes the form. Type: The choices are Menu or List; for a pop-up menu, choose Menu. Initially selected: You can choose one of the menu options to be the default that's shown when the page loads. List Values: Clicking this button causes the List Values dialog ( Figure 10.20 ) to reappear. Figure 10.19. Change the pop-up menu into a scrolling option list in the Property Inspector. Figure 10.20. You can return to the List Values dialog to view or change the items by clicking the List Values button in the Property Inspector.

To add a scrolling option list:

1.	Follow steps 1-3 above to create a pop-up menu, and select the pop-up menu.
2.	In the Property Inspector ( Figure 10.21 ), change Type to List. You'll notice that even though you've changed the type to list, your field still displays as a pop-up menu. Figure 10.21. If you change from a pop-up menu to a scrolling list, you'll get a couple of new options in the Property Inspector.
3.	Change the Height to show the number of items you want displayed at any one time in the scrolling list. Changing this causes the field to display as a scrolling list ( Figure 10.22 ). Figure 10.22. And here's the new scrolling list next to a pop-up menu.
4.	If desired, change the Selections option to allow multiple choices. When you do this, visitors to your site will be able to pick several options in the scrolling list at one time.

Tip

If you leave the Height set to 1, and change Selections to "Allow multiple," you'll also see your pop-up menu change to a scrolling list. But a scrolling list with a height of one isn't much of a scrolling listit's too difficult for your users to see what's available.

Styling Forms

How forms should be styled is a matter of hot debate among leading Web designers: are tables acceptable, or should you try and stick to CSS-only solutions?

The grim reality is that it's unlikely that you'll get 100% of what you want from CSS, which is why we've used tables in this examplebrowsers such as Microsoft Internet Explorer 6 for Windows still can't do what's required. On the other hand, a simple form with a simple layout such as this one still comes across differently in browsers, even with the entire layout designed with tables. Looking at Figures 10.23 , 10.24 , and 10.25 , you can see that each browser has its own quirks , and no two look exactly the same.

Figure 10.23. Our new form, as it appears in Firefox on Windows.

Figure 10.24. The same form, in Microsoft Internet Explorer for Windows. You can't see it in black and white, but the text field backgrounds are yellow and the fieldset legend is blue, while the other two browsers show them as white and black.

Figure 10.25. And finally, the same form in Safari on the Mac. Even when you use CSS to style form fields in a certain way, Safari will often use its own Mac-like fields instead.