Dreamweaver CS5: The Missing Manual

Forms Tutorial

In this tutorial, you’ll build a simple appointment sign-up form for the Chia Vet website (see Figure 12-37). To make sure the folks at Chia Vet get the right information, you’ll use the Spry form validation tools.

Note

You’ll need to download the tutorial files from www.sawmac.com/dwcs5/ to complete this tutorial. 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_DWCS4 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 encloses all the fields within the form, and indicates where the form begins and ends. As noted earlier in this chapter, you can insert other HTML elements, too, like text elements and <div> tags.

1. Choose File→Open; click the Site Root button (at the bottom-left of the open file window). Double-click the file appointment.html to open it.

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

2. Click the empty white space directly below the paragraph that begins with ...