Previous Page TOC Next Page



12


Using Forms and the Form Page Wizard


In previous chapters, you learned how to create wonderful Web publications that include pictures, image maps, videos, and sound tracks. Yet now that you've created the beginnings of a wonderful publication, how do you get feedback, comments, and praise from visitors that will make all your hard work worthwhile? The answer is easy; add a fill-out form to an appropriate place in your Web publication, and invite the reader to participate.

HTML 2.0 introduced forms, and Web publishing has never been the same. Forms are the primary way to add interactivity and two-way communication to your Web publications. They provide friendly interfaces for inputting data, searching databases, and accessing indexes. To submit a fill-out form, the user only has to click on the Submit button. Your forms can contain pull-down menus, push buttons, text, and graphics.

Before FrontPage, processing input from a form required a CGI script. As anyone who has created a CGI script knows, CGI scripts can range in complexity from a simple 15-line script that processes basic input to a 1,000-line script that performs advanced processing. FrontPage introduces WebBots that automatically process the input of forms for you. These WebBots perform the basic to intermediate-level scripting tasks used most frequently by Web publishers. This means that most Web publishers will never have to create a CGI script again.

In this chapter, you will learn all about forms—what they are, how to use them, and much more.

What Forms Are and Why You Want to Use Them


In our daily lives, we see forms all the time:

Although you might not think of these items as forms, all of them require you to fill in information or make selections from groups of numbered or lettered items. When you submit a printed form, someone on the receiving end has to file these forms away. In an increasingly computerized world, this usually means entering the information into a database or spreadsheet. Major companies hire dozens of people for the specific task of entering the thousands of forms that flood the company every day into the company database. This is a huge expense and a tremendous burden on the company.

Now imagine a virtual office where thousands of forms are entered into the company database every day without a single worker. The forms are processed efficiently, almost instantly, and the customer can get feedback within seconds of submitting a form. The cost for what otherwise would be a mammoth undertaking is a few hours—the time it takes you to design a fill-out form and add a Web bot or CGI script to process the information.

Using forms, you open a two-way communication channel between you and visitors to your Web publications. Visitors can send comments directly to you. You can add a Web bot or create CGI scripts to process the input automatically. In this way, readers can get immediate results. You can e-mail the input to your e-mail address. This way, you can respond to readers' questions and comments easily and personally. You can also set up a script to process the input, give results to the reader, and send yourself e-mail.

The scripting part of the process runs in the background, and the fill-out form is what the reader sees up close and personal. Readers can interact with forms by entering information in spaces provided, by making selections from pull-down menus, by activating push buttons, and by submitting the data for instant processing. Figure 12.1 shows a simple form with areas for text entry. This form is used to enter product orders online and was created with the Form Page Wizard in less than five minutes.

Figure 12.1. An online order form.

Form Design


Although creating a form is easy, designing a good form is not always easy. Some publishers use generic all-purpose forms that fail because the form wasn't designed with a specific purpose in mind. The key to designing forms is to use them for a specific purpose. When you want to get feedback from readers, you create a form for reader feedback. When you want to take orders online, you create a form for submitting online orders.

Designing forms that are useful to readers and to you as the publisher should be your primary goal. A form that is useful to readers will be used. A form that is useful to you as the publisher makes your job easier. The key to creating forms that are useful to readers and you as the publisher is also in form design. As you go through the steps for designing forms, keep the following guidelines in mind:

  1. A form that is useful to the reader is:

  2. A form that is useful to you as the publisher does the following:

With these rules in mind, you should always provide descriptions along with form fields. As with print forms, the descriptions for fields should be brief. This makes the form easier to read.

Here is a wordy field description:

You should enter your full name in the adjacent text window using your first name, middle initial, and last name as appropriate.

Here is a better field description:

Please enter your name (First, Middle Initial, Last).

Input fields should be correctly sized to ensure that they are usable. A good field size ensures that all key information entered by the user is visible in the input area. For a telephone number, you could define an input field 12 characters in length. This would allow customers to enter their phone number and area code. If a reader puts parentheses around the area code, the length of the input field should be stretched to 14 characters. If the reader lives in another country, the length of the input field should be stretched to at least 16 characters.

The form itself should be correctly sized and well organized to ensure that readers will take the time to fill it out. A good form balances the number of fields against the length of the fields. This means that a form that requires lengthy input from readers should have few fields, and a form that requires the reader to make many selections but requires limited actual input could have many fields.

Creating the Form


FrontPage provides both a manual method and an automatic method of creating forms and setting up form elements. Using the manual method, you build the form using FrontPage's WYSIWYG interface. Using the Form Wizard, FrontPage guides you through every step of the form creation process, making the form creation process mostly automated. To give you a solid understanding of how forms work, this chapter focuses first on the manual form building process, then on the automated process.

Within a form, you can use any valid HTML element. Although multiple forms can be on a single Web page, you cannot create subforms within a form. Primarily this is because the form must be submitted to be processed in a specific manner. The way forms are submitted is based on the following criteria:

FrontPage lets you set these properties for forms using the Form Properties box, which is shown in Figure 12.2. You can access this properties box whenever you add a pushbutton element by clicking on the Form button in the element's properties box or by opening the element's properties box and clicking on the Form button. As you can see, this dialog box has two main areas. The Form Handler area is used to define the type of handler that will process the input from the form. The Hidden Fields area is used to define form fields not visible to the user.

