To insert a single-line text field in Dreamweaver, you can use any of the following methods:

When you insert a text field, the Property inspector, when displayed, shows you the available attributes (see Figure 13-2). You measure the size of a text field by the number of characters it can display at one time. You can change the length of a text field by inserting a value in the Char Width text box or by declaring a width value for an applied CSS style; the latter is, by far, the recommended approach. By default, Dreamweaver inserts a text field approximately 20 characters wide. The "approximately" is important here because the final size of the text field is ultimately controlled by the browser used to view the page. Unless you limit the number of possible characters by entering a value in the Max Chars text box, the user can enter as many characters as desired, but not all the characters will necessarily be visible at one time; the text scrolls horizontally in the box as the user types.

Figure 13-2. The text field of a form enables the user to type any required information.

The Init Value text box on the Text Field Property inspector is used to insert a default text string. The user can overwrite this value, if desired. Should you need to display some text but not allow users to enter their own text, choose the Read-Only option. This property will most likely come into play only when you're displaying dynamic data already recorded that you don't want to change.

You can also, with the check of the Disabled option, lock your text field from entry and change its appearance. Browsers interpret the disabled property differently: Internet Explorer grays out the text by reducing the opacity, whereas Firefox adds a light-blue background color. To control the appearance, use a style rule with an CSS attribute selector — set in square brackets — like this:

input[disabled] {
  background-color: white;
  color: #ccc;
  border: solid 1px #ccc;
}

Typically, any text entered into text fields is displayed as you expect — programmers refer to this process as echoing. You can turn off echoing by selecting the Password option in the Text Field Propertty inspector. When a text field is designated as a password field, all text entered by the user shows up as asterisks or dots.

Use the password field when you want to protect the user's input from prying eyes (just as your PIN is hidden when you enter it at an ATM, for instance). The information entered in a password field is not encrypted or scrambled in any way, and when sent to the Web application, it is received as regular text.

Only single-line text fields can be set as password fields. You cannot make a multiline <textarea> tag act as a password field without employing JavaScript or some other programming language.

When you want to give your users a generous amount of room to write, you can expand not just the width of the text area, but also its height. Dreamweaver gives you the following options for creating a multiline text area:

Figure 13-3 shows a typical multiline text field embedded in a form.

Figure 13-3. The Multi line option of the Text Field Property inspector opens up a text area for more user information.

The text area that is initially created is approximately 18 characters wide and 3 lines high, with horizontal and vertical scroll bars. You control the width of a multiline text area by entering a value in the Char Width text box of the Text Field Property inspector, just as you do for single-line text fields. The height of the text area is set equal to the value in the Num Lines text box. As with the default single-line text field, the user can enter any amount of text. Unlike the single-line text field, in which you can restrict the number of characters that can be input through the Max Chars text box, you cannot restrict the number of characters the user enters into a multiline text area.

Constructing Neat Forms

Although they are especially good when you are working on a larger, complex form, I find that tables and forms are made for each other — even in this age of CSS. Besides the speed of layout, another advantage that tables offer is the capability to right-align text labels next to your text fields; it's worth noting that the align attribute for the <td> tag is still valid HTML. The top form in the following figure uses preformatted text to get different-sized form fields to line up properly, whereas the bottom form in the figure uses a table.

Combining different-sized text fields on a single row — for example, when you're asking for a city, state, and ZIP Code combination — can make the task of lining up your form even more difficult. Most often, you spend a fair amount of time in a trial-and-error effort to make the text fields match. Be sure to check your results in the various browsers as you build your form.

Tables are just the beginning stage in creating a clean, easy-to-read form. For greater control, be sure to read "Styling Forms with CSS" later in this chapter.

When you place a multiline text field on a form, you can specify how text entered into that field should wrap. You indicate this using the Wrap field in the Property inspector. You can select one of the following options:

