MS FrontPage —

Creating a Form Manually

You can add a form to any Web page. It doesn't even have to take up the whole page. For instance, you could insert a small form with just one field at the bottom of a page. After you insert the form, you'll need to fill it with form elementslike text boxes, drop-down menus, and radio buttons.

Creating a Form

To create a form, place your cursor where you want the form to start and select Insert » Form » Form (see Figure 15-1).

Figure 15-1. If you'll be creating a long form, you may want to speed your work by freeing the Forms submenu from the FrontPage menu system. To do so, click the top border and drag it away from the menu. The submenu turns into a toolbar containing shortcuts to the form elements that you'll add.

FrontPage inserts a form on your pagea dotted line in the shape of a rectangle. At first, all that's in your form are two buttons: Submit and Reset. Later, a visitor will use these buttons to send you the info he's entered (Submit) or to start over again (Reset).

FrontPage supplies you with a form creation shortcut. Just insert any form element on a page (details on form elements follow in the next section), and FrontPage automatically creates a form to surround it.

The area inside the dotted lines is your work area. When you add elements to your form (which you'll do in the next section), make sure you're inserting them inside the dotted lines.

If you add an element outside the bounds of your form, FrontPage creates another form on the page. While the program lets you include multiple forms on one page, you wouldn't want to, because a visitor can submit only one form at time (and when she does so, the page disappears from view).

If things seem a bit cramped inside your form, make some space. Place your cursor in front of the Submit button in the document window. (If you have trouble clicking in that spot with your mouse, use the arrow keys on your keyboard to get there.) Then press Enter a few times to insert some paragraph returns. This way, you'll have plenty of room above your Submit button to lay out your form.

Adding Form Fields

Inside the bounds of your new form, you'll enter form elements (fields that a visitor fills out) and text labels for each (so visitors know what information you're looking for). You can lay out elements of a form just as you'd lay out any Web page. For best results, insert a table (Tutorial 5) in your form so you can better organize form fields and their labels. As you'll see, form elements come in all shapes and sizes. If you insert them without a table, in the regular flow of HTML text, your page can look unkempt and difficult to follow. Wrangling form elements into a table can really tidy up your page.

Each form element consists of two parts: name and value. Name is what you decide to call the field. For instance, say you've created a checkbox that a viewer can turn on if he wants more information. You could name that field "moreinfo." An element's value is the part that your site visitors provide. This can be text they enter in a text box or a checkmark they place in a checkbox.

Only when these two parts of a form element work together, does your data make sense. For instance, if a visitor turns on a checkbox, you need to know the name of it. Did they place a checkmark in the "Send me more information" or the "Never contact me again" box?

Below, you'll walk through the basic process of adding a form field, then you can read on to understand what kind of data you can collect with each type of element.

Don't forget! You have to enter all form elements within the dotted line that represents the form's border.

