Chapter 19

Fields-The Building Blocks of Forms

• What Every Form Needs
  • Form Fields
  • Form Field Names
  • Buttons
  • Form Handlers
• What Form Fields Do
• Requesting Single-Line Text Input
• Requesting Multiline Text Input
• Requesting Input from Checkboxes
• Requesting Input from Radio Buttons
• Providing a Menu of Choices
• Inserting Buttons on Forms
• Using Image Form Fields
• Using Hidden Form Fields
• Workshop Wrap-Up
  • Chapter Summary
  • Next Steps
  • Q&A

In Chapter 18, "Adding Interactivity-Forms the Easy Way," you learned how to generate a form using the FrontPage Form Page Wizard. The Form Wizard created the form by prompting you with a series of questions. The form fields and the layout were handled automatically.

What if you want to create your own layout, add additional form fields, or edit the content of the forms that you designed with the wizard? This chapter shows you how to do that. You learn how to work with the elements that make up a form.

What Every Form Needs

Every form has some basic elements within it. Form fields are the areas where users enter data. Each form field has a name so that the data can be arranged by category. Every form has a button that users press to submit information to your site. Finally, every form also has a form handler-a set of instructions that tells your server how to process the information that users submit.

Form Fields

When you ask users a question or need input from them, they enter their responses in a form field. For example, the form fields shown in Figure 19.1 are textboxes and radio buttons. You insert a form field on your page with the Insert | Form Field command.

Figure 19.1 :Users enter data on your form with form fields.

Whenever you insert a form field on a page, you automatically create a form. If you have the Show/Hide button on the Standard toolbar enabled, the form fields are surrounded by a dashed box. This shows you the area of the page where the form appears.

Form Field Names

Each form field is assigned a name through its respective Properties box, as shown in Figure 19.2. The name of the field is passed first to the form handler and then to you through the use of name/value pairs-that is, the name you assign to the form field and the value the user enters.

Figure 19.2:Each form field has a name that is matched with the user's value. Together, they make up a name/value pair.

Buttons

Unless you place a button on your page, the form cannot do anything. A form must contain, at a minimum, a button that the user presses to submit the information to you. Most forms include a second button that enables the user to reset or clear the data from the form fields already completed. These buttons are shown in Figure 19.3.

Figure 19.3:Every form must contain at least one button, which is used to submit the information. A reset button is optional, although usually included.

Form Handlers

After you design a form, you need to assign a form handler to it. You do that with the Form Properties dialog box, shown in Figure 19.4. The form handler resides on your Web server. It accepts the data that the user enters on the form and processes it in some way. Then it passes the results on to you.

Figure 19.4:Every form requires a form handler. It is assigned in the Form Properties dialog box.

What Form Fields Do

HTML enables you to place several different types of form fields on a page. There are fields for a single line of text or for multiple lines or paragraphs. You also can use check- boxes, radio buttons, drop-down menus, and pushbuttons. You can even use an image as a pushbutton. Each type of form field requests an input from the user.

Requesting Single-Line Text Input

Use a single-line text input form field when you expect a brief response from the user or if you need to request a password. The maximum number of characters allowed in a single-line text input field is 256. Figure 19.5 shows a textbox and the settings entered for it in the Text Box Properties dialog box.

Figure 19.5:Textboxes are used for brief text responses.

To place a one-line textbox on your form:

1. From the FrontPage Editor, position the insertion point where you want to insert the textbox field.

   TIP

   If you want to align your forms similarly to how the Form Page Wizard does, format the line on which you want to insert the form field as a formatted paragraph. Use the arrow keys to move back and forth through the alignment; use the backspace and space keys to alter the spacing of the labels and the form fields.

2. Choose Insert | Form Field | One-Line Text Box, or click the One-Line Text Box button on the Forms toolbar. The Text Box Properties dialog box appears.
3. In the Name field, enter a name for the text field. This name does not appear on the form; it is the name that coincides with the name/value pair reported to the form handler. In the example shown in Figure 19.5, the question asks the user the name of his favorite book, so the form field is named book.
4. If you want your text box to have a default value when the form initially appears on the page, enter the text in the Initial Value field. In Figure 19.5,
   I don't know ..... ???? appears in the Initial Value field. This text appears in the actual form field by default. The user must delete the default value and enter a new value.
