Using a Table to Format a Form

---

 Habitat Alert site   When your form requires many form objects, using a table helps you create a nicer looking layout through alignment and spacing options.

Caution 

Remember to add the form tags first, then place your table inside them. A form can become dysfunctional if the opening and closing form tags are incorrectly placed.

In this exercise, you'll build a form to allow the site visitor to subscribe to the Habitat Alert newsletter from the Act section of the site.

1. Open act/register.htm from the Site panel.

2. Place your cursor into the main content area, just below the introductory text.

3. Choose Insert ® Form. Be sure to enable viewing of Invisible Elements in the View Options to see the red lines that indicate the beginning and ending form tags.

4. Add a table with 1 row, 2 columns at 90% width. Set padding and border to zero and spacing to 5px.

5. Click into the first cell and use the Tag selector to right-click (Control-click) the <td> tag and set its class to formheadings, which will set the cell's horizontal alignment to right and format the text you add. Now type Last Name: in this cell. Tab to move to the next cell.

6. Choose Insert ® Form Objects ® Text Field. Alternatively, you can click the Form tab in the Insert bar and use the Text Field object button.

7. With the text field selected, use the Property inspector to set its name to LastName. Set its Char Width to 20. Char Width controls the width of the form object but doesn't restrict the number of characters that can be added.

   Note 

   The width of form objects depends upon the browser and computer platform and system of the user. Typically, Netscape text fields are wider than those of Internet Explorer. Be sure to test if width is an issue in your design.

8. Tab to create a new row. Type First Name: and tab to the next cell. Add another text field, set its Char Width to 20, and name it FirstName.

   Tip 

   By setting the CSS formatting for the first row's label cell, any subsequent rows added include the same formatting. That's why it's best to create only one row at first.

9. Tab to add a new row. Add the label Email:, then tab and add a text field named Email, set to 20 characters.

10. Tab to add a new row. Add the label Street Address:, then tab and add a text field named StreetAddress, set to 20 characters.

11. Tab to add a new row. Add the label State/Province:, then tab and add a list/menu form object named StateorProvince.

    Tip 

    In this case, you can either build the required drop-down menu with all the states and provinces required, or you can use the Macromedia Dreamweaver Exchange to download and install an extension that adds this type of menu to the Insert menu. We recommend U.S. State Codes by Rabi Sunder Raj. You can find it at the exchange (http://macromedia.com/exchange/ dreamweaver) by typing state into the search field. You must be a registered member to download from the exchange.

    Cross-Reference 

    See Chapter 43 for more about using extensions in Dreamweaver MX.

12. Tab to add a new row. Add the label Zip/Postal Code:, then tab and add a text field named ZiporPostalCode, set to 11 characters.

13. Tab to add a new row. Add the label Country:, then tab and add a text field named Country, set to 20 characters.

    Finally, it's time to add the all-important form submit button! A form needs a button to trigger the action field. A reset button is useful, too.

14. Tab to add a new row. In the first cell, add a form button and label it Register. Don't worry about naming this form object as it is not required.

15. Tab to the next cell and add another button. Click the Reset option, then re-label the button Clear Form.

16. Save your page and select the form tag using the Tag selector.

    Cross-Reference 

    A form requires an action and method to work with a server-side technology. In this case, you'll set these in Chapter 48 to reference a ColdFusion template you'll build in that section.

---