How to Create a Form with FrontPage

In this tutorial, you will learn how to use Microsoft FrontPage XP 2003 for Windows to create forms for collecting data from your web pages.

Create a Form

First, you have to create a form area in your page. Form area is bounded in FrontPage with dashed line and initially contains Submit and Reset buttons. A new form area is created automatically when you insert any form field into the page without a form.

• Let's start with the simplest form field - with One-Line Text Box. Under the Insert menu, choose Form and then Textbox. A new form will be created containing a one-line textbox, a submit button, and a reset button.

Your page now contains form area similar to this one:

You can format the content of the form area as you need. If you enter new lines, images or text, the form area will grow with its content. You only have to be careful when you insert more form fields. You should always have your cursor inside the dashed form area in order to keep all fields in the same form.

More on the One-Line Text Box

• To specify more properties of the text box, right-click inside the box, and choose Form Field Properties.... This dialog box will appear:

You should always give meaningful names to all the fields in your page. After you publish the page on the web and somebody fills any information in this field, the name of the field will be recorded together with its value so you won't get lost while deciphering which value belongs to which field.

• If you want to set a default value, type that value in the Initial value field.
• You can also specify the expected length of the field value in the Width in characters field.
• If you select the Password field, the user won't see on the monitor what he is typing into this field.
• Once you have filled in all the options, click OK.

Here is an example of a form with two text box fields:

First name:
Last name:

Scrolling Text Box

Unlike the One-Line Text Box, the Scrolling Text Box can have more than one line.

• To insert it into your form, under the Insert menu, choose Form and then Text Area.
• To specify its properties, right-click inside the text box and choose Form Field Properties....

Here is an example of a scrolling text box fields:

Write your comments here:

Check Box

Here is an example of a form with check box fields:

Select your interests:

Arts

Biology

Chemistry

Engineering

History

Math

Each check box is a separate form field, so you have to insert each of them separately.

• To insert a check box field, under the Insert menu, click Form and then Checkbox.
• To change its properties, right-click the checkbox and choose Form Field Properties....

• You have to set a unique Name for each check box field in your script.
• You don't have to think out any Value. You can stay with the default one.
• In the Initial State field, you can select the default value when the page is loaded - either ON or OFF.

Radio Button

Radio buttons are used when you want the user to choose one of several options. Here is an example of a form with radio buttons:

Select your category:

Undergraduate Student

Graduate Student

Faculty

Staff

Each radio button is a separate form field and you have to insert each of them separately, but together they form a group in which at most one radio button can be selected at a time.

• To insert a radio button field, under the Insert menu, choose Form, and then Option Button.
• To change its properties right click inside the button and choose Form Field Properties.

• All radio buttons that belong to one group have to have the same Group Name. In each group, at most one radio button can be selected at a time.
• For each radio button, you should specify some meaningful Value, because after the user clicks Submit button, the value of the selected radio button is stored.
• With Initial State, you can choose which radio button in the group should be selected as default.

Drop-Down Menu

Here is an example of a drop-down menu:

George Washington Thomas Jefferson Abraham Lincoln John F. Kennedy

• To insert a drop-down menu, under the Insert menu, choose Form and then Drop-Down Box.
• To change its properties, right-click inside the drop-down menu, and choose Form Field Properties....

• You should again give a meaningful Name to the drop-down menu. Then you have to specify all choices of the menu.
• In field Allow multiple selections you can choose whether it is legal to select multiple lines from the menu or not.

• To add a new choice into the menu click Add... button and this dialog box will show up.

• Specify the Choice, and the Value will be set automatically.
• With Initial State field, you can specify if this choice should be selected as default.
• After you make all changes in this dialog box, click OK to return to the previous dialog box.

After you insert all choices, the Drop-Down Menu Properties dialog box can look like the one on this picture.

• If you need to change setting of any choice, highlight it, and click Modify....

Submit and Reset Buttons

Each form is created automatically with two buttons. The Submit button is used for submitting information after the whole form is filled. The Reset button clears all fields and resets them to default values. These buttons should be located at the bottom of the form.

Specify Form Properties

After you have added all the items to your form, you are still not done. You have to specify the handler of the script, that means how do you want to process the data that people will fill into the form.

We have created a very simple handler for you that sends all the data to you by email. To find out how to use it, click here to see another tutorial.