Figure 12.2. Setting form properties.

Defining Form Handlers


You can select a form handler using the Form Properties box. Just as the form creation process in FrontPage is either mostly automated or mostly manual, so is the form handling process. FrontPage enables you to choose one of five form handlers:

After you choose a form handler from the pull-down menu, click on the Settings button to define settings for the handler. Each handler has its own unique properties and must be set up separately.

CGI scripts are external programs that run on the Web server. You can use CGI scripts to process the input from forms. The standard that defines how external programs are used on Web servers and how they interact with other applications is the common gateway interface. If you want to use CGI scripts to process your form data, you might have to write the script yourself. Using CGI scripts with FrontPage is the subject of Chapter 34, "Writing CGI Scripts."

Discussion groups allow users to interact on the Web, and the Discussion bot automates this process. Creating discussion groups and using the discussion WebBot handler is the subject of Chapter 39, "Creating and Managing Discussion Groups."

Often you will want to restrict access to an area of your site or require users to register before they can use key areas of your site. You can use the registration WebBot to do this. For detailed information on using the registration WebBot, see Chapter 23, "Automation with FrontPage's WebBots." See also Chapter 21, "Creating Web Pages with Templates," for more information on creating a user registration form.

The Save Results WebBot is the most common type of form handler. This bot lets you save the form data to a file or database. In this chapter, we will take an in-depth look at using this bot to handle form data.

Hidden Fields in Forms


You can set hidden fields using the Form Properties box. Hidden fields are not displayed and are only useful to provide essential input to a script, database or file. Hidden elements have two attributes:

Use hidden fields as a way to identify the form used to submit an entry or to insert vital information before each entry in a flat file or database. To add a hidden field, click on the Add button in the Form Properties dialog box, which displays the Add Name/Value Pair dialog box. After you've added a hidden value, you can modify or remove it at any time.

Saving the Results of the Form


Form handlers are set with the Form Properties box. Because the most common type of form handler is the Save Results bot, this section takes an in-depth look at using this bot to handle form data.

Usually it is best to specify how you want the results of the form to be saved when you are defining the first element of the form. However, you can specify this information at any time by accessing a pushbutton element's properties box and clicking on the Form button. After you choose the Save Results form handler from the pull-down menu in the Form Handler area of the Form Properties box, click on the Settings button to define settings for the handler.

The Save Results handler has three configuration pages that you can access by clicking on the Results, Confirm, or Advanced tab.

Setting Up the Results Tab


The Results tab for the Form Properties box is shown in Figure 12.3. Typically the first tab you will set defaults for is the Results tab. As you can see from Figure 12.3, the Results tab has many options.

Figure 12.3. Defining the format of results.

The File For Results field enables you to specify the name of the file to store the results. This field can be a relative or absolute URL path to the file's location on your server. If the results file does not exist, the Save Results bot will create the file the first time the form is submitted.

The File Format field enables you to select the format of the results file from the drop-down list. You should choose the format carefully. If you are unsure of the format you will want your data in, it might be best to experiment with file formats on your local Web. The default format is normal text formatted as HTML paragraphs. The complete list of formats for results includes

When the Include field names in output field is checked, both the name and the value of each form field is saved to the results file. When this field is not checked, only values are written to the file.

FrontPage lets you save additional information with the results, which you might find helpful when you process or analyze the results. This information is appended after the form data and includes


TIP

The authors highly recommend tracking most or all of the additional information if you plan to do any analysis of traffic to your Web site. However, this information might not be in a form you will immediately recognize without a little help. For example, if the user submits the form with the Netscape Navigator, the browser type you will see on your results page is Mozilla. See Chapter 30, "Writing CGI Scripts," for complete details on using these and similar variables to identify browser type and users.



Setting Up the Confirm Tab


The purpose of the confirm tab is to let you specify the URL of a confirmation page (see Figure 12.4). Whenever a user submits a form, the confirmation page is displayed to show that the form was submitted successfully.

The overwhelming majority of Web publishers use confirmation pages, and you probably will want to as well. For this reason, if you do not specify a confirmation page, the Save Results bot creates one automatically. To select your own confirmation page, click on the Browse button.

Figure 12.4. Setting the URL to a confirmation page.

Setting Up the Advanced Tab


The Advanced tab for the Form Properties box is shown in Figure 12.5. If you have advanced needs for storing form results, you will use this tab.

Figure 12.5. Defining settings for advanced needs.

The primary use for this tab is to allow you to specify a second file for the results. In this way, you can store the results in an easy to read format such as HTML and an easily manipulated format such as text with commas for field separators. The Advanced tab also lets you specify the fields you want to store in the second file and the order those fields are stored in the file.

Adding Input Fields to the Form


Before you create your first form in FrontPage, you should activate the Forms toolbar. You can do this by selecting Forms Toolbar from the View menu. The Forms toolbar has six buttons, which are used to add the six key form elements:

These elements designed specifically for use within forms are what make fill-out forms useful and interactive. Associated with each form element is a keyword that describes the type of data the element expects and a value input by the user.

Although the keyword cannot include spaces, the input from the user can. For example, a form element could ask for the user's full name. A keyword describing this element could be called full_name, and a user could submit the value "William R. Stanek". You could then store this input into a database, a flat file, or an HTML document.


