Section 10.5. Forms Tutorial

10.5. Forms Tutorial

In this tutorial, you'll build a simple newsletter sign-up form for The National Exasperator Web site.

---

Note: Before you begin building the page, you'll need to download the tutorial files from this book's Web site (www.sawmac.com/dw8). Once there, click the Tutorials link; then, click the link to the Forms Tutorial. The files download to your computer.When the files have downloaded and uncompressed, you should have a folder named DWForms on your hard drive, containing the Web pages and graphics needed for this tutorial. (If you're having difficulties, the Web site contains detailed instructions for downloading.)

---

10.5.1. Getting Started

You need to direct Dreamweaver's attention to the new Web site folder you've just downloaded. Full details of this process begin on Section 13.1.1, but here's the Reader's Digest version:

1. In Dreamweaver, choose Site New Site .

   The Site Definition window opens. Make sure the Advanced tab is selected.

2. In the Site Name field, type Forms .

   This is the name that Dreamweaver will use while you're working on this tutorial.

3. Click the folder icon next to the Local Root Folder field; browse to and single-click the folder DWForms , and click Choose. Click OK .

   You've just defined the site you'll be working on in this tutorial. Defining Web sites and using Dreamweaver's site management features are discussed in depth in Part Four of this book.

10.5.2. Inserting a Form and Creating a Structure

The first step to building a form is inserting a <form> tag. This tag encloses all of the different fields in the form and indicates where the form begins and ends. As noted earlier in this chapter, you can also insert other HTML elements, like text and tables, within the form. In fact, you'll be using a table to make this form look better:

1. Choose File Open . Double-click the file called signup .html in the DWForms folder .

   (If you have the Files panel open [Window Files], you can also just double-click the signup.html file in the panel to open it.) The page is partly designed already with a banner, sidebar, and footer.

2. Click in the empty white space below the headline Newsletter Signup. On the Insert bar, select the Forms option (see Figure 10-2) .

   The Insert bar now shows you the Forms icons you'll need.

3. Click the Form button on the Insert bar (see Figure 10-2), or choose Insert Form Form .

   A red, dashed rectangle appears in the document window, indicating the boundaries of the form.

4. In the Property inspector, type signup in the "Form name" field (Figure 10-15) .

   You've just named your form.

5. In the Action field, type http://www.nationalexasperator.com/signup.php .

   (Leave off the final period, as shown in Figure 10-15.)

   Figure 10-15. The Action property of a form is simply the URL for the program that processes it.

   

   A form's Action property identifies the address of the program that will process the form's submitted data. In this case, you've been spared the effort of writing (or hiring a programmer to write) the required form-processing software. Such a program already exists on the Web site whose address you've just specified, and it's waiting to process the form you're about to design.

   You may be creating your own form-processing programs if you're using Dreamweaver's dynamic Web-building tools described in Part Six. See the tutorial on Section 22.5 for an example.

6. Make sure POST is selected in the Method menu. Leave the Target and Enctype fields blank .

   The Method indicates how the form sends information to the form-processing program (see Section 10.2).

   Now you're ready to begin building a table to design your form.

7. In the document window, click inside the formanywhere inside the red, dashed lines. Choose Insert Table .

   The Insert Table dialog box opens. (See Chapter 7 for the full story on tables.)

8. Use the following settings for this table: 6 rows, 2 columns , width 100%, Border thickness 0, Cell padding 5, Cell spacing 0 (see Figure 10-16). Select None for Header, and leave the Accessibility information blank. Click OK .

   Dreamweaver pops your empty table onto the screen. Next, you'll add the labels and form elements to the table, and then add a little Cascading Style Sheet information to make it look beautiful.

Figure 10-16. Tables are an excellent way to organize form elements of various shapes . Also, see the box on Section 10.3.5, which describes how tables can bring order to an unruly form.

10.5.3. Adding Labels and Form Elements

Now that your table is in place, it's time to start adding the different parts of the form. Since text fields, radio buttons , menus , and other form elements aren't always self-explanatory, it's a good idea to add labels explaining the purpose of each element.

1. Click the top-left cell, and then type What is your Name ?

   This text identifies what your visitors should type into the text field you'll add in the next step.

2. Press Tab to move the insertion point to the next cell, and then click the Text Field button on the Insert bar (Figure 10-17) .

   Alternatively, you can choose Insert Form Text Field. If Dreamweavers Form Accessibility feature is on, the Input Tag Accessibility Attributes window appears. Because you've already added a label, you don't need to use this window. So click Cancel to close the Accessibility window (if it's shown up) and just insert the text field.

   ---

   Note: Dreamweaver doesn't make it easy to add a label to a form field in situations where the label and form field aren't next to each other. That's the case here where the labels and form fields reside in separate table cells (see the discussion regarding this problem on Section 10.3). Although you could click the "change the Accessibility preferences" link and turn off the "Form Objects" checkbox to make sure this window doesn't appear again, don't. You'll use this option to add a label to radio buttons in a few steps. If you want, you can add the HTML label tag another way, following a few additional steps as described in the Note on Section 10.5.3.

   ---

   Figure 10-17. Top: The Text Field button inserts , of course, a text field into your form.
   Bottom: The Property inspector as it looks when you've selected a text field.

   

3. Type name into the TextField box (Figure 10-17, lower left) .

   Every form element must have a name that describes the information it collects.

   ---

   Note: Most programs that process forms won't work correctly if the name of the form element differs from its programming. In other words, if you mistyped "name" in step 3 as "mame," the form-processing program won't work correctly. If, when you've finished this tutorial, the form response isn't what you expected, first check to make sure you named each form field exactly as described here.

   ---

4. Type 25 into the Char Width (character width) field .

   You've just specified, in characters , how wide the field will be. Setting a width does not limit the amount of text someone can type into it; it only controls the display of the field in the browser. You can also use CSS to set the width of a form field, which you'll do later in the tutorial.

   ---

   Note: Using a Label tag to indicate which textfor example, "Please enter your name"goes with which form field is often considered good practice. It isn't absolutely necessary, since your forms will still work without them, but the Label tag can help Web browsers identify the purpose of a particular form field and can help those who use special browsers such as screen readers to connect a label with a text field. Unfortunately, when using tables to put labels in one cell and form elements in another, Dreamweaver doesn't offer much help. Here's how you can do it yourself:First, add the text in one cell (as in step 1 earlier); next, add a form element, name it, and set any other properties using the Property inspector (steps 2, 3, and 4 earlier); then:That's all there is to it. You can click the Design button in the Document window to leave the code and continue with your form building.

   ---

5. In the left column of the table, click the second cell from the top and type What is your Email Address ? Press Tab, and then click the Text Field button on the Insert bar .

   Alternatively, choose Insert Form Text Field. If the Input Tag Accessibility Attributes window appears, click Cancel to dismiss it.

6. Click the cell just below the "email" question. Type Vote for your favorite boogeyperson . Press Tab; in the Insert bar, click the Radio Button button .

   Alternatively, choose Insert Form Radio Button. The Input Tag Accessibility Attributes window appears (if it doesnt, you can turn this feature on as described on Section 10.3.1).

7. In the Label box, type Big Foot . Click the "wrap with label tag" button, and select the "After form item" option. Click OK to insert the radio button and label .

   In this cell, you'll be adding three grouped radio buttons. Your visitors will be able to choose only one of the three options.

8. Select the newly inserted radio button. In the Property inspector, type vote in the Radio Button field and Big Foot in the "Checked value" field (Figure 10-18) .

   Figure 10-18. You can save time by copying the first button and then changing only the "Checked value" field.

   

9. Click to the right of the text "Big Foot." In the Insert bar, click the Radio Button object to insert a second button. In the Accessibility window that appears, type Loch Ness Monster in the Label box. The other options should already be set as in step 8, so click the OK button to insert the radio button .

   The button's added; you just need to tweak its settings.

10. Select the radio button and, in the Property inspector, type vote in the Radio Button field and Loch Ness Monster in the "Checked value" field .

    Radio buttons in the same group share the same Radio Button name; this is what prevents a visitor from selecting more than one button at a time.

11. Click to the right of the text "Loch Ness Monster." On the Insert bar, click the Radio Button button to insert the last button. Type El Chupacabra as the label, and then click OK to insert the button .

12. Select the radio button and, in the Property inspector, type vote in the Radio Button field and El Chupacabra in the "Checked value" field.

    Your three radio buttons are all set.

13. Choose File Save. Press F12 (Option-F12) to preview your page .

    Once in your browser, try out the radio buttons. Check to make sure you can only select one at a time. If you're able to select two or more buttons, you've probably typed slightly different names .

10.5.4. Adding a Menu and Submit Button

Only a few more elements are required to produce a fully functional form:

1. Return to Dreamweaver. Click in the left column cell just below the "Vote for your favorite boogeyperson" question. Type Where did you hear about the National Exasperator ?

   In the next step, you'll build a pull-down menu from which visitors can select a response.

2. Press Tab to jump to the next cell. On the Insert bar, click the List/Menu button (or choose Insert Form List/Menu). (Click the Cancel button on the Accessibility window.)

   Dreamweaver inserts a small box with a selection arrowa menuinto the cell.

3. In the Property inspector, type referral in the name field. Click the List Values button .

   The List Values dialog box appears (Figure 10-19). You'll use this box to add items to your menu.

   Figure 10-19. As you build your list of menu options, press Tab twice after each entrya shortcut that saves you from having to click the + button.

   

4. Type -- Select One -- .

   The first item on the list is actually an instruction, which lets your readers know what they need to do with the menu.

5. Press Tab .

   The cursor jumps to the Value column. As noted earlier, list items can have separate labels and values. If you don't specify a value, your form will simply send the selected label to the form-processing program. For this tutorial, you won't add a value.

6. Press Tab again to add an additional list item .

   You can click the + button in the dialog box, if you prefer.

7. Type Saw it on the newsstand , and then press Tab twice. Complete the list as shown in Figure 10-19 .

8. Click OK .

   You've just built a working menu. You'll find that it doesn't operate in Dreamweaver, however. You must preview the form in a Web browser to see the menu in action. All in good time.

9. Click in the left table cell, below the last question you added. Type Add any comments here .

   You'll add one last text field to the form, so that your visitors can submit their comments and suggestions.

10. Press Tab. On the Insert bar, click the Textarea button (see Figure 10-2). (Again, click Cancel on the Accessibility window.)

    Alternatively, you can choose Insert Form Textarea. Either way, Dreamweaver inserts a text box.

11. In the Num Lines (number of lines) field, type 4 .

    This setting controls how tall the text box appears on the Web page. It doesn't limit the amount of text that can be typed into it, however.

12. Click in the cell directly below this new text field. On the Insert bar, click the Button button. (Once again, dismiss the Accessibility window by clicking Cancel.)

    Don't confuse the Button button with a Radio Button; they're two different beasts (see Figure 10-2).

13. In the Property inspector, change the button's value to Sign Up ( Figure 10-21) .

    The default value is Submit , but since the value is also the label that appears on the button, you should add a more accurate description. (You don't need to change what Dreamweaver here calls "Button name," which also says "Submit." It doesn't show up on your Web page and isn't used by the form-processing program.)

    Figure 10-21. The Action property of a button tells a Web browser what this button should do.

    

14. Choose File Save .

    Congratulations. You've just created a fully functional Web form!

15. Press the F12 (Option-F12) key to preview the form .

    Go aheadfill it out (with bogus information, if you like). Click the Submit button when you're finished to see what happens. If you're online, your Web page sends the form information to the waiting form-processing program specified at the beginning of the form creation process. The program sends you back a Web page reflecting your entries, exactly as though you had built a professional, working Web site.

    If nothing happens, make sure the Action property of the Form is set correctly (see Section 10.5).

10.5.5. Styling the Form

At this point, the form is rather plain-looking. It would be nice if the text labels were a bit bolder and lined up with the form elements. Also, a few graphical toucheslike a line dividing the questions and some text formatting for the form elementswould add a lot. You'll use Cascading Style Sheets to do this:

1. Make sure the CSS Styles panel is open (choose Window CSS Styles); click the + button on the Styles panel to create a new style .

   Alternatively, you can choose Text CSS Styles New Style. Either way, the New CSS Style window opens. (For a refresher on creating styles, see Section 6.2.)

2. In the "Define in" menu, make sure global.css is selected, and then click OK .

   The CSS Style Definition window opens, ready for you to set formatting properties for the new style.

3. Under the Type category, set the font to "Verdana, Arial, Helvetica, sans-serif," the size to .8 ems, and the weight to "bold" (see Figure 10-23) .

   This sets the basic text-formatting options for the labels. Next, you'll make the text align to the right, so that the labels sit next to the form elements they describe.

   Figure 10-23. You can use CSS to set the font face, size, color , and other type properties for text that appears inside of a form field. When a visitor enters text into a field, the Web browser formats the text using those settings. This also applies to text as it appears inside menus and lists.

   

4. Click the Block category and choose "right" from the Text align menu .

   As things are now, the column of cells containing the labels takes up half the table. That's too much. You'll shrink that down to make the form fields more prominent.

5. Click the Box category, and in the Width box, type 200 .

   You'll apply this style to the table cells containing the labels. You can use CSS to set properties of table cellsincluding their width. In addition, you can use CSS to add a decorative border to the bottom of each of these cells.

6. Click the Border category and turn off the three "Same for all" boxes .

   You won't add a border to all sides of the cell, just the bottom.

7. For the bottom border properties, set the style to solid, the width to 1 pixel, and the color to #CCCCCC. Click OK to finish creating the style .

   You're finished with this style. Now it's time to apply it.

8. Select the five table cells containing the labels .

   Click in the top cell and drag to the last cell with a label, for example. (See Section 7.5.3 for more cell-selection techniques.)

9. From the Style menu in the Property inspector, choose formLabels (the style you just created) .

   The column of cells should get thinner; the text should become bold and should align to the right of the cell. In addition, though it's hard to see if the table outline is visible, a light gray line should appear at the bottom of each cell. The cells with the form elements could use a little help, too, so you'll apply an already created style to them.

10. Select the five table cells to the right of the column of labels, and from the Style menu in the Property inspector, select the formCell style .

    A light gray line appears under these cells as well, and the text in those cells changes to another font. Finally, you'll create a new style to add some pizzazz to the form elements themselves . You can style form elements just as you would text or other parts of a Web page. You'll change the font used inside of these form elements, as well as set their width and background colors.

11. Repeat steps 13 from earlier to create a new class style called formElement .

12. In the Type category, set the font to "Verdana, Arial, Helvetica, sans-serif."

    To make all the little boxes in your form a uniform width (they'll look more consistent that way), you'll set a specific width.

13. Click the Box category, and in the width box, type 200 .

    Now every form element to which you apply this style will be 200 pixels wide. Finally, you'll add a background color to make the form really jump out.

14. Click the Background category and set the Background Color property to #CCCCCC. Click OK to close the window and complete the style .

    Applying this groovy new style to your form is just a matter of selecting the form element and using the Property inspector.

15. Select the first text field, and from the Class menu in the Property inspector, select the formElement style .

    The text field grows to 200 pixels, takes on a gray background, and (although you can't see this in Dreamweaver) when you preview the page and type something in the field, you'll notice that the font has changed as well.

    ---

    Note: Mac owners previewing the page using Safari (version 1) won't see the background color. Only Safari 2 supports background colors for form elements. However, Firefox on the Mac and Internet Explorer 5 for the Mac will display the form field correctly.

    ---

16. Repeat step 16 for the email field, pull-down menu, and comment box .

    When you're done, preview the page in a Web browser (press F12 [Option-F12]) and see all the changes you just made.

10.5.6. Validating the Form

Now that you have a working form, you'll add the finishing touches. Since this form will be used by visitors to sign up for an email newsletter, a couple of pieces of information are crucial, including the name and email address of the person who's subscribing. Using one of Dreamweaver's behaviors, you can make sure that no one submits a form without these two important pieces of information:

1. Return to Dreamweaver. Click anywhere on the form's red line boundary to select it .

   Check to make sure the Property inspector says Form Name in the upper-left corner. Alternatively, you can click anywhere inside the table and then use the tag selector at the bottom of the document window to select the formjust click the tag labeled <form#signup>.

2. Choose Window Behaviors .

   This opens Dreamweaver's Behaviors panel, which you can use to add interactive effects to a Web page. You'll probably find it in the lower-left corner of your screen.

3. From the + menu, choose Validate Form .

   The Validate Form window opens, listing the three text fields in your form.

4. Click the first item in the list (name). Turn on the Required checkbox (see Figure 10-24) .

   "Required" means that your visitors can't submit the form unless they type something into this field.

   Figure 10-24. Use Dreamweaver's Validate Form behavior to make sure your visitors don't submit empty forms. You can require visitors to fill out specific text fields and even check to see if the information is in an appropriate formata number or email address, for example.

   

5. Click the second item in the list (email) .

   For the email field, you'll not only specify that it's mandatory, but also that its contents must look like an email address, complete with an @ symbol.

6. Turn on the Required checkbox. Then, from the Accept group of radio buttons, select "Email address." Click OK .

7. Choose File Save. Press F12 (Option-F12) to preview and test the page .

   See Figure 10-25 for the results.

Figure 10-25. Once again, test your form (top). Pretend you're a particularly clueless or malevolent Web visitorleave the Name or Email address empty, for example, and then click Sign Up to see what happens. Then, once you enter some valid info , see what happens when you submit the form. If all goes well, the page that appears after you submit the form should look like the illustration at bottom. If you like, you can compare your work with the finished page online at www.sawmac.com/dw8/tutorials/.