- 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
Part 2: Adding Form Elements and Tweaking the Form's Look
With the table structure complete, you can begin inserting the labels and form elements.
Inserting Labels
Before inserting and customizing the assorted form elements, let's insert the descriptive labels. Beginning with the top row, insert the following text labels, one label per row, in the left column:
NOTE
To quickly move to the next row after typing in each label, press the down arrow key on your keyboard.
- Department:
- First name:
- Last name:
- E-mail address:
- Company name:
- Address:
- City:
- State:
- Zip:
- Industry:
- Company size:
- Newsletters:
- Comments:
When you're done, your table will look like the one in Figure 7. (Don't worry if the column that holds labels enlarges; you'll fix that later.)
)
Figure 7 The form's table, after inserting one text label per row in
the left column.
With the labels in the appropriate cells, it's time to begin inserting the various form elements.
Single-Line Text Fields
Single-line text fields (commonly referred to as just text boxes) will be used to collect information such as a person's name, address, and e-mail address.
Inserting a Text Field
Now you'll insert the firstname text field. The first step is to specify where you want the text field to appear. Click in the cell just to the right of the First Name label, as shown in Figure 8. A blinking cursor appears.
)
Figure 8 To insert a text field, begin by positioning the cursor where you want it to appear.
Next, select the Forms panel from the Objects palette, as shown in Figure 9.
)
Figure 9 Switching to the Forms panel in the Objects palette.
The Objects palette displays the form objects. Click the Insert Text Field icon, as shown in Figure 10.
)
Figure 10 The Insert Text Field icon, located in the Object palette's Forms panel.
A Dreamweaver dialog box appears asking, "Add form tag?" Check the box that says, Don't Ask Me Again. Then click No (you'll add the form tags later).
The text field appears in the cell directly to the right of the First Name label, as shown in Figure 11.
)
Figure 11 A text field inserted into a table's cell.
Modifying Text Field Properties
After a text field is inserted, you can modify its properties. The properties for a text field include the following:
Textfield—The text field's name, used for scripting, such as with form-validation code.
Char Width—How wide you want the text field to appear onscreen.
Max Chars—The maximum character you want to allow a user to type.
Type (Single Line, Multiline, or Password)—By default, single line is selected. The Single Line option is used for names, addresses, telephone numbers, and so on. The Multiline option is used to allow your users to type more than one line of text, such as a paragraph. The Password option displays asterisks (*) instead of text.
Init Value—This allows you to specify what the text field should say when it loads (for example, Enter Your Name Here).
Click on the text field to select it. The Property inspector displays the current properties for the text field. (If you don't see the Properties inspector, click Window, Properties. It usually appears toward the bottom of your screen.)
In the Property inspector, modify each property for the text field. When you're done, it will look like the one in Figure 12.
- Textfield: firstname
- Char Width: 30
- Max Chars: 30
- Type: Single line
- Init Value:
)
Figure 12 The Property inspector with the firstname text field properties
set.
Inserting the Remaining Text Fields
Now that you know how to add a text field and modify its properties, follow the steps above to insert the following single-line text fields:
Last name:
- Textfield: lastname
- Char Width: 30
- Max Chars: 30
- Type: Single line
- Init Value:
E-mail address:
- Textfield: emailaddress
- Char Width: 30
- Max Chars: 55
- Type: Single line
- Init Value:
Company name:
- Textfield: companyname
- Char Width: 30
- Max Chars: 30
- Type: Single line
- Init Value:
Address:
- Textfield: address
- Char Width: 30
- Max Chars: 50
- Type: Single line
- Init Value:
City:
- Textfield: city
- Char Width: 30
- Max Chars: 30
- Type: Single line
- Init Value:
State:
- Textfield: state
- Char Width: 2
- Max Chars: 2
- Type: Single line
- Init Value:
Zip:
- Textfield: zip
- Char Width: 10
- Max Chars: 10
- Type: Single line
- Init Value:
After you've inserted the text fields above, your "contact us" form will look like Figure 13.
)
Figure 13 The "contact us" form with all the single-line text
fields inserted.
Multiline Text Fields
A multiline text field allows your users to type more than one line of text (such as a paragraph). In this next exercise, you'll add a multiline text field in the cell to the right of the Comments label.
First, click in the cell to the right of the Comments label. Next, click the Insert Text Field icon in the Object palette's Forms panel. Select the text field you just added and apply the following properties in the Property inspector:
- Textfield: comments
- Type: Multiline
- Char Width: 40
- Num Lines: 6
- Wrap: default
When you're finished, click anywhere on the Web page. Your multiline text field will look like the one in Figure 14.
)
Figure 14 The multiline text field inserted into the "contact
us" form.
Radio Buttons
Radio buttons are commonly used when you want to simultaneously display a number of items and allow a user to select one of them. In this section, you'll display six radio buttons with industry labels.
Modifying the Table Structure: Splitting Cells
Before you add radio buttons, you need to modify the table to make the presentation of radio buttons as attractive as possible. You're going to use Dreamweaver's Split Cell feature to turn a single cell into six individual cells.
Right-click inside the cell directly to the right of the Industry label. A context-sensitive menu appears; select Table, Split Cell.
A Split Cell dialog box appears. Make the following selections:
- Split Cell Into: Columns
- Number of Columns: 3
Click OK. Your cell will be split into three columns.
Next, you'll split each of the three cells into two rows, for a total of six cells. Right-click in one of the three cells. From the context-sensitive menu, select Table, Split Cell.
In the Split Cell dialog box, make the following selections:
- Split Cell Into: Rows
- Number of Rows: 2
Click OK. Your cells will look like Figure 15.
)
Figure 15 Splitting one cell into two rows.
Repeat the steps above for each of the other two columns until you have six total cells, as shown in Figure 16.
)
Figure 16 Splitting the Industry cells is complete, giving you six total
cells.
Now you can insert the radio buttons.
Inserting Radio Buttons
Click in the first of the six Industry cells, as shown in Figure 17.
)
Figure 17 Selecting the first cell to insert a radio button.
Select the Forms panel in the Objects palette, if it's not already selected. Next, click the Insert Radio Button icon, as shown in Figure 18.
)
Figure 18 The Insert Radio Button icon.
A radio button appears in the first cell. After the radio button, type the word Accounting, as shown in Figure 19.
)
Figure 19 The first Industry radio button completed.
Modifying Radio Button Properties
Select the Accounting radio button; the properties for the radio button appear in the Property inspector. Modify the properties as follows (and as shown in Figure 20):
- RadioButton: industry
- Checked Value: accounting
- Initial State: Unchecked
Here are a few notes on the properties:
Every radio button in the Industry section will have the RadioButton property set to industry. This ensures that only one can be selected.
The Checked Value is what separates one industry radio button from the rest.
)
Figure 20 Setting the properties for the Accounting radio button.
Finish inserting the remaining five radio buttons (one per cell) with the following labels:
- IT
- Manufacturing
- Retail
- Software
- Web
Remember, the RadioButton property for radio is industry. The Checked Value property should be the same as the label, in all lowercase letters.
Once complete, your six radio buttons should look like Figure 21.
)
Figure 21 The six Industry radio buttons complete.
Practice inserting radio buttons; split the cell to the right of the Company Size label into three cells. Then insert three radio buttons:
- Less than 50
- RadioButton: companysize
- Checked Value: small
- Initial State: Unchecked
- 51 to 250
- RadioButton: companysize
- Checked Value: medium
- Initial State: Unchecked
- Over 250
- RadioButton: companysize
- Checked Value: large
- Initial State: Unchecked
When you're done, the Company Size section of the form will look like the one in Figure 22.
)
Figure 22 The Company Size radio buttons.
Check Boxes
Check boxes, like radio buttons, are used to display a number of items at the same time. Unlike radio buttons, however, check boxes are used when you want to allow someone to select one or more of the items in a group. This works perfectly for the Newsletters section.
In the Newsletters section, you're going to display nine newsletters that a user can subscribe to. The nine newsletters, listed alphabetically from left to right, are:
- ColdFusion
- Dreamweaver
- Fireworks
- Flash
- Freehand
- GoLive
- Illustrator
- ImageReady
- Photoshop
Above the nine newsletters, you want to display the sentence, "I want to subscribe to the following newsletters:".
Below the newsletters, you want to display two links, separated by a pipe symbol: Check all | Uncheck all.
Creating the Table Structure
Begin by splitting the cell to the right of the Newsletters label into three rows. Next, split the middle of the three cells into three columns. Lastly, split each of the three middle columns into three rows (this is where the nine check boxes and newsletter labels will go).
When you're done, your Newsletters section will look similar to the page in Figure 23.
)
Figure 23 The Newsletters section.
In the top Newsletters cell, enter the sentence, "I want to subscribe to the following newsletters:".
In the bottom Newsletters cell, enter the text Check all | Uncheck all.
Inserting Check Boxes
Click in the cell below the "I want to subscribe" text. From the Object palette's Forms panel, click the Insert Check Box icon, as shown in Figure 24.
)
Figure 24 The Insert Check Box icon.
A check box appears in the cell. Click on it to select it; the Property inspector displays its properties. Change the properties to match those below:
- CheckBox: newsletters
- Checked Value: coldfusion
- Initial State: Unchecked
Next, insert the label ColdFusion next to the check box, as shown in Figure 25.
)
Figure 25 The ColdFusion check box.
Finally, insert the rest of the check boxes and their respective labels:
Dreamweaver
- CheckBox: newsletters
- Checked Value: dreamweaver
- Initial State: Unchecked
Fireworks
- CheckBox: newsletters
- Checked Value: fireworks
- Initial State: Unchecked
Flash
- CheckBox: newsletters
- Checked Value: flash
- Initial State: Unchecked
Freehand
- CheckBox: newsletters
- Checked Value: freehand
- Initial State: Unchecked
GoLive
- CheckBox: newsletters
- Checked Value: golive
- Initial State: Unchecked
Illustrator
- CheckBox: newsletters
- Checked Value: illustrator
- Initial State: Unchecked
ImageReady
- CheckBox: newsletters
- Checked Value: imageready
- Initial State: Unchecked
Photoshop
- CheckBox: newsletters
- Checked Value: photoshop
- Initial State: Unchecked
When complete, your Newsletters section will look like the one in Figure 26.
)
Figure 26 The Newsletters section of the "contact us"
form.
In Part 3 of this article, you'll add the JavaScript code to active the Check All and Uncheck All links. For now, let's continue inserting the form fields.
List (Drop-Down) Menus
Unlike radio buttons, which take up more real estate as you add additional buttons, a drop-down menu can contain as many items as you want, and it still takes up the same amount of space. In this exercise, you're going to insert a drop-down menu at the top of the form, to allow the user to select a department to contact.
Inserting a Drop-Down Menu
Begin by clicking inside the cell directly to the right of the Department label, at the top of the form. Next, select the Object panel's Forms palette, if it's not already selected. From the Forms palette, click the Insert List/Menu icon, shown in Figure 27.
)
Figure 27 The Insert List/Menu icon.
The drop-down menu appears very small because it does not contain any items in it yet.
Modifying the Drop-Down Menu Properties
With the drop-down menu inserted, you can set its properties. Begin by clicking on the drop-down menu, to ensure that it's selected.
As with all the other form elements, the Property inspector displays the drop-down menu's current properties. Make the following changes:
- List/Menu: department
- Type: Menu
Next, click the List Values button in the top-right corner. The List Values dialog box appears. Click the + sign to begin entering the first menu item.
Under the Item Label text box, type Customer Service. Press the Tab key and then type in the value customerservice. Your List Values dialog box will look like the one in Figure 28.
)
Figure 28 The List Values dialog box with the first menu item
entered.
Continue entering the remaining items below. Each time you want to enter a new item, click the + icon or press the Tab key after typing in the value.
After you have entered these items, your List Values dialog box will look like the one in Figure 29.
)
Figure 29 The List Values dialog box, with all items entered.
Changing the Order of Menu Items
Let's say that you would like the Choose a Department menu item to appear at the top of the list of items. To move the item, click on the item and then click the up arrow, as shown in Figure 30, until the item appears at the top.
)
Figure 30 Using the up arrow to change the order of menu items.
Click OK to close the List Values dialog box.
Setting the Initially Selected Item
When the form loads, you want the Choose a Department menu item to automatically appear in the drop-down menu box. To do this, select it in the Property inspector's Initially Selected list box, as shown in Figure 31.
)
Figure 31 Selecting the initially selected item.
The Submit Button
One of the last items to insert is the Submit button. Click inside the last cell, directly below the Comments multiline text field.
In the Object palette's Forms panel, click the Insert Button icon, shown in Figure 32. The Submit button appears. Leave the properties as they are.
)
Figure 32 The Insert Button icon, located in the Object palette's
Forms panel.
Form Tags
Now you need to insert the <form> and </form> tags. These tags serve as a form's "container," telling the Web browser that all form elements fall between them. You're going to manually insert the form tags around both tables of the "contact us" page. You do this instead of placing them inside the table or between the tables because of spacing issues. Even though the form tags don't appear on the Web page, they affect its appearance. The <form> tag adds additional space above it.
For example, if you inserted the <form> tag between both tables, additional spacing would appear, as shown in Figure 33.
)
Figure 33 The placement of the <form> tag affects spacing
of visible page elements.
The best bet is to place the <form> tags around the outermost tables on your page so that your forms are not affected. To insert the <form> and </form> tags in the correct place, first, click View, Code and Design, to ensure that your Document window is displaying both Code view and Design view. Next, click anywhere in the top table, where the company's name (SomeCompany.com) appears. Click the <table> tag at the bottom of the Document window. The entire top table is selected. In Code view, you'll also see that Dreamweaver highlighted all of the table's HTML code.
Click just above the highlighted HTML (and below the <body> tag). Type the following HTML, as shown in Figure 34.
<form name="contactus" method="post" action="">
)
Figure 34 Inserting the <form> tag and relevant
properties.
Next, scroll to the bottom of the page in Code view and insert the </form> tag between the </table> and </html> tags, as shown below:
</table> </form> </html>
Making Table Modifications
The "contact us" form looks pretty good, although a few changes need to be made. The first change you need to make is to align each label in the left column toward the top of its cell. That way, labels for multirow elements (such as the Newsletters and Comments labels) won't appear in the center.
Position your mouse just above the left column of the table, near the Department label. When you see a black arrow pointing down (see Figure 35), click your mouse button. All the cells in the left column will be selected.
)
Figure 35 Selecting all the cells in a column.
The Property inspector displays the properties for the selected table's cells. Select Top from the Vert drop-down menu.
Click anywhere on the page; you'll notice that all of the labels are now aligned toward the top of their respective cell.
The next item that needs to be taken care of is the spacing between the Industry, Company size, Newsletters, and Comments form-field elements. Currently, they all seem to blend together. One way to address this problem is to add additional spacing between each section. The easiest way to do that is to insert empty rows.
Right-click in the Zip cell and then select Table, Inset Rows or Columns.
The Insert Rows or Columns dialog box appears. Make the following selections and then click OK:
- Insert: Rows
- Number of Rows: 1
- Where: Below the Selection
A blank row appears between the Zip and Industry form elements.
To insert a row between the Industry and Company size form elements, right-click on Company Size and then select Table, Insert Rows. A blank row appears. Right-click on the Company Size cell again; this time, select Table, Insert Rows or Columns. Make the following selections and then click OK:
- Insert: Rows
- Number of Rows: 1
- Where: Below the Selection
The last place to insert a blank row is between the Newsletters and Comments form elements. Right-click in the Comments cell and then click Table, Insert Row.
Your table now has some space between elements. If you want, you could insert horizontal lines between each one, but let's leave this one like this for now.
Let's move on to some scripting issues.