Dreamweaver CS6: The Missing Manual

Forms Tutorial

In this tutorial, you’ll build a simple reservation form for Cafe Soylent Green’s web-site (skip ahead to Figure 12-38 if you want to see the final result). To make sure the folks at the Cafe get all the information they need to book a reservation, you’ll use Spry form validation tools.

Note

To complete this tutorial, you need to download the practice files from www.sawmac.com. See the Note on Note for more details.

Once you download the tutorial files, open Dreamweaver and define a new site as described on Setting Up a Site. Name the site Forms, and then select the Chapter12 folder (inside the MM_DWCS6 folder). (In a nutshell: Choose Site→New Site. In the Site Definition window, type Forms into the Site Name field, click the folder icon next to the Local Site Folder field, navigate to and select the Chapter12 folder, and then click Choose or Select. Finally, click OK.)

Insert a Form and Add a Form Field

The first step in building a form is inserting a <form> tag. This tag will enclose all the fields within a form, and indicates where the form begins and ends. As noted earlier in this chapter, you can insert other HTML elements into the form, too, like text elements and <div> tags.

1. Choose File→Open. Double-click the file reservation.html in the Chapter12 folder to open it.

   If you have the Files panel open (Window→Files), just double-click reservation.html. The page is partly designed, with a banner, sidebar, and footer.

2. Click the empty white space directly below the headline ...