Another option when creating multiline text fields is to preload the text area with any default text you like. Enter this text in the Init Val text box of the Text Field Property inspector. When Dreamweaver writes the HTML code, this text is not entered as a value, as it is for the single-line text field, but rather goes in between the <textarea> . . . </textarea> tag pair.

Grouping Form Controls

In desktop applications, you may be used to seeing related controls grouped together, with a thin border around them. You can achieve a similar effect in your HTML forms by enclosing the related form elements within the <fieldset> . . . </fieldset> tag pair, as shown in the following code:

<fieldset>
  <legend>Address</legend>
    <label>Street <input type="text" name="street" ></label>
    <label>City <input type="text" name="city" ></label>
    <label>State <input type="text" name="state" ></label>
    <label>Zip <input type="text" name="zip"></label>
</fieldset>

In this example, the <fieldset> tags group the text fields, and the <legend> tag creates a label describing the group of controls. In the most recent browsers, the legend appears as a label above the control group, as shown in the following figure.

In Dreamweaver's Code view, you can add the <fieldset> and <legend> tags by selecting a set of existing controls that you'd like to group and then clicking the Fieldset button in the Forms category of the Insert panel. If you are in Design view when you click the Fieldset button, Dreamweaver automatically switches to the split view and makes Code view active. However, it is best to apply the <fieldset> tag in Code view so you can be sure you have correctly selected all the HTML tags to be grouped.

Note that the <fieldset> tag is not supported in all browsers, but Dreamweaver renders it just fine.

Checkboxes are often used in a "Select All That Apply" type of section, when you want to enable the user to choose as many of the listed options as desired. You insert a checkbox in much the same way you do a text field: Select or drag the CheckBox object from the Insert panel or choose Insert

Like other form objects, checkboxes can be given a unique name in the Checkbox Property inspector (see Figure 13-4). If you don't provide a name, Dreamweaver inserts a generic one, such as checkbox4.

In the Checked Value text box, fill in the information you want passed to a program when the user selects the checkbox. By default, a checkbox starts out unchecked, but you can change that by changing the Initial State option to Checked.

Radio buttons on a form provide a set of options from which the user can choose only one. If a user changes his or her mind after choosing one radio button, selecting another one automatically deselects the first choice. Dreamweaver gives you the following options for inserting radio buttons:

Figure 13-4. Checkboxes are one way of offering the Web page visitor any number of options to choose from.

Unlike checkboxes and text fields, each radio button in the set does not have a unique name — instead, each group of radio buttons has a name. If you give the entire set of radio buttons the same name, browsers can assign one value to the radio button set. That value is determined by the contents of the Checked Value text box in the Property inspector. Figure 13-5 shows two different sets of radio buttons. The figure shows the Property inspector for one of the radio buttons in the osRadio group, on the right. In this example, each button in the group is assigned the name osRadio.

To designate the default selection for each radio button group, you select the particular radio button and make the Initial State option Checked instead of Unchecked. In the form shown in Figure 13-5, the default selection for the osRadio group is Mac OS X.

Figure 13-5. Radio buttons enable a user to make just one selection from a group of options.

Building a Form, Part 1

In this Technique, you create a form that eventually incorporates most of the form elements. You add the form to the page, the table to hold the form elements, and the first of the form objects: text fields and radio buttons.

For this Technique, make sure the Accessibility options are disabled by opening Edit

1. In the Files panel, switch to the Dreamweaver Bible working site that you created previously.

   

2. Go to Techniques13_Forms and open the file forms_start.htm.

3. Place your cursor at the end of the first paragraph under the Tell Us What You're Looking For heading and press Enter (Return) to create a new line.

4. In the Insert panel, switch to the Forms category and click the Form object.

5. With your cursor inside the red form outline, change to the Common category and choose Table.

6. When the Insert Table dialog box opens, insert a 6-row, 2-column table that is 400 pixels wide with 0 for border thickness.

   