NOTE

The Form button used to open the Form Properties dialog box is only accessible from a pushbutton element's properties box. The primary reason for this is that pushbuttons are usually used to submit forms. On other form element dialog boxes, you will see a button named Validate instead of the Form button. This button is used with client-side scripting and validation. For more information on validating scripts, see Chapter 27 and Chapter 30.



Using One-Line Text Boxes


One-line text boxes are basic input fields for text. To insert this form element, click on the One-line Text Box button on the Forms toolbar. This opens the Text Box Properties dialog box shown in Figure 12.6. After you define the properties for this element and click the OK button, the element is inserted into your document.

Figure 12.6. Defining properties for one-line text boxes.

As you can see, the dialog box is used to define settings for the one-line text box you are creating. These values are:

Name The keyword associated with the input field.
Initial value An initial value for the field that will be displayed in the text area. The user can add to this information and if necessary delete the information to enter new information.
Width in characters The width of the input field, expressed as the number of characters for the text area.

To allow users to enter password information without revealing the password to onlookers, you can check the Password radio button. All text entered in a password field is seen as asterisks. The asterisks are used only to mask the characters and do not affect how the text is passed to your gateway script. By combining a password input field and an input field for the user's login ID, you can pass this information to a script or Web bot that would validate the user's access to protected areas of your Web site.


TIP

At any time, you can reopen the properties dialog box associated with an input field by following these steps:

  1. Double-clicking on the input field.
  2. Selecting the input field and choosing Properties from the Edit menu.
  3. Selecting the input field and pressing Alt+Enter.


A sample form that uses one-line text boxes is shown in Figure 12.7.

Figure 12.7. Using one-line text boxes.

Using Scrolling Text Boxes


Scrolling text boxes have more functionality than the one-line text boxes because they enable you to define text windows of any size to display on the screen. Text windows can be used to input large amounts of data. Although the size of the window is defined in rows and columns, you have no real control over how much data the user can enter into the window. This is because text windows have vertical and horizontal scroll bars that enable the user to scroll left to right as well as up and down.

Scrolling text boxes can have default text. Default text provided for a text window is displayed exactly as entered. Although the user can erase any default input if necessary, initial input should be used primarily to save the user time.

To insert this form element, click on the Scrolling Text Box button on the Forms toolbar. This opens the Scrolling Text Box Properties dialog box shown in Figure 12.8. After you define the properties for this element and click the OK button, the element is inserted into your document.

Figure 12.8. Defining properties for scrolling text boxes.

As you can see, the dialog box is used to define settings for the scrolling text box you are creating. These values are

Name The keyword associated with the input field.
Initial value An initial value for the field that will be displayed in the text area. The user can add to this information and if necessary delete the information to enter new information.
Width in characters The width of the input field, expressed as the number of characters for the text area.
Number of lines The height of the text window in number of lines.

A sample form that uses scrolling text boxes is shown in Figure 12.9.

Figure 12.9. Using scrolling text boxes.

Using Check Boxes and Radio Buttons


The checkbox input field creates a box that can be checked by a user. The radio button input field creates a circular button that can be checked by a user. Some browsers display selected check boxes and radio buttons using text—an x for a check box and a round bullet for a radio button. Other browsers display check boxes and radio buttons as graphical push buttons with a 3-D flair.

Although the primary difference between a check box and a radio button might seem to be their shape, there is a fundamental difference in the way they behave. Check boxes allow users to make multiple selections. Radio buttons, on the other hand, allow users to make only one selection.

With this in mind, you want to use radio buttons with a single associated keyword value when the user should make only one selection, such as a choice of A, B, or C. You want to use check boxes with multiple associated keyword values when the user can make multiple selections, such as a choice of all or any of A through E.

For each check box or radio button element, you must specify the default properties. The Radio Button Properties box is shown in Figure 12.10. After you define the properties for this element and click the OK button, the element is inserted into your document.

Figure 12.10. Defining properties for radio buttons.

Values you can set in this dialog box are:

Group Name The keyword associated with a group of radio button input fields.
VALUE The value to assign if the user activates the check box or radio button.
Selected The check box or radio button is automatically selected when viewed. The best use of this attribute is for default options that can be unchecked if necessary.
Not selected The check box or radio button is not selected when viewed and can be checked by the user.

The dialog boxes associated with check boxes and radio buttons are nearly identical. The only difference is that the Check Box Properties box lets you specify a name and the Radio Button Property box lets you specify a group name.

Figure 12.11 depicts how check boxes and radio buttons can be used in a form. The check box groups will accept multiple responses, but the radio button groups will only accept a single response.


NOTE

Keep in mind that although the value and label for radio buttons and check boxes are sometimes set with the same key word or phrase, labels and values are not used in the same way. A label is the text that the reader sees. A value is the actual value passed to the form handler.


Figure 12.11. Using radio buttons and check boxes.

Using Drop-Down Menus


Creating drop-down menus for your forms is more difficult than creating other elements. Each element in a drop-down menu is a selection. In some menus, all the selections are completely visible on the screen. In other menus, some or most elements are hidden until the reader activates the menu.

To insert this form element, click on the Drop-down menu button on the Forms toolbar. This opens the Drop-down Menu Properties box shown in Figure 12.12. After you define the properties for this element and click the OK button, the element is inserted into your document.

