Building Web Sites All-in-One For Dummies® (80 page)

Read Building Web Sites All-in-One For Dummies® Online

Authors: Claudia Snell

BOOK: Building Web Sites All-in-One For Dummies®

3.34Mb size Format: txt, pdf, ePub

Testing the form

After creating a form, test it prior to uploading it to your client's Web server. When you test a form, make sure that all the fields and elements in your form function perfectly. Enter data in each text field and use the other elements in your form, such as radio buttons, check boxes, and list boxes. Click the Submit button to make sure that the data transmits properly. Depending on the action, this might require being online or using a local testing server.

Adding Elements to Your Form

It would be difficult to get the job done if the only form elements available were a text field and a button. Fortunately, that's not the case. You can flesh out a form by adding check boxes, radio buttons, and list boxes. And then there are form elements that are so shy, they stay in hiding.

Password fields

If you're creating a form that requires a user to submit confidential information, such as a password to a Web site, you can preserve the anonymity of the information by creating a text field in the form and assigning Password to the Type parameter (in the Property inspector) of the Text Field form object. Listing 1-1 shows the code for a password text field.

Listing 1-1: A Password Text Field

Creating a password field is identical to creating a text field except that you choose Password as the field type. If you're creating a password field in Dreamweaver, choose InsertâFormâTextField and then choose the Password option in the Type section of the Property inspector. (See Figure 1-9.) When information is entered in the password field, it appears as asterisks or filled-in circles on the computer monitor.

If you're creating a form that requires a user to submit confidential information, such as a password to a Web site, you want to preserve the anonymity of the information. If you specify a field in your form as a password field, you can prompt users' Web browsers to replace each character they type with an asterisk or a filled-in circle.

Figure 1-9:
Choosing the Password option for a text field.

Hidden fields

Hidden fields are very useful form elements. They contain information pertinent to the form, such as the form method, but they don't need to be seen by the person filling in the form â hence their name, hidden. When you add a hidden field to a form, you add pertinent information to the form, such as the e-mail address of a form recipient. A hidden field has a name that indicates the purpose of the hidden field. Listing 1-2 shows the first few lines of code for a form used on a caterer's Web site.

Listing 1-2: A Form with Hidden Fields

The form is used in conjunction with a mail-forwarding script on the site's Web server. Typically, scripts reside in the site's cgi-bin folder. The script calls for the recipient's e-mail address. This is stored in the first hidden field. The script also redirects the visitor to another page after submitting the form. This information is stored in the second hidden field. The third hidden field contains the subject that appears in the e-mail that is sent to the recipient.

If you use an application like Dreamweaver, you don't have to write all the code. In Dreamweaver, choose InsertâFormâHidden Field. Fill in the blanks in the Property inspector, and Dreamweaver writes the code for you.

Textarea form objects

Extra, extra, tell us all about it in a big-ol' text box. If your client wants a space in a form for his visitors to leave copious amounts of information, a text box â also known as a
text area
â is the ideal solution. You can specify the width of the text box and the number of lines in the text box, which in essence, sets the width and height of the text box. You can create a text box that is 80 characters wide and 15 lines tall by adding the code in Listing 1-3 to your form.

Listing 1-3: Code to Add a Text Area to a Form

If you use Dreamweaver to create your Web pages, the solution is much simpler than writing the code yourself. Just choose InsertâFormâTextarea. By default, a textarea field contains multiple lines, and text wraps to the next line when a user enters text that exceeds the width of the field. After you add the field to the document, specify the following parameters in the Property inspector:

â¢
Char Width:
Sets the maximum number of characters that can be displayed in the field. This number can be less than Max Chars, which specifies the maximum number of characters that can be entered in the field. The default value is
45
.

â¢
Init Val:
Displays an initial value in the field when the form loads. This parameter is useful for displaying instructions to the user. The user then selects the text and types the desired information into the field.

â¢
Class:
Allows you to stylize the text entered in the text field, using a style from the document or an attached CSS.

â¢
Disabled:
The resulting text field is grayed out when displayed in a Web browser. Text characters entered in the Init Val field are displayed.

â¢
Read Only:
The resulting text field is displayed in the document. Text characters entered in the Init Val field are displayed, but visitors can't enter text into the field.

A text box has a scroll bar that enables the user to scroll up or down if the entered text exceeds the text area. Figure 1-10 shows a text field in a form with the scroll bars on full alert.

Figure 1-10:
Use the scroll bar if you need to enter more text in a field.

Multiple choice types (check box and radio buttons)

As a rule, people like it when you give them the opportunity to make a choice. Visitors to Web sites like choices, too; that's why some Web genius invented the navigation menu. But we're straying from the topic at hand, which is forms. When you want Web visitors to make a choice, they can easily do so by selecting a check box (or boxes) or a radio button. The value for the form element is transmitted with the form data.

Check boxes:

When you add check boxes to a form, you give the visitor an option of making a choice â or choices â by clicking one or more check boxes. This is an efficient way of laying out a form when you require possible multiple responses to a question. You add the question to the form, and then list the answers, with a check box next to each answer. The value for the check box tells the form recipient what the visitor's answer or choice is. Listing 1-4 shows the code needed to add several check boxes to a form with a multiple-choice question.

Listing 1-4: Check Off, Check On!

Will you require any of the following services? Check all that apply.

If you use Dreamweaver to create your HTML forms, you add a check box to a document by choosing InsertâFormâCheckbox. After you add the element to the form, you set the parameters in the Property inspector. Check boxes have the following parameter choices:

â¢
Checkbox Name:
By default, Dreamweaver assigns the name
checkbox
, followed by a number if you add more than one to a form. Unless Doug is working on a drop-dead simple form with less than four check boxes, he renames the check box to something more descriptive. Each check box must have a unique name and cannot contain spaces or special characters.

â¢
Checked Value:
This is the value that's transmitted when the form is sent. In other words, this is the answer to your question, or the choice, depending on the type of form you're designing.

â¢
Initial State:
This determines whether the check box is checked or unchecked when the form loads in the user's browser.

â¢
Class:
This allows you to apply a class from a CSS style sheet to the check box.

Check box groups

If you need to give visitors the option of choosing multiple responses for a form option, you create a check box group. For example, if you're creating a questionnaire and you want to know what publications a visitor reads, you create a check box group, where the name of the group is something like
pubsRead
, and the choices are the names of magazines. The visitor can then select more than one option when responding to the query. In previous versions of Dreamweaver, this was tedious work because you had to give each button the same name in the Property inspector. In Dreamweaver CS4, though, you can create a check box group in a Jumping Jack Flash by doing the following.

1.
Open an existing document in Dreamweaver and position your cursor where you want the check box group to appear.

2.
Choose Insert
â
Form
â
Checkbox Group.

The Checkbox Group dialog box appears. (See Figure 1-11.)

Figure 1-11:
Create a check box group here.