7. Select all the cells in the first column and, from the Property inspector's Style list, choose formLabel. The formLabel CSS rule makes the content in the designated cells bold and right-aligned.

8. Place your cursor in the first cell, first column and enter I want to: . Be sure to leave a space after the colon to add separation between the label and the form elements.

9. Switch back to the Forms category in the Insert panel and drag a Radio Button into the first row, second column.

10. With the radio button still selected, enter buyRentRB into the Name field of the Property inspector and buy in the Value field.

11. Move your cursor to the right of the radio button and add the text Buy.

12. Repeat Steps 9–11 to add a second radio button. Use the same name (buyRentRB), a different value (rent), and a corresponding label (Rent).

13. In the second row, first column, enter the text I can afford up to: . Again, be sure to leave a space after the colon to add separation between the label and the form elements.

14. From the Insert panel's Forms category, drag a Text Field into the adjacent cell.

15. With the text field selected, enter affordText in the Property inspector's Name field.

16. Save your page.

In the next Technique, you complete the form, adding the remaining form elements.

You can create an entire set of radio buttons at one time using the Radio Group command. When you select the Radio Group button from the Forms category of the Insert panel, or choose Insert

Follow these steps to set up your radio button group in the Radio Group dialog box:

Figure 13-6. Use the Radio Group dialog box to create an entire set of radio buttons at one time.

A drop-down menu should be familiar to everyday users of computers: The menu is initially displayed as a single-line text box with an arrow button at the right end; when the button is clicked, the other options are revealed in a list or menu. (Whether the list pops up or drops down depends on its position on the screen at the time it is selected. Normally, the list drops down, unless it is close to the bottom of the screen.) After the user selects one of the listed options and the mouse is released, the list closes, and the selected value remains displayed in the text box.

Insert a drop-down menu in Dreamweaver as you would any other form object, with one of the following actions:

With the List/Menu object inserted, make sure the Menu option (not the List option) is selected in the Property inspector, as shown in Figure 13-7. You can also name the drop-down menu by typing a name in the Name text box; if you don't, Dreamweaver supplies a generic "select" name.

Figure 13-7. Create a drop-down menu by inserting a List/Menu object and then selecting the Menu option in the List/Menu Property inspector.

The HTML code for a drop-down menu uses the <select> . . . </select> tag pair surrounding a number of <option> . . . </option> tag pairs. Dreamweaver gives you a straightforward user interface for entering labels and values for the options on your menu. The menu item's label is what is displayed on the drop-down list; its value is what is sent to the server-side processor when this particular option is selected.

To enter the labels and values for a drop-down menu — or for a scrolling list — follow these steps:

If you haven't entered a value for every item, the server-side application receives the label instead. Generally, however, it is a good idea to specify a value for all items.

You can preselect any item in a drop-down menu so that it appears in the list box initially and is highlighted when the full list is displayed. Dreamweaver enables you to make your selection from the Initially Selected menu in the Property inspector. The Initially Selected menu is empty until you enter items through the List Values dialog box. You can preselect only one item for a drop-down menu.

A scrolling list differs from a drop-down menu in three respects. First, and most obvious, the scrolling list field has up and down arrow buttons, rather than an option arrow button; and the user can scroll the list, showing as little as one item at a time, instead of the entire list. Second, you can control the height of the scrolling list, enabling it to display more than one item — or all available items — simultaneously. Third, you can enable the user to select more than one item at a time, as with checkboxes.

A scrolling list is inserted in the same manner as a drop-down menu — through the Insert panel by choosing Insert

Enter items for your scrolling list just as you do for a drop-down menu, by starting with the List Values button in the Property inspector and filling in the List Values dialog box. Figure 13-9 shows a sample list box, as it appears in the Document window.

Figure 13-9. Unlike menus, scrolling lists can show more than one item on the screen at a time.