Figure 12.12. Defining properties for drop-down menus.

As you can see, this dialog box has a lot of options. You use the Name field to specify a keyword for the selection menu. The Add button is used to add selections to the menu. Each selection is identified by a word or phrase the user can select, a value associated with this choice, and the initial state. By default the value associated with the choice is set to the keyword you have used to identify the choice. The initial state of the choice is either selected or not selected.

The Height field is used to set the number of menu selections displayed on the screen without the user having to activate the drop-down menu. By default, the user can select only one option from the menu. To allow the user to make multiple selections, select the Yes button in the Allow multiple selections field. Most browsers allow you to make multiple selections by holding down the control button on the keyboard and clicking with the left mouse button when the pointer is over the additional item you want to select.

Figure 12.13 shows several types of selection menus. The first example shows a menu with all selections displayed on the screen by default. The second example shows a drop-down menu with the selections hidden. On-screen menus occupy more space. You should consider using on-screen menus when the user can make multiple selections and pull-down menus when the user can only make one selection. The final example shows a menu with part of the selections displayed and part of the selections hidden. The scroll bar can be used to access additional items.

Figure 12.13. Using drop-down menus.

To add selections to your menu, click the Add button on the Drop-down Menu Properties box. This opens the Add Choice dialog box shown in Figure 12.14.

Figure 12.14. Adding selections to the menu.

After you've added selections, you can modify those selections, manipulate their order, or remove them using the buttons in the Drop-down Menu Properties box. To do this, select the item you want to edit, then click on the appropriate button.

Using Push Buttons


Push buttons allow you to submit or clear a form. The Push button dialog box is shown in Figure 12.15.

To open this dialog box, select Push button on the Forms toolbar. After you define the properties for this element and click the OK button, the element is inserted into your document.

By default, Reset buttons are labeled with the value of Reset and Submit buttons are labeled with the value Submit. You change the default value in the Push Button Properties box by specifying a new label in the Value/label field such as Clear Form or Submit Form.

Figure 12.15. Defining properties for push buttons.

Using the Name field, you can track which Submit button a user clicked. This provides another way of tracking the precise form used to submit input. Figure 12.16 shows a sample form with Submit and Reset buttons. As you see, each form only needs one Submit button and one Reset button.

Figure 12.16. Using push buttons.

Using the Form Wizard


Now that you know how to create forms, the next topic is how the form creation process can be automated to perfection. The Form Wizard is optimized for creating forms with common types of inputs. By default, the Form Wizard uses the Save Results bot as the form handler for your form and stores the results to a Web page or file. This section is a walkthrough of everything the Form Wizard has to offer.

You will use the Form Wizard when you want to create a new page that uses a form. To launch the Form Wizard, select New from the File menu or press Ctrl+N, then in the New Page dialog box, click on Form Page Wizard. This displays the Form Page Wizard dialog box shown in Figure 12.17.

Figure 12.17. Using the Form Wizard.

The buttons at the bottom of the dialog box are standard throughout the form creation process. At any time, you can move to the previous or next phase of the creation process using the Back or Next buttons. When you've fully defined the form, you can click the Finish button, and the FrontPage Editor will create the form you've designed.

Defining Page Title and URL in the Form Wizard


To begin, click the Next button. As you can see from Figure 12.18, the first step is to name the page and define a URL for the page.

Figure 12.18. Defining page title and URL.

Adding, Modifying, and Removing Form Elements


After you've told FrontPage where to store the page in the current Web, click the Next button again to continue. Figure 12.19 shows the currently defined form elements. From this page, you can add, modify, and remove form elements using the Add, Modify, and Remove buttons respectively. After you've added two or more form elements, you can modify the order of a selected element using the Move Up and Move Down buttons. To completely erase all form elements and start over, you can use the Clear List button.

Figure 12.19. Defining and editing form elements.

Selecting the Type of Input


Most forms ask the user a series of questions. The Form Page Wizard enables you to select from a list of common questions used in forms. To access this list, click on the Add button. If the page shown in Figure 12.20 is not visible, use the Back or Next button to get to the page that shows the list of currently defined questions.

Figure 12.20. Selecting the type of input.

When you click on the Add button, you can select the type of input you'd like to collect from the user. As you can see from Figure 12.19, the associated page has three sections: the first section provides a selectable list of common information collected from users; the second area provides a brief description of the input fields the Form Page Wizard will generate based on the information type; and the third section enables you to edit the question associated with the information type.

After selecting the type of input you'd like to collect, click on the Next button. This displays a page that you can use to select specific input fields related to the form question, such as name, address, and phone number. Figure 12.21 shows the input fields you can select for contact-related information.

Figure 12.21. Defining input fields for a form question.

To define another question or set of input fields for the form, click on the Next button and follow the procedure for adding form elements.

Presentation Options


When you have finished defining element sets for the form, proceed to the Presentation Options page using the Next button. As you can see from Figure 12.22, this page enables you to specify the overall format for form questions and will also generate a table of contents for the page. Usually, form questions are formatted as a numbered list and you might want to use this format as well.

To help you create visually appealing forms, FrontPage uses two general presentation techniques. By default, your form elements are aligned using an HTML table. Because some older browsers cannot handle tables, you can also create the form using formatted text.

Figure 12.22. Setting presentation options.

Output Options


