Section 18.2. Adding Form Elements

18.2. Adding Form Elements

Click inside the first cell in your form's table, and go to the Insert panel. Choose the form element that you want to insert. You have several options, as Table 18-1 shows.

Table 18-1. Common form elements in Dreamweaver

Insert-panel object	Creates	Best for
Text Field	Single-line, multiline, or password text field	Inputting text
Textarea	Multiline text field	Inputting text
Checkbox	Checkbox	A short set of options where the visitor may select none, one, or any
Radio Group	Radio buttons	A short set of options where the visitor may select one and only one
List/Menu	List or menu	A long set of options where the visitor may select none, one, or any (list); a long set of options where the visitor may select one and only one (menu)
Button	Submit or Reset button	Submitting the form (Submit button); resetting the form (Reset button)

18.2.1. Inserting Text Fields

Looking back at the form sketch in this example, the first item is a text field, so click the Text Field object in the Insert panel, as in Figure 18-7. When you do, the Input Tag Accessibility Options dialog box appears, as Figure 18-8 shows.

Figure 18-7. The Text Field object's icon

Figure 18-8. Setting the label and accessibility options for the text field

BEST BET

When you're laying out a form inside a table structure, attach the label of a form field using the for attribute.

In the Label field, type the label from your form sketch, and under Style, choose the option to attach the label tag using the for attribute. When you're laying out the form in a table, this option works the best. Also supply an access key and the tab index for this field. The tab-index value should be 1 here, because this is the first element in the form.

TIP

You know from Chapter 17 that you shouldn't really set tab-index values until your page is finished, but supply them for your form elements anyway, just to determine the order in which they should be selectable. You may have to come back and revise the tab-index values once you have finished the page to make room for other selectable elements like links, but at least this way your form fields are already in the proper order, and you can simply change their tab-index values by the same standard amount. For instance, if you end up having eight links before the first item in the form, change the tab index of the first form field to 9 (1 + 8), the tab index of the second form field to 10 (2 + 8), the tab index of the third form field to 11 (3 + 8), and so on.

TIP

Set the access key of a form field to match the first letter of the most important word in the label. So for the label "Type your name or alias," a good choice for the access key is nn for name.

Click OK, and Dreamweaver adds the text field to the table, as Figure 18-9 shows.

Now click the text field itself, and drag it into the table cell next door, as Figure 18-10 shows. Leave the label in its current table cell.

Figure 18-9. Dreamweaver adds the text field to the table

Figure 18-10. Drag the text field to the adjacent table cell

Click the text field to select it, go to the Property Inspector, and fill out the attributes of this element, as Figure 18-11 shows:

Figure 18-11. Setting the attributes of the text field

• In the field under the TextField label, type a short but descriptive name for the element.

• In the Char Width field, type the width of the element on screen (in characters, not pixels).

• In the Max Chars field, type the maximum number of characters that the visitor may enter into this field. This value doesn't have to be the same as the character width, although it's generally helpful to give the same value for both.

• Under Type, choose Password if you want the text field to conceal the characters that the visitor types.

• In the Initial Val field, type the text that should appear in the field by default (if any).

18.2.2. Inserting Text Areas

A text area is a multiline text field. To insert a text area, click the Textarea object on the Insert panel, as Figure 18-12 shows. Dreamweaver opens the Input Tag Accessibility Options dialog box again. Fill out the label and accessibility options for this field, as Figure 18-13 shows.

Figure 18-12. The Textarea object's icon

Figure 18-13. Setting the accessibility options for the text area

Drag the text area into the adjacent table cell. Then select the text area and fill out the attribute fields in the Property Inspector as in Figure 18-14:

• Under the TextField label, type a short but descriptive name for the text area.

• In the Char Width field, type the width of the element on screen (in characters, not pixels).

  Figure 18-14. Supplying the attributes for the text area

  

  BEHIND THE SCENES

  By default, the same character width applied to a single-line text field and a multiline text area produces form fields of two different sizes. You can help to minimize this inconsistency by applying the same font and type size to these fields with CSS.

  
  

• In the Num Lines field, type the number of lines visible at once in the text area.

  TECHTALK

  A text area is a multiline text field.

  
  

• In the Max Chars field, type the maximum number of characters that the visitor may enter into this field. This value doesn't have to be the same as the character width, although it's generally helpful to give the same value for both.

• The Wrap menu controls the setting for automatic word wrapping, or moving incomplete words from the end of one line to the beginning of the next. Under Wrap, choose Off if you don't want automatic word wrapping in the text area. Choose Virtual if you want word wrapping on screen but not in the form submission. Choose Physical if you want word wrapping on screen and in the form submission.

TECHTALK

Word wrapping is moving incomplete words from the end of one line to the beginning of the next.

18.2.3. Inserting Checkboxes

You add checkboxes one at a time to your form. Instead of inserting them into the left column of your form table and then moving them to the right, you can insert them directly into the right column.

To insert a checkbox, click the Checkbox object on the Insert panel, as Figure 18-15 shows, which gives you the familiar Input Tag Accessibility Options dialog box shown in Figure 18-16. The caption for a checkbox works better when it comes after the form element, so be sure to choose the After option under Position. Click OK to add the checkbox to the document window.

Figure 18-15. The Checkbox object's icon

Figure 18-16. Positioning the caption after the checkbox

Now select the checkbox, and go to the Property Inspector to fill in the attributes as in Figure 18-17:

• In the Checkbox Name field, type a name for the checkbox. For your convenience, all the checkboxes of a particular type can have the same name.

• In the Checked Value field, type the value that the form submits for this checkbox if the visitor happens to check it.

• Under Initial State, choose Checked if you want the browser to check the checkbox by default when the page loads.

Figure 18-17. Supplying the attributes for the checkbox