By default, the Selections checkbox for Allow Multiple is cleared in the List/Menu Property inspector. When you enable multiple selections (by selecting the Allow Multiple checkbox), the user can select more than one item in the list by using two keyboard modifiers, the Shift and Ctrl (Command) keys:

Other than the highlighted text, no acknowledgment (such as a checkmark) appears in the list. As with drop-down menus, the Web designer can preselect options by highlighting them in the Initially Selected menu. Use the same techniques with the Shift and Ctrl (Command) modifier keys as a user would.

Keep in mind several factors as you are working with scrolling lists:

<option value="oatmeal">Oatmeal Stout</option>

to the following:

<option value="oatmeal">Oatmeal Stout
&nbsp;&nbsp;&nbsp;</option>

Building a Form, Part 2

Now you're ready to complete the form started earlier in this chapter.

For this Technique, make sure the Accessibility options are disabled by opening Edit

1. In the Files panel, re-open the forms_start.htm file you previously worked on.

2. In the first column of the third row, enter this label: I need this many bedrooms: . Be sure to leave a space after the colon to match the other labels.

3. From the Insert panel's Forms category, drag a List/Menu object into the second column of the third row.

4. In the Property inspector's Name field, enter roomList.

5. Click List Values in the Property inspector.

6. When the List Values dialog box opens, enter the following Item Label/Value pairs:

   Item Label	Value
   1	1
   2	2
   3	3
   4	4
   5+	5+

   Click OK when you're done to close the dialog.

7. From the Initially Selected list in the Property inspector, choose the first value, 1.

   

8. Place your cursor in the first column of the next row and enter the label I need: .

9. From the Insert panel, drag a checkbox object into the second column of the same row.

10. In the Property inspector name field, enter laundryCB.

11. Move to the right of the checkbox, add a space and enter the label Laundry Room; press Shift+Enter (Shift+Return) to create a line break.

12. Repeat Steps 9–11 twice more to insert one checkbox with the name garageCB and labeled Garage and another named viewsCB and labeled Views.

    To adjust the position of the associated label, you'll need to change the vertical alignment of the table cell.

13. Place your cursor next to the I need: label and, from the Property inspector's Vert list, choose Top.

14. In the second-to-last row, first cell, enter the label My special needs are: .

15. From the Insert panel, drag a Textarea object into the second column of the same row.

16. In the Property inspector's Name field, enter needsArea.

17. Drag a Submit button from the Insert panel to the second column in the last row.

18. In the Property inspector's Value field, enter Send Info.

    

19. Save your page.

After you've inserted your Jump Menu object, you can modify it in one of two ways: through the standard List/Menu Property inspector or through the Jump Menu behavior. Whereas the List Property inspector uses a List Value dialog box, editing the Jump Menu behavior opens a dialog box similar to the one used to insert the Jump Menu object.

To alter the items in an existing jump menu via the List/Menu Property inspector, select the jump menu and click the List Values button. In the List Values dialog box, the jump menu labels are on the left and the URLs are on the right. You can add, move, or delete items as you would with any other list.

If you'd prefer to work in the same environment as you did when creating the Jump Menu object, go the Behaviors panel route. Select the jump menu. Then, from the Behaviors panel, double-click the Jump Menu action. The Jump Menu dialog box opens — it's identical to the Insert Jump Menu dialog box except that the Go button option is not available.

The Dreamweaver jump menu is activated immediately whenever a user makes a selection from the list. So why would you want a Go button? The Go button, as implemented in Dreamweaver, is useful for selecting the first item in a jump menu list. To ensure that the Go button is the sole means for activating a jump selection, you need to remove an attached behavior. Select the jump menu item, open the Behaviors panel, and delete the Jump Menu event.

The generic Go button is a nice convenience, but it's a little, well, generic. To switch from a standard Go button to a graphical Go button of your choosing, follow these steps:

A Submit button sends the form to the specified action (generally the URL of a server-side program or a mailto address) using the noted method (generally post). A Reset button clears all the fields in the form. Submit and Reset are both reserved HTML terms used to invoke specific actions.