After specifying the presentation options, click on the Next button to select the output options. The Output Options page is shown in Figure 12.23. By default, the Form Page Wizard saves the results from a form in a Web page called formrslt.htm. You can change the default setting to save the results to a file or specify a CGI script that will process the form results. You can also change the default filename for the results, by entering the name of the file without the HTML extension in the appropriate field.

Figure 12.23. Setting output options.

Finishing the Page and Closing the Form Wizard


To finish the Page and close the Form Wizard, click on the Finish button. You can do this from any page within the Form Wizard. FrontPage will now create your form.

Validating Your Forms


When you validate a form, you check the contents of the form for accuracy and completion. The validation process ensures that you get the information you need from your customers, which in turn ensures the integrity of any databases based on the form input.

How Does the Validation Process Work?


The traditional way to validate a form is with a CGI script. The CGI script resides on the server and processes input submitted by a user. If the form is not filled out properly, the CGI script creates a correction page that allows the user to correct or update the original data. Once the data is updated or corrected, the user can resubmit the data, which is once again validated. This sometimes circular process between the server and the client browser is resource and time intensive—not to mention frustrating for users.

Enter FrontPage and its built-in support for client-side validation of forms. With client-side form's validation, there is no back-and-forth processing between the server and the client browser. All validation takes place on the user's system, which is efficient as well as time-saving.

Just as you need a script to validate your form on a server, you also need a script to validate your form on the end-user's system. For cross-platform compatibility, your script must be written in a client-side scripting language such as VBScript or JavaScript.


NOTE

You will learn about all about VBScript and JavaScript later in the book. For more information on VBScript, read the chapters in Part VIII, "VBScript and ActiveX." For more information on JavaScript, read the chapters in Part IX "JavaScript and Java."


Although you would normally need to write a validation routine on your own, FrontPage introduces a revolutionary technique for automating the validation process. Using components of the Script Wizard, FrontPage automatically generates routines to validate any form you create. Absolutely no programming is involved. You simply tell FrontPage the acceptable parameters for form elements and the Script Wizard generates your script.


TIP

The Script Wizard works in conjunction with the Validation WebBot. Together they fully automate the script-generation process based on the parameters you select. This means the Validation WebBot and the Script wizard run silently in the background. Although the Validation WebBot is used strictly for form validation, you can use the Script Wizard to generate other types of scripts. To learn more, look for the section titled, "Instant Scripts with the Script Wizard" in Chapter 29.


When you add validation to a form, you specify the fields to validate individually. The primary reason for this is that validation is handled in different ways for each type of form element. Individual validation of form fields also provides greater freedom. If a form has 10 fields and only one field is vital, you can add validation to the single vital field without needing to add validation to the other fields. If a form has five fields and all are vital, you can add validation to each field, but you must do so one field at a time.

A form is validated when a user clicks on the form's Submit button. If a user does not properly complete a validated form field, he sees a prompt telling him to complete the form field and resubmit the form. If a user does not properly complete multiple validated form fields, he sees a single prompt telling him to complete the fields.

Selecting a Scripting Language for Validation


FrontPage can automatically generate validation scripts in either JavaScript or VBScript. By default, FrontPage is set to create validation scripts using JavaScript. Primarily this is because JavaScript is more widely supported than VBScript.

You can change the scripting language default in the FrontPage Explorer. To do so, select Web Settings from the Tools menu. Then in the Web Settings dialog box, click on the Advanced tab. You can now set the default scripting language using the Language field's pull-down menu. Valid options are VBScript, JavaScript and None. Only use the None option if you want to rely exclusively on the Validation WebBot, which in turn means your server must have FrontPage Server Extensions installed for use.

What Types of Form Information Can Be Validated?


FrontPage enables you to validate input from radio buttons, drop-down menus, one-line text boxes, and scrolling text windows. You cannot validate input from check boxes, pushbuttons, or images used as pushbuttons. If you think about it, these exclusions make sense.

Unlike radio buttons, check boxes are not grouped together, which allows the user to make multiple selections or no selections. Because all possibilities are acceptable, there is nothing to validate. Pushbuttons, whether they are regular or graphical, have only one associated action. The pushbutton either submits or clears the contents of a form, and there is no need to validate pushing the button.

Validating Input from Radio Buttons


Although radio buttons are similar to check boxes, radio buttons are grouped together and only one radio button in a group can be selected. These properties of radio buttons are handled automatically by your browser. The problem with radio buttons is that in a traditional form, the publisher usually selects a default state. The default state ensures that a choice is selected when the form is submitted for processing.

With validation, you no longer need to rely on a default state. You simply validate the radio buttons in the group. If none of the radio buttons are selected when the form is submitted, a prompt appears telling the user to make a selection for the radio button group (see Figure 12.24). Thus you will use validation of radio buttons to ensure that the user has made a choice. For example, if you want to gather statistical data about the average age of users who visit your site, you could use radio buttons with specific age ranges such as:

If you let users submit forms with a default option for age, you may be getting misleading information. Instead of most users falling into your default age group of 19-25 as you hoped, your data is misleading because some percentage of users are simply accepting the default and submitting the form. To get accurate data, you can use validation.

Figure 12.24. The validation routine reports an error.