5. Enter the width, in characters, for the textbox in the Width in Characters field. The default width is 20 characters. In Figure 19.5, the width entered is 50 characters. This setting refers to the width of the textbox; it does not reflect the maximum length of the data that can be entered in it. Make sure that the width of the textbox is not too wide for the screen.
6. Enter the maximum number of characters for the response in the Maximum characters field. The maximum number is 256, which is also the default value.
7. If this textbox will be used for a password entry, select the Yes radio button in the Password field section. Select No for any other type of text input.
8. Click OK. The textbox appears on your page. Enter a label for the textbox on your page, or write an appropriate question above it, as in Figure 19.5.

You can change any property for the textbox after it appears on your page by selecting the textbox and choosing Edit | Properties, or by pressing Alt+Enter.

Requesting Multiline Text Input

Use the Insert | Form Field | Scrolling Text Box command to insert a multiline, or paragraph, textbox field on your form. Figure 19.6 shows a scrolling textbox.

Figure 19.6:Scrolling textboxes are used for lengthy text responses.

To place a scrolling textbox on your form,

1. From the FrontPage Editor, position the insertion point where you want to insert the textbox field.
2. Choose Insert | Form Field | Scrolling Text Box, or click the Scrolling Text Box button on the Forms toolbar. The Scrolling Text Box Properties dialog box appears.
3. In the Name field, enter a name for the scrolling text field. This name coincides with the name/value pair that is reported to the form handler.
4. If you want the scrolling textbox to have a default value when the form initially appears on the page, enter the text in the Initial Value field.
5. Enter the width, in characters, for the scrolling textbox in the Width in characters field. The default width is 20 characters. Make sure that the width of the textbox is not too wide for the screen.
6. Enter the height of the scrolling textbox in the Number of Lines field. The default height is 2.
7. Click OK. The scrolling textbox appears on your page. Enter a label for the scrolling textbox on your page.

You can change any property for the scrolling textbox after it appears on your page by selecting the scrolling textbox and choosing Edit | Properties, or by pressing Alt+Enter.

Requesting Input from Checkboxes

Use checkboxes to give the user a Boolean choice, such as Yes/No or True/False. Check- boxes also are used to present a multiple list of items from which the user can select single or multiple choices. Figure 19.7 shows several checkboxes.

Figure 19.7:Checkboxes allow the user to select or deselect a choice in your form.

To place a checkbox on your form:

1. From the FrontPage Editor, position the insertion point where you want to insert the checkbox.
2. Choose Insert | Form Field | Check Box, or click the Check Box button on the Forms toolbar. The Check Box Properties dialog box appears.
3. In the Name field, enter a name for the checkbox. This name coincides with the name/value pair that is reported to the form handler. The name should relate to the label that you put beside the checkbox.
4. In the Value field, enter a value for the checkbox. It is easiest to enter a value that makes sense when you receive the results for the form. Usually, you enter the value that represents the checked state of the checkbox. The default value is "ON" when the box is checked. The value No if checked helps avoid confusion if the response requires a negative answer.
5. In the Initial State field, select either the Checked or Not Checked radio button. The default value is Not Checked, which means that the user must check the box.
6. Click OK. The checkbox appears on your page. Enter a label for the check- box on your page.

You can change any property for the checkbox after it appears on your page by selecting the checkbox and choosing Edit | Properties, or by pressing Alt+Enter.

Requesting Input from Radio Buttons

Radio buttons are similar to checkboxes in that they are used to give the user a Boolean choice. Typically, radio buttons are arranged in a group and are assigned a group name. The user selects only one option, as in Figure 19.8. The group name and the value assigned to each selected button are sent to the form handler after the user submits the form.

Figure 19.8:Radio buttons are used to give the user a Boolean choice. They typically are arranged in groups, and usually one button of the group is selected.

To place radio buttons on your form:

