Chapter 21

Fields-The Building Blocks of Forms

• What Every Form Needs
  • Form Fields
  • Form Field Names
  • Buttons
  • Form Handlers
• What Form Fields Do
• Validating Form Fields
• Designing the Dog Tricks Form
• Requesting Single-Line Text Input
• Validating Text Boxes
• Requesting Multiline Text Input
• Requesting Input from Checkboxes
• Requesting Input from Radio Buttons
• Validating Radio Buttons
• Providing a Menu of Choices
• Validating Drop-Down Menus
• Inserting Buttons on Forms
• Using Image Form Fields
• Using Hidden Form Fields
• Workshop Wrap-Up
  • Next Steps
  • Q&A

In Chapter 20, "Quick and Easy Forms," you learned how to generate a form using the FrontPage Form Page Wizard. The 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 in Figure 21.1 includes examples of all the form fields. You see, from top to bottom, a text box, a scrolling text box, a checkbox, radio buttons, a drop-down menu, and two pushbuttons. You insert these form fields on your page with the Insert | Form Field command.

Figure 21.1 : Users enter data into your form with form fields.

Whenever you insert a form field on a page, you automatically create a form. If you enable the Show/Hide button on the Standard toolbar, 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 21.2. The text box in the first cell of the column has a name of DogName. This name, and the value entered by the user, are passed first to the form handler and then to you through the use of name/value pairs.

Figure 21.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 clicks 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 at the bottom of the form in Figure 21.1.

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 21.3. The form handler resides on the same server as your web. 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 21.3 : Every form requires a form handler, which 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 checkboxes, 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.

Validating Form Fields

In Chapter 16, "Database Connectivity," you learned how to generate Internet Database Connector (IDC) files for use with your forms. FrontPage provides commands that let you easily validate your form fields. When you validate a field, you assign parameters that must be met when the user responds to the form field. For example, you can instruct a text box field to accept letters only, rather than alphanumeric responses. When you validate a form field, FrontPage automatically generates the client-side VBScript or JavaScript that performs the form field validation when the data is submitted by the user. As you design each type of form field in the following tasks, you'll learn how to validate the form fields, as well.

Designing the Dog Tricks Form

In this chapter, you'll design a simple form and learn to validate the form fields. The form is shown in the preceding figures-the Dog Tricks page.

You start by creating the table shown in Figure 21.4. Insert your form fields in the right column of the table.

Figure 21.4 : Start by adding a table to your page.

To begin the form, follow these steps:

1. From the FrontPage Editor, use the New button on the Standard toolbar to create a new normal page. A blank page appears in the FrontPage Editor.
2. With the insertion point at the beginning of the page, choose Heading 2 from the Change Style drop-down menu on the Format toolbar. Enter Dog Tricks.
3. Choose Table | Insert Table. The Insert Table dialog box appears. Enter the following settings, and choose OK. The table appears in the center of your page.

Rows:	6
Columns:	2
Alignment:	Center
Border Size:	0
Cell Padding:	2
Cell Spacing:	0
Width:	Uncheck Specify Width checkbox

4. Position the insertion point over the top of the first column, where it becomes a selection arrow pointing downward. Click to select the first column of cells.
5. Press Alt+Enter, or right-click and choose Cell Properties from the pop-up menu. The Cell Properties dialog box appears.
6. Assign the following settings in the Cell Properties dialog box. Click OK to exit the Color and Cell Properties dialog boxes. The cells turn to a light yellow color.

Horizontal Alignment:	Right
Vertical Alignment:	Top
Background Color:	Custom: Red 255 Green 255 Blue 204

7. Position the insertion point inside the bottom cell in the first column. Choose Table | Select Cell and then press Alt+Enter. In the Cell Properties dialog box, change its Horizontal Alignment setting to Left. Choose OK to apply the setting.
8. Position your mouse above the second column of cells, where it becomes a selection arrow pointing downward. Click to select the cells and press Alt+Enter. The Cell Properties dialog box appears.
9. Set the following settings in the Cell Properties dialog box, and choose OK to exit the Color dialog box and the Cell Properties dialog box. The cells change color to a light orange.