Before you add validation to a group of radio buttons, remove the default state. The default is selected when displayed in the FrontPage Editor. Thus for any radio button that is selected when displayed in the FrontPage Editor, you need to edit the associated properties dialog box and change the Initial State field to Not Selected. This ensures that the validation process can work.

Start by opening a page that contains your form; then open the properties dialog box for any radio button in the group to which you want to add validation. When you add validation to any radio button in a group, validation as added to the entire group. Click on the Validate button. This opens the dialog box shown in Figure 12.25. To turn on validation, select the check box labeled Data Required. In the Display Name field, enter a name for the radio button group. This name is used as part of the prompt users will see if they don't make a selection for this group. Close all open dialog boxes and validation is added to all radio buttons in the related group.

Figure 12.25. Adding validation to a group of radio buttons.

Validating Input from Drop-Down Menus


In forms, drop-down menus typically allow users to make one or more selections. To give users a pointer that they should make a selection, the first menu item is often a dummy item that reads something like: Make a Selection. This means that sometimes you do not want the first menu item to be selected.

With validation, you can ensure that users make a selection on the drop-down menu and disallow the first item as a valid selection. To add validation to a drop-down menu, open the page that contains your form, and then open the properties dialog box for the drop-down menu you want to validate. Click on the Validate button. This opens the dialog box shown in Figure 12.26. To turn on validation, select the check box labeled Data Required. In the Display Name field, enter a name for the drop-down menu. This name is used as part of the prompt users will see if they do not make a selection for this group. If you want to disallow the first menu item, select the check box labeled Disallow First Item. When you close all open dialog boxes, validation is added to your drop-down menu.

Figure 12.26. Adding validation to a drop-down menu.

Validating Input from One-Line and Scrolling Text Boxes


When you think about it, one-line text boxes and scrolling text boxes serve almost identical functions. You use both types of text boxes to gather input from users. This input can be a mixture of alphabetic and numeric characters, such as an address, phone number, or comments.

Text boxes are the most versatile fields for your forms and, similarly, validation routines for text boxes are extremely versatile. Without validation, there is no way to restrict what the user enters into your text fields. For example, instead of the user's phone number, you get a bunch of Xs or you get a phone number without the area code. With validation, you can set the specific type of data you want to obtain. You can set minimum and maximum lengths of fields. You set the format for numeric data. You determine the acceptable range of values.

Because text box validation is extremely versatile, setting the validation parameters is more involved than with other input fields. Start by opening the properties dialog box for the text box you want to validate. Click on the Validate button. This opens the dialog box shown in Figure 12.27. You can now define validation parameters for the text box.

Figure 12.27. Adding validation to one-line and scrolling text boxes.

At the top of the dialog box are two key fields: Display Name and Data Type. As with other validated fields, the Display Name field is used as part of the prompt users see if they do not enter valid data for the text box. The Data Type field allows you to determine the acceptable types of data for the text box.

Initially, the Data Type field is set to No Constraints. This means there are no constraints on the type of data the user can enter into the text box. You can add constraints by making a selection from the associated pull-down menu. The other options on this menu are Text, Number, and Integer.

Selecting the Text option allows you to set further options in the Text Format area of the dialog box. Similarly, selecting the Number option allows you to set additional options in the Numeric Format area of the dialog box. Integer is a restrictive option that ensures only whole integers can be entered and disallows the entry of decimal values.

At first, it may not seem obvious at what time you would choose one data type over another and you may be tempted to simply use the No Constraints option. The key here is to use the data type that makes the most sense for the type of information you want to gather from the user. If there truly are no constraints for the text box—as in the case of comments—use the No Constraints option. Otherwise, use a more limiting constraint.

Validating Text Data Types

The Text data type is great for addresses, phone numbers and dates. When you select the Text data type, properties in the Text Format field become available. You can select any combination of these properties:

Usually when you create address elements in forms, you will have separate elements for street address, city, state, country, and ZIP code. Here are some guidelines you can use for acceptable text formatting and validation:

You can use the Text data type to validate phone numbers as well. The guidelines you use for formatting depend on the style of phone number you expect. Here are typical styles for phone entries paired with formatting constraints you may want to use:


TIP

Be sure to give the user an example of the format you expect, such as Please enter your phone number in the format 123-456-7890.


Another use for the Text data type is for validating date entries. As with phone numbers, you should explicitly state the style you expect, such as dd/mm/yy. If you wanted data entries to be in this format, select the Digits and Other fields. In the Other field, enter: /.

Validating Numeric Data Types

Numeric data is great for strict number entries and can be in integer or decimal format. As you know, integers are whole numbers such as 3, 5, and 7. Decimals are numbers such as 3.5 or 4.25. Because it doesn't make sense to allow entry of decimals with integers, the Decimal field is grayed and not applicable if you select the Integer format. If you select the Number format, both the Grouping and Decimal fields are usable.

The Group field allows for entries of multiple numbers separated by commas or periods. If you select None for the Group field, multiple number entries are not acceptable.

The Decimal field defines whether the decimal place is expressed as a comma or a period. Although the period is the traditional designator in the U.S., the standard is different in other countries.

If you try to change either field, you will notice that the Grouping and Decimal fields are interrelated—you cannot group with commas and express the decimal place as a comma, or group with periods and express the decimal place with periods. Further, based on your selections, the Example field is updated to show an example of the acceptable types of numbers.

Restricting the Length of Data Entries