A Command button permits the execution of functions defined by the Web designer, as programmed in JavaScript or other languages.

To insert a button in Dreamweaver, follow these steps:

When working with Command buttons, it's not enough to just insert the button and give it a name. You have to link the button to a specific function. A common technique is to use JavaScript's onClick event to call a function detailed in the <script> section of the document:

<input type="BUTTON" name="submit2" value="yes"
oznClick="doFunction()">

Figure 13-11. You can choose an action and a label for a button through the Button Property inspector.

HTML doesn't limit you to the browser-style default buttons. You can also use an image as a Submit, Reset, or Command button. Dreamweaver has the capability to add an image field just like other form elements: Place the cursor in the desired position and choose Insert

When the user clicks the picture that you've designated as an image field for a Submit button, the form is submitted. Any other functionality, such as resetting the fields, must be coded in JavaScript or another language and triggered by attaching an onClick event to the button. This can be handled through the Dreamweaver behaviors, covered in Chapter 11, or by hand-coding the script and adding code for the onClick event to the button.

Figure 13-12. Each flag in this page is more than an image; it's an image field that also acts as a Submit button.

In fact, when the user clicks a graphical button, not only does it submit your form, but it passes along the x, y coordinates of the image. The x coordinate is submitted using the name of the field with an .x attached; likewise, the y coordinate is submitted with the name of the field with a .y attached. Although this latter feature isn't often used, it's always good to know all the capabilities of your HTML tools.

Another technique is involved if you want to include more graphical buttons than a single Submit button on your form. Because only one image field can be used as a Submit button, a standard image is inserted, and JavaScript handles the programming chores required for submitting or resetting the form. An advantage to this technique is that the image can even be set up as a rollover, meaning that the image changes as the user moves the mouse over the button.

To use an image for a Submit or Reset button, follow these steps:

When passing information from a form to a CGI program, the programmer often needs to send data that should not be made visible to the user. The data could be a variable needed by the CGI program to set information on the recipient of the form, or it could be a URL to which the server program redirects the user after the form is submitted. To send this sort of information unseen by the form user, you can use a hidden form object.

The hidden field is inserted in a form much like the other form elements. Place your cursor in the desired position and choose Insert

The hidden object is another input type, just like the text, radio button, and checkbox types. A hidden variable looks like the following in HTML:

<input type="hidden" name="recipient" value="[email protected]">

As you would expect, this tag has no representation when it's viewed through a browser. However, Dreamweaver does display a Hidden Form Element symbol in the Document window. You can turn off the display of this symbol by deselecting the Hidden Form Field option from the Invisible Elements category of Preferences.

The file input type, which enables any stored computer file to be attached to the form and sent with the other data, is rarely used. Formerly, it was used primarily to enable the easy sharing of data. The file input type has now been largely supplanted by modern e-mail methods, which enable files to be attached to messages.

The file field is inserted in a form much like the other form elements. Place your cursor in the desired position and choose Insert

The <form> tag is a containing element that, like the <div> tag, is not rendered by default. Both tags, in fact, can be styled with CSS — you can even position a form on the page via CSS declarations. Browser support varies for some of the more esoteric CSS properties applied to the form tag, but more common attributes such as background color and border are rendered properly in most cases. Best of all, if CSS does not support certain attributes, these attributes are just ignored and the form renders plainly.

Frequently, a Web page contains only a single form. In these situations, styling the <form> tag itself will have the desired results. For example, this CSS rule gives the entire form a bright orange background and a blue border:

form {
    background: #FF9900;
    border: thin solid #0000FF;
    padding: 10px;
}

Padding is added to move the form elements in from the edges, as shown in Figure 13-14.

Figure 13-14. Apply CSS coloring to the form to make it stand out on the page.