Vertical Alignment:	Top
Background Color:	Custom: Red 255 Green 204 Blue 153

10. Click inside the fourth cell in the second column. Choose Table | Split Cells. The Split Cells dialog box appears. Select Split into Rows. In the Number of Rows column, enter 2. Choose OK. The row is split into two rows.
11. Click inside the fourth cell in the second column again. Choose Table | Select Cell. Shift-click to select the cell beneath it.
12. Choose Table | Split Cells. The Split Cells dialog box appears. Select Split into Columns, and in the Number of Columns field, enter 3. Then choose OK. Your table should now look as shown in Figure 21.4, except that yours won't have borders.

Requesting Single-Line Text Input

You're going to insert the first text box on your page to define the area of the form. Then, you'll cut and paste the table into the form area and cut and paste the text box into the table. This way, all the form fields you place in the table are contained in the same form.

Use a single-line text input form field when you expect a brief response from the user or when you request a password. The maximum number of characters allowed in a single-line text input field is 256.

To place a one-line text box on your form, perform the following steps:

1. Position the insertion point at the end of the heading that reads Dog Tricks.
2. Choose Insert | Form Field | One-Line Text Box, or click the One-Line Text Box button on the Forms toolbar. The text box appears on your page.
3. Click inside the table, and choose Table | Select Table. Use Ctrl+X to cut the table into your clipboard.
4. Click at the right side of the text box in the form. Paste your table into the form area, using Ctrl+V. The table is now inside your form.
5. Click to select the text box. Use Ctrl+X to cut the text box into your clipboard.
6. Click in orange cell in the first row. Paste the text box into the cell, using Ctrl+V. Your page should look as shown in Figure 21.5.
   Figure 21.5 : The table is moved inside the form, and the text box is moved into the table.

7. Click inside the yellow cell in the first row. Enter What is your dog's name?.
8. Click to select the text box, and press Enter. The Text Box Properties dialog box, shown in Figure 21.6, appears.
   Figure 21.6 : Properties are added into the text box with the Text Box Properties dialog box.

