Adobe Creative Suite 5 Web Premium How-Tos: Collecting Data in Forms
This chapter is from the book
This chapter is from the book
This chapter is from the book
Forms provide a uniquely interactive element in a Web site. Through a form you not only convey content, you also collect content. This content can range from orders for products, feedback on site content, service requests, and subscription list sign-ups to surveys, forum discussions, and opinion polls.
Some form content is managed using scripts that run in the visitor's browser. Such scripts are referred to as client-side data handling. A jump menu, for example, collects data (the page a visitor to your Web site wants to go to, for example) and acts on that input (by opening a new Web page). The client-side script does that without sending any data to a server. Other forms collect data and send it to a server, where scripts on the server manage the data. These are called server-side forms. Most form data is managed by server-side scripts. One example of a server-side script is a mailing list form. Visitors enter information (at least an email address and maybe more) into a form. That data is then stored in a database on a remote server. It can be accessed to send out mailings.
In short, this chapter explains how to design two kinds of forms:
- Forms that manage data in the browser (client-side)
- Forms that connect to scripts at a server (server-side)
In this chapter, you'll learn how to connect a form to an existing server script (but not how to program the scripts). I've also thrown in some tips on where you can find already-packaged server scripts to handle things like search forms, sign-up mailing lists, and discussion forums.
#24 Creating Jump Menus
One great example of a client-side form is a jump menu from which a visitor selects a page in your Web site from a pop-up menu. A jump menu works because script (in this case, JavaScript) acts on a form and effects an action (in this case, opening a new Web page) based on data the visitor entered into the form (the page the visitor chose from the jump menu). Dreamweaver creates jump menu forms and automatically generates the required JavaScript.
Jump menus are an efficient and attractive way to allow visitors to navigate your site. You can provide a long list of target links in a jump menu without using much valuable space on your Web page.
To create a jump menu, follow these steps:
- With a page open in the Document window, choose Insert > Form > Jump Menu. The Insert Jump Menu dialog opens.
- Use the Text field to name each menu item—enter text that will appear in the jump menu.
- In the "When selected, go to URL" field, either enter a URL for a link or use the Browse button to navigate to and select a file on your site.
- Define additional jump menu options by clicking the plus button in the dialog and entering new text and URLs. Repeat to enter as many jump menu options as you need. Delete an item from the jump menu by selecting it and clicking the minus button.
- To change the order of an item in the jump menu list, select the item and use the Up and Down arrow buttons in the dialog to move the selected item up or down in the list.
- After you define all the links in the jump menu, click OK to generate the menu. Test the menu in a browser (you can't test it in the Dreamweaver Document window because the jump menu works with JavaScript in a browser).
To edit an existing jump menu, you need to open the behavior that Dreamweaver created to control the jump menu. View the Behaviors panel (choose Window > Behaviors). Click the jump menu to select it. As you do, you will see Jump Menu listed in the second column of the Behaviors panel. Double-click it to reopen the Jump Menu dialog and edit the jump menu (Figure 24a).
)
Figure 24a Opening the Jump Menu dialog by double-clicking Jump Menu in the Behaviors panel.
The Jump Menu dialog looks just like the Insert Jump Menu dialog, and you can add, remove, or move menu items or change menu options in this dialog.