No matter what form element you're adding, the process you'll follow is pretty much the same:

  1. Click inside a form where you'd like to place the element.

  2. Select the form element.

    On the Form toolbar, click the type of element you want to add, or select Insert» Form and then click the element type you want on the Form submenu. The element appears on the page.

  3. Name the element.

    FrontPage automatically names all elements something like "T1" or "C2," which won't do you much good. Give all your page elements descriptive names that you'll recognize quickly. For instance, if you're requesting a visitor's email address, you can imagine how naming the field "email" instead of T1 will be much more helpful when you're looking over results. To name an element, right-click it, and then select Form Field Properties. Replace the text in the Name box. Names should be short, lowercase, and include no spaces or special characters.

    Each form element must have a unique name. If two elements have the same name, FrontPage alerts you to the problem. Correct it immediately to avoid confusing yourself and creating form validation problems (you'll learn about validation later in this tutorial).

  4. Set element (form field) properties.

    In addition to a name, each form field has other properties, which depend upon what type of element you've chosen. Details follow in the next section under each element's description.

  5. Enter a text label for the field.

Each field needs a corresponding label that lets a visitor know what information you want her to enter. Again, organizing fields and labels in a table will help you create a pleasing page layout that's easy to follow.

Configuring Form Fields

FrontPage offers a variety of form fields, to help you collect different types of information from your site visitors. Each element has its own purpose and properties (see Figure 15-2). To edit the properties of a form field, just double-click it. Or, right-click it and select Form Field Properties.

Figure 15-2. Different form fields collect different kinds of information. For instance, a text box holds short words or phrases, while a text area can contain a visitor's life story. A group box (which is purely ornamental) can help you organize other form elements. Checkboxes often appear in groups but function independentlya visitor can turn any checkbox on or off. Option (radio) buttons work togethera visitor can select only one.

Text box

Use text boxes to collect short chunks of text, like names, email addresses, and phone numbers.

When you insert a text box, FrontPage gives you the following additional configuration options:

  • Initial value. If you want the text box to appear with some text already in it, enter that text in this field.

  • Width in Characters sets the size of your text box as it'll appear on the page. You can also just click a handle on the edge of the text box and drag to change its size. This figure doesn't limit the number of characters a visitor can enter; it just controls the display size of the field. To learn how to limit the number of characters a text box accepts, see "Validating Text Fields" on Section 15.3.1.

  • Password field. If you're asking for sensitive information that your visitors probably want to keep secret, then choose Yes for this option. As a result, asterisks appear instead of letters and numbers when your visitors type.

Choosing Yes at the password field option affects display only. Once a visitor clicks Submit, this info travels as plain text like any other field. Therefore, this feature doesn't ensure that the information a visitor enters is secure from hackers and eavesdroppers. To truly protect information like account numbers and passwords, you've got to encrypt (scramble) it using SSL (Secure Socket Layer).You've probably seen this in action while you've surfed the Net. Your browser usually displays a message letting you know that info you send will be encrypted. Also, a padlock icon shows up somewhere along the status bar at the bottom of the screen. When you're browsing pages on the Web, never enter sensitive information in a Web form unless your browser is displaying that little padlock. If you want this kind of security on your site, get in touch with your Web server administrator, who'll need to set this up on the server. He can also tell you what you need to do. Often you'll need to purchase an encryption certificate, but check with your host or administrator first.

Tab Order

Most computer programs that ask you to enter data in fields feature a popular keyboard shortcut to help you move from field to field: the ever-friendly Tab key, which lets you hop from one field to the next. Most visitors expect Web forms to work the same way. If you set a tab order for your form, visitors will thank you. Doing so no only makes your page seem more professional, it also helps speed viewer entries. They'll be able to type, tab, and keep typing, without moving a hand over to the mouse.

Tab order should be intuitive. In other words, it should follow the order in which a viewer would read your form: from left to right and top to bottom. To set a tab order, just enter numbers in the tab order field for each form field's properties dialog box. Tab order goes from low to high, but they don't need to be in exact sequential order (1, 2, 3, 4, and so on). You can skip numbers if you want (3, 7, 22, for example). But always remember, the viewer's cursor moves in order from lowest to highest. (Leave this task for last, as you'll probably move form fields around until you're satisfied with the page layout.)

Text area

The text area box is for your long-winded, loquacious types. Basically this is just a very large text box. Property settings here are the same as they are for a text box, with one exception. The Number of Lines field sets the height of the text area box. You can also use this element's resize handles to change dimensions. (As with text boxes, the size of the box doesn't limit the number of characters a visitor can enter. To learn how to limit the number of characters a text area box accepts, see "Validating Text Fields" on Section 15.3.1.)

Checkbox

To the simple checkbox, life's an all or nothing affair. A checkbox is either on or off. This element is great for "check all your areas of interest" type questions. A visitor can turn on one, two, all, or nonehowever many she wants.

If you have a checkbox or two in your form, be sure to configure the following options in the Form Field Properties dialog box:

  • Value. This is the text you'll see (in an email, text file, or database) if a visitor turns on your checkbox. FrontPage automatically enters the text "ON" in this field, which in most cases will do quite nicely. This way when a checkbox is on you'll see the text (checkbox name)=ON.

  • Initial State. Do you want the checkbox to appear with a checkmark already in it? This might be a way to encourage people to join your mailing list, for instance. If they neglect to uncheck it, then you've got 'em. (Actually, nobody falls for that anymore.) Whatever your strategy, if you want the checkbox turned on when a page first loads, choose Checked.

Option (or radio) button