9. In the Name field, enter a name that describes the user's response. This name coincides with the name/value pair reported to the form handler. In the example shown in Figure 21.6, the question asks the user the name of his or her dog. Enter DogName.
10. 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. For example, you could enter a default entry of Fido here (but you won't). This text appears in the form field and is passed on to the form handler unless the user changes it. The user must delete the default value and enter a new value.
11. Enter the width, in characters, for the text box in the "Width in characters" field. This setting refers to the width of the text box on the page; it doesn't reflect the number of characters that can be entered into it. Make sure that the width of the text box is not too wide for the screen. The default width is 20 characters. Increase this setting to 35.
12. If this text box is used for a password entry, you select the Yes radio button in the Password field section. Because this is not a password field, select No.
13. Click OK. The settings are applied to your text box.

Validating Text Boxes

In Chapter 16, you learned how to generate IDC files for use with your forms. FrontPage provides commands that let you easily validate the form fields that you use with the Database Connector Wizard. When you validate a form field, FrontPage automatically generates the client-side VBScript or JavaScript that performs the form field validation when the data is submitted by the user.

You can change any property for the text box after it appears on your page by double-clicking the text box, by selecting it and pressing Alt+Enter, or by choosing Edit | Form Field Properties. Any of these procedures reopens the Text Box Properties dialog box.

To validate a text box, follow these steps:

1. Double-click the text box on your page. From the Text Box Properties dialog box, choose Validate. The Text Box Validation dialog box, shown in Figure 21.7, appears.
   Figure 21.7 : Text boxes and scrolling text boxes are validated with the Text Box Validation dialog box.

2. In the Data Type field, select the type of data to which you want to constrain the text input from the user. By default, the selection is No Constraints. When this option is selected, many of the other options in the dialog box are disabled. You can choose one of four options from the Data Type drop-down menu:
   No constraints. The user can enter any type of text string.
   Text. The user must enter text. Select this option for your DogName text field.
   Integer. The user must enter a whole number.
   Number. The user must enter any type of number.
3. The Display Name field enables when you select an integer or number from the Data Type drop-down menu. Here, you specify the name that refers to the text field in validation warning messages. It is used when the Name field in the Text Box Properties is different from the label that the user sees on the form. For example, if your numerical form field is named UserIDNumber in the Text Box Properties dialog box, you can assign a display name of User ID.
4. The Text Format section enables when you specify a Data Type of text. From the Text Format field, select one or more of the following options. For your DogName field, you want to allow anything but numbers in the response.
   Letters. The field can contain alphabetic characters. Select this option.
   Digits. The field can contain numeric characters. Do not select this option.
   White space. The field can contain white space, such as spaces, tabs, carriage returns, and line feeds. Select this option, in case the dog's name contains more than one word.
   Other. Check this option to enter other types of characters that are allowed (commas, hyphens, and other punctuation marks). Select this option and add an apostrophe and a hyphen in the Other field.
5. The Numeric Format section enables when you specify a Data Type of integer or number. From the Grouping field, choose one of the following:
   Comma. Commas are permissible in the number, such as 123,456,789.
   Period. Periods are permissible in the number, such as 1456.56 or 127.0.0.1.
   None. No punctuation is permissible. The number must be entered similar to the following: 1234567689.
6. The Decimal field in the Numeric Format section enables when you specify a Data Type of number. You specify the punctuation character that you want to use for a decimal point. You can't use the same character that you used for the Grouping field in step 5. Choose one of the following:
   Comma. A comma character is allowed in the number, such as 123,456,789.
   Period. A period character is allowed in the number, such as 127.0.0.1 or 1234.56.
7. In the Data Length field, you specify the data length required for the text box. This applies to any data type selected in step 2. If you require a minimum or maximum length, or both, check the Required checkbox. Then, specify the minimum length in the Min Length field and the maximum length in the Max Length field. For your DogName text box, enter 35 in the Max Length field. This restricts the response to 35 characters or less.
8. The Data Value section specifies additional parameters for the text box. Check the Field Must Be option if you require specific input from the user. Then, select one of the following options from the drop-down menu. Finally, enter a representative value in the Value field. You won't select any of these options for the DogName field in your form.
   Less Than. Choose this if the value entered in the text box must be less than the number you specify in the Value field. Example: Less than 5.
   Greater Than. Choose this option if the value entered by the user must be greater than the number you specify in the Value field. Example: Greater than 0.
   Less Than or Equal To. Choose this option if the value entered by the user must be less than or equal to the number you specify in the Value field. Example: Less than or equal to 10.
   Greater Than or Equal To. Choose this option if the value entered by the user must be greater than or equal to the number you specify in the Value field. Example: Greater than or equal to 1.
   Equal To. Choose this option if the value entered by the user must be equal to the value you specify in the Value field. Example: Equal to 7.
   Not Equal To. Choose this option if the value entered by the user should not equal the value you specify in the Value field. Example: Not equal to 7.
9. The And Must Be field of the Data Value section adds a second condition to the data value constant. The choices are the same as listed previously. Use this option to check whether the value entered by the user meets more than one condition. For example, if you want to check that the user's entry falls between 1 and 10, inclusive, you set the Field Must Be and And Must Be fields as follows:
   Field Must Be Greater Than or Equal To 1
   And Must Be Less Than or Equal To 10.
10. Your settings should look as shown in Figure 21.7. Choose OK to apply the settings to your text box.

Requesting Multiline Text Input

Use the Insert | Form Field | Scrolling Text Box command to insert a multiline or paragraph text box field on your form. Figure 21.8 shows a scrolling text box added to your form.

Figure 21.8 : Scrolling text boxes are used for lengthy text responses.

To place a scrolling text box on your form, do the following:

1. Position the insertion point in the yellow cell in the second row. Enter Describe the trick that your dog performs:.
2. Position the insertion point in the orange cell in the second row. Choose Insert | Form Field | Scrolling Text Box, or click the Scrolling Text Box button on the Forms toolbar. The scrolling text box appears in the cell.
3. Click to select the scrolling text box and then press Alt+Enter. The Scrolling Text Box Properties dialog box appears.
4. 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. Enter Trick.
5. If you want the scrolling text box to have a default value when the form initially appears on the page, enter the text in the Initial Value field. Leave this blank for your form field.
6. In the Width in characters field, enter a width for your scrolling text box. Like the text box field, this is a screen width, not the number of characters it can contain. The default width is 20 characters. Set it at 35, the same width as the text box.
7. Enter the height of the scrolling text box in the Number of lines field. The default height is 2 lines. Increase this to 5.
8. Press the Validate button and notice that the scrolling text box uses the same validation screen as the text box, discussed previously. Leave all the settings as they are. No validation script is written for the scrolling text box.
9. Click OK to exit the Text Box Validation dialog box. You return to the Scrolling Text Box Properties dialog box. Choose OK to apply the settings.

Requesting Input from Checkboxes

Next, you add a checkbox to your form. This is easy, because checkboxes don't need validation-they're either checked or not checked and that's it.

Use checkboxes to give the user a Boolean choice, such as Yes/No or True/False. Checkboxes also present a multiple list of items, from which the user can select single or multiple choices. Figure 21.9 shows a checkbox added to your form.

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

To place a checkbox on your form, follow these steps:

1. Click in the yellow cell in the third row. Enter Has your dog ever been on television before?.
2. Click in the orange cell in the third row, and choose Insert | Form Field | Check Box, or click the Checkbox button on the Forms toolbar. The checkbox appears in the table.
3. Click to select the checkbox and press Alt+Enter. The Checkbox Properties dialog box appears.
4. In the Name field, enter a name for the checkbox field. This name coincides with the name/value pair that is reported to the form handler. Enter OnTV.
5. 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. Leave it set at the default of ON.
6. In the Initial State field, select either the Checked or Not checked radio button. Leave the option set at the default setting of Not checked.
7. Choose OK. The settings are applied to your checkbox.
8. Position the insertion point after the checkbox. Enter Check if Yes.

Requesting Input from Radio Buttons

Radio buttons are similar to checkboxes in that they give the user a Boolean choice. Typically, radio buttons are arranged in a group and assigned a group name. The user selects only one option from the group. The group name and the value assigned to each selected button are sent to the form handler after the user submits the form. Figure 21.10 shows a group of six radio buttons entered into the divided cells on the right side of the table.

Figure 21.10 : Radio buttons 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, do the following:

1. Position the insertion point in the yellow cell in the fourth row. Enter How old is your dog?.
2. Click inside the orange cell in the first column of the fourth row. Choose Insert | Form Field | Radio Button, or click the Radio Button button on the Forms toolbar. The radio button appears in the cell.
3. Double-click the radio button to open the Radio Button Properties dialog box.
4. 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. Enter Age.

5. In the Value field, enter a value for the individual radio button. You want the first radio button to represent a choice of less than 1 year. Enter Under1.
6. In the Initial State field, select either the Selected or Not selected radio button. Leave the initial state set at the default value of Not Selected.
7. You'll notice at this point that the Validate button is disabled. That's because the validation settings apply to radio buttons that are in a group. Choose OK at this point to apply the settings to the first radio button.
8. Click the radio button to select it. Use Ctrl+C to copy it into your clipboard.
9. Paste one radio button into each of the remaining five split cells. You now have six buttons with the same settings in your table. You'll edit the settings in the following two steps.
10. Click immediately after each button, and add the labels shown below. Use Figure 21.1 as a guide if necessary:

Less than 1 year	1-2 years	3-5 years
6-8 years	9-10 years	Over 10 years

11. For each of the five additional radio buttons, double-click to open its Radio Button Properties dialog box. Change the Value and Initial State settings as shown in Table 21.1. The first item is already complete.

Validating Radio Buttons

Radio buttons are typically arranged in groups, as you have just seen. When you develop your pages with the Form Page Wizard, the Name field in the Radio Button Properties dialog box typically displays the group name as part of the radio button name-something like Age_1, Age_2, Age_3, and so on. This not only looks a little confusing to the user, but the name isn't the same as the prompt that the user responded to on the page. You can use the Radio Button Validation dialog box, shown in Figure 21.11, to return to the user a display name that matches what the user sees.

Figure 21.11 : You can specify a different radio button name to be returned to the user in the Radio Button Validation dia-log box.

For your Dog Tricks page, you don't need to perform validations. The steps required to validate a radio button are as follows:

1. Double-click the radio button you want to validate, and choose Validate from the Radio Button Properties dialog box. The Radio Button Validation dialog box appears.
2. To specify a different display name, check the Data Required checkbox (this is not checked by default). The Display Name field enables.
3. Enter the display name that you want to return to the user in the Display Name field.
4. Choose OK to apply the validation settings.

Providing a Menu of Choices

Menus present the user with lists 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. You'll add a single-selection drop-down list to your form.

To place a drop-down menu on your form, perform the following steps:

1. Click in the yellow cell in the fifth row. Enter What breed is your dog?.
2. Click in the orange cell adjacent to it, and choose Insert | Form Field | Drop-Down Menu, or click the Drop-Down Menu button on the Forms toolbar. A drop-down menu appears in the cell.
3. Double-click the drop-down menu to open the Drop-Down Menu Properties dialog box.
4. 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. Enter Breed.

To enter the first choice in the drop-down menu, use the following steps:

1. Select Add. The Add Choice dialog box appears.
2. In the Choice field, enter the name of the item. For your first choice, enter Good question.
3. Usually, 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, and enter the optional value in the field beneath the option. (You won't need this option for your form.)
4. In the Initial State field, select either the Selected or Not selected radio button. The default value is Not selected. Change this value to Selected for the choice you just added.
5. Click OK. The menu item appears in the Drop-Down Menu Properties dialog box.
6. Repeat steps 1 through 5 to add the additional choices shown in Table 21.2 to your drop-down menu. When you're done, your Drop-Down Menu Properties settings should look as shown in Figure 21.12.
   Figure 21.12 : Drop-down lists contain a list of selections from which the user can choose. They can be configured for single or multiple selections.

7. After you complete your choice list, use the "Allow multiple selections" field to specify whether you want to allow multiple responses from the user. Choose Yes if you want to permit multiple selections from the drop-down menu. Choose No for single selections. Select No for your Dog Tricks form.
8. In the Height field of the Drop-Down Menu Properties dialog box, enter the number of rows that the drop-down menu list should display. Leave the value set at the default of 1 row.
9. If you want to rearrange the order of your choices, highlight the choice you want to move, and then click Move Up or Move Down, as required. The item is relocated as specified.
10. Choose OK to apply all the settings to the drop-down list.

Based on the "Height" and "Allow multiple selections" settings, the drop-down menu can appear in several ways. Table 21.3 shows how most browsers display a drop-down menu, based on your choices.

Validating Drop-Down Menus

When you validate a drop-down menu, you have one or two options to select, depending on whether your drop-down menu allows single or multiple choices. To validate a drop-down menu, follow these steps:

1. Right-click the drop-down menu that you want to validate, and choose Form Field Validation from the pop-up menu. The Drop-Down Menu Validation dialog box, shown in Figure 21.13, appears.
   Figure 21.13 : Validate your drop-down menus in the Drop-Down Menu Validation dialog box.

2. In the Display Name field, enter a field name that should be returned to the user in validation warnings. This name is used if the form field's internal name is different from what you want to return to the user.
3. Select the Data Required checkbox if you require at least one selection from this field.
4. If you configured your drop-down menu to allow multiple selections, you see two options that are not present for single-selection drop down menus:
   Minimum Items. Select this option if you want the user to select a minimum number of choices, and add the minimum number in the Minimum Items field.
   Maximum Items. Select this option if you want the user to select not more than a maximum number of choices, and add the maximum number in the Maximum Items field.
5. Select Disallow First Item if you don't want the first item to be selected by the user. For example, if you use the first item in the drop-down menu to display an instruction to the user rather than a choice, you can select Disallow First Item to prohibit the user from entering the instruction as a choice.
6. Click OK to apply the validation settings.

Inserting Buttons on Forms

You use pushbutton fields 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 21.14 shows.

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

FrontPage provides three types of pushbuttons that forms can use: Normal buttons, Submit buttons, and Reset buttons. Use normal buttons when you want to write custom scripts to process your forms (such as JavaScripts and ActiveX scripts).

To place a pushbutton on your form, follow these steps:

1. Click inside the bottom yellow cell. Enter Those are all the answers we need. Submit the form by pressing the submit button at the right. Use the Clear Form button to reset the form..
2. Click in the bottom orange cell. Choose Insert | Form Field | Push Button twice to insert two pushbuttons in the cell.
3. Double-click the left pushbutton. The Pushbutton Properties dialog box appears.
4. 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. Enter Button1.
5. In the Value/Label field, enter a value for the pushbutton. By default, the value Button appears as a label for a normal button. Submit appears as a label for a submit button, and the value Reset appears as a label for a reset button. Leave the value set at the default of Submit.
6. Select the type of button that you want to insert. The choices are Normal (used with custom scripts), Submit (used to submit the form), and Reset (used to clear the form). Choose Submit.
7. Click OK. The settings are applied to the button.
8. Double-click the second button and assign the following settings in the Pushbutton Properties dialog box:

Name:	Button2
Value/Label:	Clear Form
Button Type:	Reset

9. Click OK. The settings are applied to the second button.
10. To complete the form, choose Edit | Select All. Select Arial from the Change Font drop-down menu. Reduce the size of the font by clicking the Decrease Font Size button once.
11. Choose File | Save (Ctrl+S), or click the Save button on the Standard toolbar. The Save As dialog box appears. The page title should read Dog Tricks, and the file path within your FrontPage Web field should read dogtrick.htm. Choose OK to save the page.

Using Image Form Fields

If you write custom form handlers, you can use graphics (image form fields) to submit data entered on your forms. Any image can be a button on a form. 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 with a language such as CGI, JavaScript, or VBScript to process the coordinates.

To place an image form field on your form, do the following:

1. From the FrontPage Editor, choose Insert | Form Field | Image. The Image dialog box appears.
2. Locate an image as follows:
   • To insert an image from the current web, choose the Current Web tab. Locate the folder in which your image is located. Select the image and choose OK.
   • To insert an image from a file on your local or network hard drive, click the Other Location tab. Choose the From File radio button, and click the Browse button to locate the image. Select the image, and choose Open. The image appears on your page.
   • To insert an image from the World Wide Web, click the Other Location tab. Choose the From Location radio button, and enter the URL of the image in the field. Then, click OK to return to the FrontPage Editor. The image appears on your page.
3. Double-click the image to open the Image Form Field Properties dialog box.
4. To change the image properties, click the Image Properties button. The Image Properties dialog box appears. Set image properties as indicated in Chapter 10, "Sprucing Up Your Pages," and choose OK. You return to the Image Form Field Properties dialog box.
5. Enter a name for the image form field in the Name field.
6. Click OK to apply the settings to your image form field.

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 5 "Real-Life Examples I: Using What You've Got") 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 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 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 to the user in a second page that says "You read your favorite book in the last 1 month."

To create a hidden form field, do the following:

1. Click anywhere inside a form that appears on your page.
2. Right-click and choose Form Properties from the pop-up menu. The Form Properties dialog box appears.
3. In the Hidden Fields area, click the Add button. The Name/Value Pair dialog box appears.
4. Enter a name for the hidden form field 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 and Form Properties dialog boxes.

To modify a hidden form field, follow these steps:

1. Click anywhere inside a form that appears on your page.
2. Right-click and choose Form Properties from the pop-up menu. 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 and Form Properties dialog boxes.

To delete a hidden form field, perform the following steps:

1. Click anywhere inside a form that appears on your page.
2. Right-click and choose Form Properties from the pop-up menu. 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 and Form 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 and validate 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.

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 learned how to use form field validations to validate the user's entries.

Next Steps

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

• Refer to Chapter 19, "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.
• Chapter 4 "Lots of Pages-The Template Way," discusses which pages contain forms that are already made for you.

Q&A