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 ![](/books/4/96/1/html/2/images/menubutton.jpg) 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. | 3. | Click OK, and your new pop-up will appear on your page ( Figure 10.18 ). | 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.
| 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. | 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 ). | 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. 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. | |