Using the Data Length area of the Text Box Validation dialog, you can set restrictions on the minimum and maximum length of the text entry. Checking the minimum length of data helps ensure that users enter correct information. For example, if you are looking for a phone number with area code, a valid entry would be at least 12 characters long. Checking the maximum length restricts the user from entering too much information.

By setting the minimum and maximum lengths to the same value, you ensure the user enters the exact number of characters you expect. Going back to the date entry example in the format dd/mm/yy, you would want the acceptable minimum and maximum length to be 8 characters. Be sure to select the check box labeled Required, which ensures your length rules are enforced.


TIP

As you try to determine the acceptable values for input, keep your international visitors in mind. For example, international phone numbers with country codes are longer than 12 characters.



Checking Input Values

Validation really pays off when you need to ensure entries are within specific value ranges. Using the Data Value field, you can ensure both numeric and alphabetic entries are within acceptable ranges. If you are looking for an answer between 1 and 100, you do not want values less than 1 or more than 100. If you want the user to choose answer A, B, or C, you do not want him to enter D.

You can check for parameters within specific ranges using two validation constraints:

To specify the start of the range, select the Field Must Be check box. Then enter a starting value for the range in the Value field. Finally, select the applicable rule, such as the entry must be greater than the specified value.

To specify the end of the range or an additional constraint, select the And Must Be check box. Then enter a constraining value for the range in the Value field. Finally, select the applicable rule, such as the entry must be less than the specified value.

Connecting to Databases by Using Forms


If you thought automated form validation was hot, you'll love the built-in support for database connectivity. Not only does FrontPage allow you to connect to and search proprietary databases via the Web, you can also update and maintain databases via the Web. FrontPage follows a form-based approach to database connectivity. What this means is that you will use forms to search, update, and manage databases via the Web.

Introducing the Internet Database Connector


The tool that makes database connectivity possible is the Internet Database Connector. You may remember the Internet Database Connector as one of the form handlers listed earlier in the chapter. Its job is to handle the communications between the database server and your Web server. The Web server in turn feeds the results to the client browser.

Anyone who has ever tried to connect to a database via the Web will tell you it is no easy matter. The first hurdle you have to jump over is in compatibility with the database server and your Web server. FrontPage can only help you connect to ODBC-compliant database servers. Open Database Connectivity-compliant databases (ODBC) include Sybase, Oracle, and many other popular databases. If your database is not ODBC-compliant, you cannot use FrontPage to connect to it. Internet Database Connector adopted by FrontPage was originally introduced in Microsoft's Internet Information Server. If you are not using the Personal Web Server or the Internet Information Server, you need FrontPage Server extensions. For information on installing extensions, see the section "Using Server Extensions" in Chapter 36.

The second hurdle is in creating a script that accesses the database. You will write this script in the Structure Query Language (SQL). FrontPage introduces a wizard, called the Database Connector Wizard, to help you create this script and connect the script to your database.


CAUTION

If you do not know SQL, you are not the best candidate to connect your database to the Web. Find someone who knows SQL before you continue.


The third hurdle is in creating forms that access the database. You will use separate forms to perform searches, updates, and maintenance of the database via the Web. While FrontPage makes it easier to create the necessary forms, you will need to know the descriptors for fields in the database you plan to work with. Print out a list of these descriptors and highlight the ones you will use.

The final hurdle is to create a page to return the results. The FrontPage Editor has a page template named Database Results that you will use for this purpose. You may need separate results pages.

What these hurdles mean is that connecting to a database and obtaining results is generally a 4-part process:

  1. Install FrontPage Server Extensions (if necessary).
  2. Use the Database Connector Wizard to enter an SQL script and establish the connection to your database.
  3. Create forms for accessing database fields.
  4. Create results pages.

Working with the Database Connector Wizard


With the Database Connector Wizard, FrontPage makes it easier to connect to databases. However, the complexity of the task has not been eliminated. To work with the database connector, you need advanced knowledge of SQL and object-oriented databases—subjects that can and have filled entire books.

To start the Database Connector Wizard, select New from the File menu of the FrontPage Editor. Then select the Database Connector Wizard in the New Page dialog box.

The Database Connector Wizard has several setup pages. The first page (see Figure 12.28) is used to specify the location of the database's source file and the URL to the results page. In the ODBC data source field, enter the full path to the database source file, such as /sources/customer.data. In the Query results template field, enter the URL path to the results page, such as ../qresults.htx. HTX is a Microsoft format for HTML page templates and other data files. When you create a results page using the Database Results template, the page is usually saved in this format with the .HTX extension.


TIP

You probably haven't created a results page yet. Don't worry; just enter the URL path you plan to use for the results page.


If you want users to be able to access the server without having to authenticate themselves, enter username and password information. This information is saved unencrypted in your database script.

The Advanced Options button provides access to a dialog box that allows you to fine-tune parameters of the Internet Database Connector. You can define how to perform the query, the connection settings, the limits, and even device drivers.

Figure 12.28. Getting started with the Internet Database Connector Wizard.

After you fill out the necessary information, click on the Next button. As you can see from Figure 12.29, the next wizard page lets you enter SQL queries. After you enter your first query, select Create Additional Query from the SQL Query field's pull-down menu. You can now enter a second query. Repeat this process for each additional query. The results of these queries are inserted in separate sections of the results page.