Option buttons present your visitors with a choice. These buttons appear in groups, and a viewer can select only one. When you select or activate one option, all others turn off. You can use this field type for simple Yes or No questions, or for multiple-choice questions where you only want one answer.

The rest of the worldincluding HTMLcalls option buttons "radio buttons." Option is a good name for them, too, since a viewer can choose only one option, but you may see the old-fashioned term "radio button" as well. Perhaps those in charge of user-friendly naming at Microsoft felt that most people are now too young to remember the old radios that let you change the station by pressing a button. Press one and you were listening to a station down at the right end of the dial. Press another and you moved left, up the dial, to a different station. In other words, when you pressed a radio buttonyou'd selected that one option (radio station) only, while turning off any others that you'd previously selected.

While all other form elements require a unique name, option buttons are the exception. Because they work together, all option buttons in a group should have the same name. FrontPage takes care of this for you if you insert option buttons one right after another. Insert another element in between, and FrontPage gives the latter radio button a new unique name. (If need be, you can edit the "Group name" field (in Form Field Properties) so all the buttons in one group match each other.)

Other fields you'll configure for option buttons are:

  • Value. Type in the name of the option here. Since FrontPage has co-opted the Name field to group your option buttons, you'll use this field to identify each individual option. When you get your results, you'll see the value for the selected option (and none of the other options). Make sure each option has its own unique value, so you can tell which one your visitor selected.

  • Initial State. Specify, if you want, a particular button selected when the page first displays in a browser. (You can only choose one within a group.)

Drop-down box

Option buttons and checkboxes are nifty, but what if you've got a really long list of choices? Adding all those buttons to your form would take up a lot of screen real estate. If you've got a ton of options, try consolidating them in a drop-down list.

When you insert a drop-down box, it shows up empty. You've got to add choices. To do so, double-click the box to open the Drop-Down Properties dialog box (see Figure 15-3).

Figure 15-3. Build your list of choices in the Drop-Down Box Properties dialog box. After you add selections, click Move Up or Move Down to position them within the list.

To add a choice, click Add. In the Add Choice dialog box that opens, type in the name for your choice. If you want the Web server to send you a result value other than the one you just typed, turn on the "Specify value" checkbox, and then type the value in the line below. Click OK, and FrontPage adds the new entry to the list.

Other configuration options in the Drop-Down Box Properties dialog box include:

  • Height. Type how many rows of your drop-down box you want to display on the page. Most lists display only one line, but you can show viewers a few selections if you want.

  • Allow Multiple Selections. You can let visitors select more than one option at a time, by clicking Yes here. If you activate this option, a drop-down list can serve the same purpose as a group of checkboxes.

When your list appears on a Web page, the first item in the list shows. If you'd prefer that another item in the list display instead, but don't want it at the top of the list, do the following: Highlight the choice in the Drop-Down Properties dialog box and click Modify. In the Modify Choice dialog box, under Initial state, click Selected and click OK.

You can also make your first choice, which displays on the page, be some instructional text like "Select an item below." Just enter it as the first choice and use validation settings (Section 15.3.1, later in this tutorial) if you want to force a visitor to choose another selection.

File upload

Suppose a form can't hold all the information you're looking for. Maybe you want visitors to send you their rsums, business plans, or pictures of their pets engaging in water sports. You don't need to make them paste any of these items in a text area box. Let them send you their files in all their glorythat's right, you can let a visitor upload an entire file to you by letting them use a form.

You'll need to check with your Web server administrator to make sure the server accepts anonymous file uploads. For security reasons, many don't.

Insert a File Upload field as you would any other. Once it appears on your page, you'll see that it features a simple text field and a Browse button. FrontPage has preprogrammed this button to let a visitor browse his computer to select a file. You can't edit the button or its label.

Double-click the upload element, and FrontPage lets you select a destination folder for uploaded files. Create a special folder in your site to hold these files. If you want to keep them out of the public eye, create an uploads folder within your _private folder and select it. (The _private folder is off-limits to site visitors. FrontPage excludes it from searches and browsing.)

When you add a file upload element to a form, FrontPage adds a special File Upload tab to the Saving Results dialog box, which you access through the Form Properties dialog box (see Figure 15-4). (To open it, right-click inside the form, select Form Properties, and then click Options.)