Should your page contain more than one form and you want to style each one differently, create a CSS ID selector for each form. In this situation, choose the Advanced selector in the New CSS Rule dialog box and enter a unique ID — such as form#topform or form#bottomform — in the Selector field. Also set the ID of the form tag when using this method.

One way in which the <form> and <div> tags differ in regard to CSS is in the matter of inheritance. Elements within a form do not inherit the CSS properties of the form, but elements within a <div> tag do inherit the div's CSS attributes. You must, therefore, take another route for styling all the text fields in a given form. The best way to affect multiple form elements all at once is to style the <input> tag. You may recall that the <input> tag is used to create text fields, radio buttons, checkboxes, and Submit buttons.

For example, this CSS rule gives all the input elements a uniform background color as well as a specific color, font, and size for the text fields:

input {
    background-color: #F5F5F5;
    color: #660099;
   font: 10px Verdana, Arial, Helvetica, sans-serif;
   }

CSS styles the text fields for initial text as well as text entered by the user, as shown in Figure 13-15, as previewed in Dreamweaver's Live View.

Figure 13-15. Keep the text in your text fields looking like the rest of your page through CSS styling of the input tag.

One of the best uses for CSS and text fields is setting the width. This method is far more flexible and responsive than using the Char Width field on the Property inspector for each individual text field. It is best to set the width on a CSS class rather than alter it directly in the CSS rule for the input tag. Why? The width setting not only affects all the single-line text fields, but it also alters checkboxes and radio buttons — which are also input tags. After the CSS rule is defined, set the class of a selected text field from the Property inspector.

The select list/menu object is composed of two tags: <select> and <option>. The <select> tag is the overall container for the list items; use <select> to style the width, typeface, and font size of all drop-down lists on the page uniformly. Individual list items can be styled by setting a class on the separate option tags. Although this operation must be performed by hand and is somewhat tedious, it does open the door to many possibilities.

If you have a very long drop-down list that includes a wide range of items organized by category, with judicious CSS styling, main category headings can be in one color and subitems in another, as shown in Figure 13-16.

Figure 13-16. CSS classes for menu items must be applied by hand to separate <option> tags.

A form is more than a collection of text fields and checkboxes; labels play an equally important role in form organization and usability. Form labels are often applied in one of two ways. The standard technique is to place most of the labels in a single column of a table, with the form elements in another. Designers are also increasingly using the <label> tag as a means of enhancing accessibility. A Dreamweaver CSS methodology is available for whichever route you take when labeling your forms.

In a situation where all the labels are arranged in a table column, it's best to create a CSS class for your labels and apply it to the <td> tags. The most efficient way to do this is to first select the column containing the labels, and then choose the desired class from the Style list on the Property inspector. Dreamweaver applies the selected class to each of the <td> cells in the column.

If your layout uses <label> tags, CSS control is even easier. Add a specific CSS style for the <label> tag to create a uniform appearance for all your labels. Note that you may still need to adjust the dimensions of the label column separately because setting the width in CSS for the <label> tag has no effect.

Two other form-related tags — <fieldset> and <legend> — are available for CSS styling. As described earlier in this chapter in the sidebar "Grouping Form Controls," the two are used together to visually associate related form elements. Style the <fieldset> tag to alter the outlining border or add padding from the edge of the border. Change the <legend> style when you want to give it a separate background color and/or border, as shown in Figure 13-17.

Figure 13-17. Style the <fieldset> and <legend> tags to really make them stand out from a form with a colored background.

Want to spotlight the interactivity of a form? CSS includes a pseudo-element selector (so called because it is valid only when an element is in a particular state) that takes effect when a form element is selected. The CSS selector is :focus and it works with <input>, <select>, and <textarea> tags.

To create a :focus selector, follow these steps:

Preview the page in a compatible browser such as Mozilla Firefox, Internet Explorer 7 or better, Safari, and so on to experience the CSS changes (see Figure 13-18).

Figure 13-18. Text in a selected field is shown in bright red and bold, thanks to the :focus selector.