1. From the FrontPage Editor, position the insertion point where you want to insert the first radio button.
2. Choose Insert | Form Field | Radio Button, or click the Radio Button on the Forms toolbar. The Radio Button Properties dialog box appears.
3. In the Group Name field, enter a name for the group of radio buttons. This name is assigned to all the radio buttons in the group, and it coincides with the name/value pair that is reported to the form handler.

   TIP

   Inserting radio buttons is one time when copying the first button and pasting copies to your form really helps. You can keep the group name consistent if you enter the properties for the first radio button and copy additional radio buttons on the page.

4. In the Value field, enter a value for the individual radio button.
5. In the Initial State field, select either the Selected or Not Selected radio button. The default value is Not Selected, which means that the user must select a button.
6. Click OK. The radio button appears on your page. Enter a label for the radio button.
7. Repeat steps 1 through 6 for each radio button in the group.

You can change any property for the radio button after it appears on your page by selecting the radio button and choosing Edit | Properties, or by pressing Alt+Enter.

Providing a Menu of Choices

Menus are used to present the user with a list of defined choices. Items are displayed in either a drop-down list or a scrolling list. You can configure a drop-down menu list to permit single or multiple selections. Figure 19.9 shows a single-selection drop-down list.

Figure 19.9:Drop-down lists contain a list of selections from which the user can choose. They can be configured for single or multiple selections.

To place a drop-down menu on your form:

1. From the FrontPage Editor, position the insertion point where you want to insert the drop-down menu.
2. Choose Insert | Form Field | Drop-Down Menu, or click the Drop-Down Menu button on the Forms toolbar. The Drop-Down Menu Properties dialog box appears.
3. In the Name field, enter a name for the drop-down menu field that appears on your page. This name coincides with the name/value pair that is reported to the form handler.

For each item that you want to add in the drop-down menu, complete these steps:

1. Select Add Choice.
2. In the Choice field, enter the name of the item.
3. Normally, the menu choice name you enter in step 2 is sent to the form handler along with its value (selected or not selected). You can specify an optional value to be sent to the form handler in place of the choice name. To do this, check the Specify Value checkbox. In the Optional Value field, enter an optional value to send to the form handler.
4. In the Initial State field, select either the Selected or Not Selected radio button. The default value is Not Selected.
5. Click OK. The menu items appear in the order in which you created them.

After you enter your menu list items, complete the menu list as follows:

1. In the Allow Multiple Selections field, choose Yes if you want to permit multiple selections from the drop-down menu. Choose No for single selections.
2. In the Height field of the Drop-Down Menu Properties dialog box, enter the number of rows that drop-down menu list should display.
3. Choose OK to apply all the settings to the drop-down list.

Based on the Height and Allow Multiple Settings values, the drop-down menu can appear in several ways. Table 19.1 shows how most browsers display a drop-down menu based on your choices.

Inserting Buttons on Forms

Pushbutton fields are used to submit or reset the data that the user enters in form fields. You can insert more than one pushbutton on a form, as Figure 19.10 shows.

Figure 19.10:Pushbuttons are used to submit or clear the data from the form.

FrontPage provides two types of pushbuttons that can be used with the FrontPage form handling bots: a Submit button and a Reset button. You can write custom CGI scripts to add additional buttons to your form and to assign other names and values to them.

To place a pushbutton on your form:

1. From the FrontPage Editor, position the insertion point where you want to insert the pushbutton.
2. Choose Insert | Form Field | Push Button or click the Push Button button on the Forms toolbar. The Push Button Properties dialog box appears.
3. In the Name field, enter a name for the pushbutton. This name coincides with the name/value pair that is reported to the form handler.
4. In the Value/Label field, enter a value for the pushbutton. By default, the value Submit appears as a label for a Submit button, and the value Reset appears as a label for a Reset button. The default labels are replaced with the values that you enter in this field.
5. Select the type of button that you want to insert. The choices are Submit and Reset.
6. Click OK. The pushbutton appears on your page.

You can change any property for the pushbutton after it appears on your page by selecting the pushbutton and choosing Edit | Properties, or by pressing Alt+Enter.

Using Image Form Fields

If you write custom form handlers, you can use image form fields to submit data entered on your forms. The button shown beneath the standard form buttons in Figure 19.11 is an image form field. When a user submits a form by clicking an image field, FrontPage passes the coordinates from the image's coordinate system to the form handler. The bots do not use this coordinate information, so you must create a custom form handler to process the coordinates.

