home / articles / frontpage

Designing Forms With FrontPage 98

For the next several weeks,  I want to talk about designing forms with FrontPage 98. I will do this by walking you through the process, and show you some tips along the way.

Part 1: Form Layout

I use a lot of forms. So, I like to keep the Forms Toolbar handy. You can show the Forms Toolbar by selecting it from your View menu in FrontPage Editor. The first thing I wanted to do was to create the form itself. So, since my first form field will be a textbox, I clicked the textbox icon on the toolbar. Note the Forms Toolbar at the top:

Also, note how the Submit and Rest buttons are added automatically when you create the first form field. Additonal form fields can (and will) be added by placing the cursor inside the dotted lines (which indicate the form area), and clicking the proper icon on the toolbar.

Next, I placed my cursor at the end of the textbox, and hit <ENTER>. This moved the buttons below the textbox. Then I placed the cursor in front of the box and added a label. Placing my cursor at the end of the box again, I pressed <SHIFT><ENTER>. This placed a line break after the textbox. On the next line, I typed a label and clicked the textbox icon again, to add a second form field:

Using the same procedure, I added several other form fields. The first was a drop-down list box. After inserting the drop-down list box, you need to add items to the list. You can do this by double-clicking the form field and selecting "Form Field Properties" from the popup menu. You'll see the following dialog box:

Not how I've given the form field a descriptive name, "interest." Using descriptive names makes it easier to remember the form field when you are dealing with the Form Handler (more on that later). A few notes about the names you give to your form fields:

1. Don't use spaces in the names. These confuse some browsers.
2. I always use all lower case. Some browsers are case-sensitive, and it's easier to remember that all your letters are lower case (or upper case, if you like), when referring to these form fields later on.
3. Use a descriptive name, one that's easy to remember

The buttons on the right are for adding, modifying, and changing the order in which the various items appear. The "Height" box indicates how many items will be showing when the box is "closed" (before the user clicks inside to bring out the list). This is almost always set to "1." "Allow Multiple Selections" is almost always "No." the reason for this is that when the form is posted, only ne value can be sent from the form field. There are ways of using a drop-down list box to select and send multiple values, but it's much easier to use a set of checkboxes to do this, and less confusing to the user as well. Here's an example:

Each of these is a separate form field. A Check box has 2 possible values, "ON" and "NOT ON" (TRUE or FALSE, 1 or 0). The user can check any, all, or none of them. BTW, I placed these 4 form fields in a table which I inserted into the form. Also, FP 98 has the ability to create a "label" for a checkbox form field. You know, so that you don't have to hit that tiny checkbox with your mouse, but can hit anywhere in the box or the label itself. To do this, select both the checkbox and the text following, then select Insert|Form Field|Label from the menu. However, be advised that as far as I know, only IE 4.0 will support the label usage. On the other hand, it won't hurt for it to be there, as a convenience for those who can use it.

How about some radio buttons? Radio buttons are similar to a drop-down list box in that the user selects one of them, and the others are not selected automatically. Radio buttons come in "groups." A Radio button group has a single group name, but several button names. To create my radio button group, I added another table, and inserted a radio button and label into each cell. Then I edited the properties of each button to reflect the same group (which I named "sex") and the value of each button. When the form is posted, the value of the selected button is sent to the form handler. Below is a screen shot of the "Radio Button Properties" dialog box:

You can also create activatable labels for Radio buttons. You use the same method that you employ with checkboxes.

The final form field I will demonstrate is the "scrolling text box." This form field is used to contain large amounts of text, usually a paragraph or more. Here's the screen shot:

Some notes about text boxes and scrolling text boxes. You can use FP 98's drag and drop capabilities to modify the size of these. If you select the box and place your mouse cursor over the edge of the box, you can drag it to resize. Also, be aware that form fields look markedly different in Netscape and IE; they are much shorter in IE. Beware of designing them to reach all the way to the edge of the page in FP and IE. When viewed in Netscape they will be monstrous! This is due to the fact that the size of these elements is determined in characters. In Netscape, the font used in text boxes (and scrolling text boxes) is quite wide.

Also, text boxes and scrolling text boxes can have a default value, that is, something typed in them when the form is first opened. You can do this to save the user time, suggest something, or what-have-you. To enter a default value, double-click the form field, and select "Form Field Properties" from the popup menu. You will see a "default value" box in the resulting dialog. Type in your default value and save.

A few random tips: By making use of tables, you can organize your layout in an attractive manner. Be sure to use the proper form field for the type of information you want to gather. And try to organize your forms in an easy-to-understand fashion. Oh yes. Put your Submit button at the bottom. Why? Because that's usually the point at which someone will be ready to submit the form! Believe it or not, I've seen some forms with the buttons at the top. Weird, but true.

Next week I'll talk in depth about form handlers of all kinds (and there are all kinds of them!). The following week, I'll go into detail about form field validation (a very good idea!).

Until then, then.

Author: Kevin Spencer
Date: 01/23/98

More articles about Microsoft FrontPage
More articles by Kevin Spencer
Author Biography