Building Web Forms with Dreamweaver 4
- Part 1: Building the Table Structure
- Part 2: Adding Form Elements and Tweaking the Form's Look
- Part 3: Adding Functionality and Validating the Form
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The most compelling reason to use Macromedia Dreamweaver is its powerful group of visual tools. With these tools, you can position and tweak Web page elements without having to learn HTML or JavaScript coding. In this in-depth, multipart article, you'll become skilled at using a number of Dreamweaver's built-in tools to build a very common requirement for a Web site: the "contact us" form.
Here's an overview of what's covered in this multipart article:
Part 1: "Building the Table Structure"—In this section, you'll use Dreamweaver's visual tools to create the table structure, add cell padding and spacing, and insert a background color to set the form apart from the rest of the Web page.
Part 2: "Adding Form Elements, Tweaking the Form's Look"—In Part 2, you'll learn how to work with all the form elements: single-line text fields, multiline text areas, check boxes, radio buttons, list menus (a.k.a. drop-down menus), the Submit button, and the <form> container. Lastly, you'll learn how to fine-tune the table's layout to make it look as nice as possible.
Part 3: "Adding Functionality and Validating the Form"— In the last section, you'll get your hands dirty in Dreamweaver's Code view, writing a JavaScript function that allows a user to select or deselect all newsletters with one click. You'll also learn how to use Dreamweaver's built-in Validate Form behavior to ensure that required fields are filled out, check for a valid e-mail address, and more.
Part 1: Building the Table Structure
The first step in building a Web form is to create the table structure. The table structure is the foundation and structure that dictates how the form will appear on the screen.
But before you can build the table, you need to know what the form consists of. Let's start by understanding what information you need to collect.
The "Contact Us" Form
The "contact us" Web form you'll build in this article will collect the following information:
- Department
- First name*
- Last name*
- E-mail address*
- Company name
- Address
- Industry
- Company size
- Newsletters
- Comments*
* The fields with asterisks are required fields. Later in this article, you'll learn how to use Dreamweaver's behaviors to ensure that the required fields have been filled in. (Note: Normally a department field would be required, but for the sake of this tutorial, you won't be validating it.)
Downloading the Files
In this article, you're going to build the "contact us" form with the "labels on the side" style.
You'll begin with a basic Web page that has a table at the top with a fictitious company's logo and some text in it. You can download this Web page (contact-us.html) and the Cascading Style Sheet file for it by clicking on the links below:
Creating the Table
To position the form elements exactly where you want them, you're going to use a table.
Begin by opening the contact-us.html page in Dreamweaver 4. Open the Objects palette (if it's not already open) by clicking Window, Objects from the Dreamweaver document window. In your Objects palette, select the Common panel, as shown in Figure 1.
)
Figure 1 Select the Common panel at the top of the Objects
palette.
After you select the Common panel, your Objects palette displays a number of icons, as shown in Figure 2.
)
Figure 2 The Objects palette with the Common panel highlighted.
In just a second, you're going to insert a table for your form elements. You want the table to appear directly below the top table, without any spaces. To achieve this, begin by clicking just to the right of the table in the contact-us.html file, as shown in Figure 3. A large blinking cursor appears.
)
Figure 3 To insert a table below an existing table, without space in
between, click to the right of the existing table.
Back in the Object palette's Common panel, click on the Insert Table icon, as shown above in Figure 2.
The Insert Table dialog box appears. Fill in each field as follows:
- Rows: 14
- Columns: 2
- Width: 575 pixels
- Border: 0
- Cell padding: 0
- Cell spacing: 10
When your Insert Table dialog box matches the settings above, click OK in the top-right corner. After you click OK, a 14-row, 2-column table appears in Dreamweaver's Design view, as shown in Figure 4.
)
Figure 4 A 14-row, 2-column table, with 10 pixels of cell spacing, just
after insertion.
Setting the Background Color
Setting the background color of the table allows you to set apart the form elements from the rest of the page. To set the background color of a table, you need to modify the table's BG COLOR property.
To do that, first click anywhere in the new table you just added. Next, select the entire table. You can do this quickly by clicking on the <table> tag, located at the bottom-left corner of the document window, as shown in Figure 5.
)
Figure 5 Selecting an entire table by clicking the appropriate HTML tag at
the bottom of the document window.
When you click the <table> tag, the Property inspector dynamically changes, displaying the current properties for the table selected. With the Property inspector displaying the table's properties, change the table's background color by typing in #F3F8FF, as shown in Figure 6, and then press Enter.
)
Figure 6 Changing the background color of a table.
The table should now have a light blue background color.
Now that you've got the basic skeleton in place, you'll add the form elements.