Figure 19.11:You can use images as buttons in a form field if you use custom CGI scripts.

To place an image form field on your form:

1. From the FrontPage Editor, choose Insert | Form Field | Image. The Insert Image dialog box appears.
2. Choose an image. The method that you use depends on the source of the image.
3. To insert an image from the current web, click the image title or URL that appears in the Insert Image dialog box. Then click OK.
4. To insert an image from a file on your local or network hard drive, click the From File button. Locate the file in its drive or directory. Choose a file type from the Files of Type drop-down menu to list all the files of a single type. Select the file that you want to insert, and click Open, or double-click the filename to open it.
5. To insert an image from the World Wide Web, click the From URL button. Enter the URL of the image, and click OK. This image is not added to the current web. Instead, it is inserted from its remote location on the Web.
6. After you select the image, the Image Form Field Properties dialog box appears. Assign a name to the image form field in the Name field. This name is sent to the form handler.
7. To change the image properties, click the Image Properties button. The Image Properties dialog box appears. The default link field is disabled because you cannot create a link from an image field. Click OK to exit the Image Properties dialog box.
8. Click OK to insert the image form field on your form.

Using Hidden Form Fields

Use hidden form fields to pass information from one form to another. For example, the Product Data Sheet that you created with the Corporate Presence Web (see Chapter 6 "Real-Life Examples") contains an information request form. This information request form uses a hidden form field to pass the name of the product to the results file and to the confirmation form that is sent to the user.

You can use hidden form fields in other ways as well. Suppose, for example, that your first form has a question such as How long ago did you read this book? and that the user responds 16 days. A custom CGI script looks at that value and determines that the user read the book within the last month. The CGI script returns a hidden form field from the first form, shown in Figure 19.12, to the user in a form on another page that says You read your favorite book in the last 1 month.

Figure 19.12:Hidden form fields are used to pass information from one form to another.

To create a hidden form field:

1. In the FrontPage Editor, double-click any form field to open its Properties dialog box. The Form Field Properties dialog box appears.
2. Click the Form button. The Form Properties dialog box appears.
3. Click the Add button. The Name/Value Pair dialog box appears.
4. Enter a name in the Name field.
5. Enter a value to associate with the name in the Value field. The value can be any text string.
6. Click OK to close the Name/Value Pair, Form Properties, and Form Field Properties dialog boxes.

To modify a hidden form field:

1. In the FrontPage Editor, double-click any form field to open its Properties dialog box. The Form Field Properties dialog box appears.
2. Click the Form button. The Form Properties dialog box appears.
3. In the Form Properties dialog box, select the field to change from the Hidden Fields section.
4. Click the Modify button. The Name/Value Pair dialog box appears.
5. Edit the values in the Name field or the Value field.
6. Click OK to close the Name/Value Pair, Form Properties, and Form Field Properties dialog boxes.

To delete a hidden form field:

1. In the FrontPage Editor, double-click any form field to open its Properties dialog box. The Form Field Properties dialog box appears.
2. Click the Form button. The Form Properties dialog box appears.
3. In the Form Properties dialog box, select the field to change from the Hidden Fields section.
4. Click the Remove button. The hidden form field is removed from the list.
5. Click OK to close the Hidden Form Field, Form Properties, and Form Field Properties dialog boxes.

Workshop Wrap-Up

You already learned how to create forms quickly by using the Form Page Wizard. In this chapter, you learned how to add your own form fields and edit their properties. There now remains one major step in designing your forms, which you learn about in the next chapter.

Chapter Summary

In this chapter, you learned about the various form fields that you can use. You learned how to insert them in your Web pages and how to configure each type of field. You also learned some tips to help you align your form fields just as the Form Page Wizard does.

Next Steps

In the next chapter, you learn how to assign a form handler to your forms and what the runtime bots do. You can find related information in the following chapters:

• Refer to Chapter 3 "Can We Talk?" to learn how to configure a discussion group easily. The steps outlined in this chapter help you edit the form fields created in your discussion groups.
• Refer to Chapter 5 "Lots of Pages-The Template Way," to learn which pages contain forms that are already made for you.

Q&A