Figure 15-4. Not only can you change the target directory for file uploads at the top of this tab, you can also assign uploaded files to an individual for review or to a category or review status. Because FrontPage lets you fold uploaded files into the program's workflow features (see Tutorial 14 for details on these), you can flag and process uploaded files much more easily. Use these features to tell you when your site's received new files.

Group box

Often you'll want to group some of your form fields together, both for aesthetic reasons and to help let viewers know what you're looking for. A group box surrounds a bunch of elements with a border and provides a heading for them (for a picture of what the group box looks like, pop back to Figure 15-2).

When you insert a group box, it's empty. You've got to paste or insert form fields in it after you create it. Group boxes always fill the browser screen horizontally. If that's too wide for you, try inserting the group box inside a table cell.

Label

As you've read, you label your form fields using simple HTML text. All you can do is position labels next to fields to try to make it very clear which label goes with what field. While that's true, FrontPage can enhance the label setup that you created by linking a label to a field. One advantage to doing this is that a visitor won't be limited to just clicking in an element (for instance, a checkbox) to turn it on. She could click the field's label, too. More importantly, labels make your form more accessible for visitors who are viewing impaired. If an author lays out a form poorly (see Figure 15-5), screen readers can have a terrible time connecting labels with fields. This makes it really difficult for a visually impaired visitor to fill out the form correctly. If you link a field with its label, you can avoid any such confusion.

Figure 15-5. Because screen readers read cell contents in the order in which they appear in HTML code, a form layout like this makes no sense. First, it would recite "Last Name, Email, Telephone," and then it would see three text boxes in a row. It's better to have a form field next to a label; if you link them to each other, you put the icing on the cake. Naming your fields appropriately helps a lot, too.

To link a field and its label together, you already need to have both elements in place. Select them both and select Insert » Form » Label, or click Label on the Form toolbar. FrontPage puts a dotted line around the label to let you know it's linked to its field.

Buttons

All the form fields you just read about would be nothing without a means to send the information. That's where the not-so-humble form button comes in.

Submit and Reset buttons

When you create your form, FrontPage automatically gives it two buttons: Submit and Reset.

The Submit button is the form's control center. All form activity revolves around this important hub. After a visitor fills out a form and clicks Submit, the action starts. The Submit button tells the Web browser to send the form data to the Web server.

You don't need to configure this button in any way. If you want, you can change its label (right-click the button, select Form Field Properties, and then edit the Value/Label field).

The Reset button is the visitor's "do over" option. If a visitor clicks Reset, the form returns to its original state. This button doesn't clear the form. Instead, whatever the visitor saw when he first opened that pagelike empty fields and some preset optionshe'll see again.

Normal button

If you want to add another kind of button to a pageperhaps one that links to more information, for instanceyou can add what FrontPage calls a "Normal" button. Unlike the Submit and Reset buttons, a Normal button has no preset mission. To get a Normal button, select Insert » Form » Push Button (Figure 15-6).

Figure 15-6. All three types of buttonsSubmit, Reset, and Normalshare this Push Button Properties dialog box (double-click any button to access Button Properties). You can change the way a button works by using this dialog box. For example, turn a Normal button into a Submit button by selecting that button type.

Advanced button

The Advanced button is a more flexible variation on the Normal button. You can type a label directly on it as soon as you create it or resize it; you can even insert an image in it.

Using a picture as a Submit button

If you want to jazz up your page, you can have a picture serve as the page's Submit button. To do so, insert a picture in your form using the Form menu (select Insert» Form » Picture or click Picture on the Form toolbar). FrontPage inserts the picture, which is automatically turned into a Submit button (because you inserted it via the Forms menu).

Hidden Fields

Suppose you want some additional information to tag along with the data a visitor submits. For example, say you edit your forms often and you want to know the form's version number. You can insert this in a hidden field and it'll show up in your results along with the rest of the form values. Often, Web programmers need to use hidden fields to communicate information to a script or database that's processing results.

To add a hidden field: right-click the form and then select Form Properties. In the Form Properties dialog box, click Advanced to open the Advanced Forms Properties box. Click Add. Enter a name and value for the hidden field (see the illustration) and click OK. Click OK in all open dialog boxes to save your new hidden field.