TIP

As you create queries, write down the query number and a brief description of the query. You can edit any of the queries you create later. When you return to this screen in the wizard later, select the number of the query you want to edit from the SQL Query field's pull-down menu.


Figure 12.29. Entering SQL queries.

Your queries can pass parameters from a form to the database. This is how you will perform database searches and updates. Using your printed list of database descriptors, consider table elements users might wish to search for or update. Keep in mind that database updating and searching are separating events handled with different forms and different queries.

For each element, create a name that will be associated with an input field of your form. For example, a customer account database could have a table element named Cust_Name. You would use a similarly named parameter for an input field in your form, such as a one-line text box named Check_Customer.

The name of the text box—Check_Customer—is the parameter you will add to the SQL query. Before you add a parameter, ensure that the pointer is where the parameter logically fits into the query structure. Then click on the Add Parameter button. This opens the dialog box shown in Figure 12.30. Simply enter the parameter name in the input field provided and click OK. Your parameter is then inserted between percent symbols, which tells the Internet Database Connector to replace the parameter name with the actual value entered by the user.

Figure 12.30. Inserting parameters.

After you create the necessary queries, click on the Next button. You can now add default parameter values, such as those shown in Figure 12.31. The default values are always used when the Internet Database Connector performs a query. Defaults are always combined with user input. For example, if your query form has a field for customer name and address, but the user only fills in the name field, a default in the address field limits the results to specific matches based on your default.

Figure 12.31. Setting default parameters.

In the example shown in Figure 12.31, two default values are assigned: Name=Customer and Address=Walk-in. These entries are for a customer tracking database. A user who submits a related form with no entries will see matching data for all walk-in customers. A user who enters a specific name and address information will see data sets that match the specific entry as well as the results for all walk-in customers.

When you enter default parameter values (if any), click on the Finish button. Before the Internet Database Connector Wizard can create your script, you need to specify a destination folder for the script, which is why the Current Web dialog box is displayed. After you select a folder and name for the script, click on the OK button. Write down the full file path to this script. You will need it for your form handler.

Here is an example query script created by the Internet Database Connector Wizard:




Datasource: ov.data



Template: ../res.html



SQLStatement: use my_database



+go



+declare check_cursor cursor for select check from check_stats_table



+go



+execute check_stats



+%Check_Customer%



+go



DefaultParameters: Name=Customer, Address=Walk-in



Username: sybase_user



Password: sybase

Creating the Database Connection Form


Your database connection form can be as simple or complex as you want to make it. The most basic form needs only a single input field and a Submit button. More complex forms have multiple input fields and a Submit button. The key to the form is to

Matching form names to parameter names is easy. All you have to do is open the properties dialog associated with the input element and enter the parameter name in the Name field.

To select the Internet Database Connector as the Form Handler, double-click on the form's Submit button. Next, in the properties dialog, click on the Form button. Using the Form Handler pull-down, select Internet Database Connector.

With the Form Properties dialog box open, click on the Settings button. This opens the dialog box shown in Figure 12.32. In the input field provided, enter the absolute or relative URL path to the query script. Close all open dialog boxes and save the page.


TIP

The dialog box shown in Figure 12.32 has a button labeled Edit. If you click on this button, you will be able to edit the settings for the Internet Database Connector Wizard and update your query script.


Figure 12.32. Pointing the Internet Database Connector to the query script.

Creating the Results Page


FrontPage has a template for the results page. To use this template, select New from the File menu in the FrontPage Editor, and then select Database Results. Before you add results fields to the page, save the page using the name and URL path you selected when setting up the Internet Database Connector Wizard.

Adding results fields is handled with a menu accessible by selecting Database from the Edit menu. This menu is shown in Figure 12.33.

Figure 12.33. The Database menu.

The first step is to create a Detail section to hold the results of your first query. To do this, select Detail section from the database menu. You will need to add a detail section for each query your script contains.

After you create the Detail section, you need to specify the formatting of the results. Most databases return results as a database record with columns of data cells. Each column in the returned table has a name. In order to insert the column, the column must be identified by its database descriptor. To do this, select Database Column Value from the Database menu; then enter the column name in the dialog box provided.

To see the search parameters that returned the table record in the results page, you will use the IDC Parameter Value option of the Database menu. Enter a parameter name in the dialog box provided. Repeat this procedure for each parameter you want on the results page. The Internet Database Connector Wizard will replace the parameter names with the actual value input for the parameter. With this in mind, you probably want to precede the parameter names with descriptive text, such as You searched for.

The Internet Database Connector Wizard also lets you perform conditional actions based on the results of the query. These conditional actions are in the form of If-Then and If-Then-Else structures.

Summary


Forms add interactivity and provide friendly interfaces for entering data, searching databases, and accessing indexes. Designing forms that are useful to readers and to you as the publisher should be your primary goal. Using the FrontPage Editor, you can quickly add form elements using the Forms toolbar. With the Form Page Wizard, you can create advanced forms in fewer than five minutes.

FrontPage includes other powerful form-based tools beyond the Form Page Wizard. Using the Validation WebBot and the Scripting Wizard, you can automatically generate validation routines for your forms. Using the Internet Database Connector Wizard, you can connect your databases to the Web. You can use these tools to meet many of your most advanced Web publishing needs.

Previous Page Page Top TOC Next Page