To insert the next checkbox in the table cell, hold down the Shift key and press Enter or Return to insert a line break rather than a new paragraph. This gives you the insertion point that you want. When you finish, your document window looks something like Figure 18-18.

Figure 18-18. The checkbox options are separated by line breaks

18.2.4. Inserting Radio Groups

Unlike checkboxes, which you add one at a time, you can insert an entire group of radio buttons simultaneously. To do so, choose an insertion point in the right column of your table, and click the Radio Group object in the Insert panel, as Figure 18-19 shows. Dreamweaver opens the Radio Group dialog box, as Figure 18-20 shows.

Figure 18-19. The Radio Group object's icon

Figure 18-20. Building the group of radio buttons and their attributes

In the Name field, type brief but descriptive name for the radio buttons. All the buttons in the group get the same name.

Under Radio Buttons, supply labels and values for all the buttons in the group. The label is the text that appears on screen, while the value is what goes into the form submission when the visitor selects that particular radio button. Use the plus and minus buttons to add and remove radio buttons from the group and use the arrow buttons to rearrange their order.

Under Lay Out Using, choose either Line Breaks or Table. Line breaks are easier to modify when you want the radio buttons to sit side by side rather than in a column, but the choice is yours.

Click OK, and Dreamweaver adds the radio group to the document window, as Figure 18-21 shows.

Figure 18-21. Dreamweaver adds the radio group to the document window

To remove the line break after the top radio button's label, position the cursor at the end of the line, and press the Delete key to get the result shown in Figure 18-22.

Figure 18-22. Without the line break, the radio buttons sit adjacent

BEST BET

A radio group should always have a preselected choice, but a group of checkboxes doesn't require one.

Every radio group should have a preselected option, so select the radio button that you want to make the default choice, go to the Property Inspector, and choose Checked as the initial state, as Figure 18-23 shows.

Figure 18-23. Setting one of the radio buttons to be preselected

18.2.5. Inserting Lists and Menus

The difference between lists and menus is subtle but important. Both are for displaying sets of options. The difference is that a list shows several options at once, which encourages the visitor to make multiple selections, while a menu shows one option at a time, which encourages the visitor to select one option only.

BEST BET

A list shows several options at once, encouraging multiple selections. A menu shows one option at a time, which encourages single selections.

To insert a list or menu, choose an insertion point in the left column of your form table, and click the List/Menu object in the Insert panel, as Figure 18-24 shows. As you probably expect, Dreamweaver calls up the Input Tag Accessibility Attributes dialog box. Fill out the dialog box, as Figure 18-25 shows.

Figure 18-24. The List/Menu object's icon

Figure 18-25. Supplying the label and accessibility options

Click OK, and Dreamweaver inserts the form field on the page in menu format. Drag the menu to the adjacent table column. Then select the menu, and go to the Insert panel. Type a brief but descriptive name for the element in the field under List/Menu, and choose the List option if you want this item to appear in list format.

To supply the choices for the list or menu, click the List Values button, and the List Values dialog box in Figure 18-26 appears. For each option, type a label, which is the text that appears on screen in the list or menu, and a value, which is the text that the form submits when the visitor chooses this particular item. Add and subtract menu items with the plus and minus buttons, and change the order of the items with the arrow buttons.

Figure 18-26. Building the options set for the list or menu

TIP

Instructions that appear at the top of the menu, such as "Select an option," and the divisions or category headings that appear in the middle of a long menu go in the Item Label column of the List Values dialog box. You don't have to give a value for these items.

Click OK, and Dreamweaver adds the items to the list or menu. If you're creating a menu, then in the Initially Selected field on the Property Inspector, choose the item that the browser should preselect. Normally, this is the first item in the menu, as Figure 18-27 shows.

Figure 18-27. Choosing an option to be preselected in the menu

18.2.6. Inserting Buttons

Buttons come in three types, but the first two are the most relevant to the current discussion. These are the Submit button and the Reset button. A Submit button sends off the fields of the form and a Reset button restores them to their default values.

TECHTALK

A Submit button sends off the fields of a form and a Reset button restores them to their default values.

To insert a button, click the Button object on the Insert panel, as Figure 18-28 shows, and fill out the Input Tag Accessibility Attributes dialog box as in Figure 18-29. You don't need to specify a separate text label, because you'll add the label directly to the button once you've created it.

Figure 18-28. The Button object's icon

Figure 18-29. You don't have to give a separate text label for the button

TIP

Choose s for the access key of a Submit button and choose r for the access key of a Reset button.

Click OK to insert the button. Now select it in the document window, and then fill out the Property Inspector as Figure 18-30 shows:

• Under Action, to create a Submit button, choose Submit Form. To create a Reset button, choose Reset Form.

• Type the label of the button in the Value field. The labels don't have to be Submit and Reset, although to keep with the s and r theme of your access keys, you might choose similar-sounding labels such as Send Form and Restore Form.

Figure 18-30. Supplying the attributes of the button

Your form should definitely include a Submit button. If it doesn't, the visitor has no way of sending you the form input! A Reset button, on the other hand, is optional. If you want both types, simply insert another button in the table cell.

When you're finished, notice that the cell to the right is empty, as in Figure 18-31. There's no reason to keep the right table cell, so you can join the cells of this row. Here's how:

Figure 18-31. There's nothing in the table cell to the right of the one with the buttons

1. Click anywhere inside the cell with the buttons.

2. Go to the Tag Selector at the bottom of the document window, and choose the <tr> tag to select the entire row. (The <tr> tag stands for "table row.")

3. Go to the Property Inspector, and click the merge icon shown in Figure 18-32.

   Figure 18-32. The merge icon

   

Dreamweaver merges the selected cells, as Figure 18-33 shows.

Figure 18-33. Dreamweaver merges the table cells