Making Forms with FrontPage
Lesson 9 Introduction
COSC 106 A, Tom Linton, Fall 2002

We need to understand the basics of using HTML tags to create FORMs so that we can create web pages capable of processing information and performing calculations. FrontPage does a pretty good job of making the creation of forms easy, but as usual, we'll have to edit some of the raw HTML ourselves. Our goal today will be to create a form we might use to take a food order at a fast food establishment. Here is an image of the form we're after!

an image of a form

Most of this activity can be completed by adding form objects from the Insert -> Form menu, and then double clicking on the objects and adjusting their properties.

For programming purposes later on, we will often need to set some of the invisible properties of our form objects, like their NAME or VALUE attributes. It may seem silly now, but since we'll need to do it later, we may as well start out by setting these properties from the very beginning (even though we cannot use these invisible attributes just yet).

  1. Add a lesson9 folder to your homework folder on the K drive.

  2. Start FrontPage and save the new page as foodform.html in your new lesson9 folder.

  3. Add a new form by using the Insert -> Form -> Form option from the menubar.

  4. Press [Enter] to create a line on which you can add text at the top of your form.

  5. Click on the HTML tab and replace FrontPage's form tag and comment, which should look something like this:

    <form method="POST"action="--WEBBOT-SELF--">
    <!--webbot bot="SaveResults" U-File="fpweb:///_private/form_results.txt"
    S-Format="TEXT/CSV" S-Label-Fields="TRUE" -->
    with just the following HTML:

    <form name="myForm">

  6. All of the words on the form are entered as plain HTML text. Add the forms red first line and the directions for the name entering field.
  7. To enter the text field for the customer to type in their name, select One-Line Text Box from the Insert -> Form menu.
  8. Double click the newly added text box and set the name to nameBox and the width to 20 characters.
  9. Add the blue text and then a 2x2 borderless table to hold the radio buttons.
  10. Add the first radio button and double click it to set its properties. Set the Group name to mainDish and the value to hamburger. Type in the label for the first radio button.
  11. Add the remaining radio buttons and the text by them, making sure they have the same group name as the first one and a value that describes the button (like cheeseburger, etc.).
  12. Add the bold text about drinks and then a Drop-Down-Menu from the Insert->Form menu.
  13. Double click the drop down menu. Set the name to drinks and then ADD the selections where the last one (No Drink) is the selected item (none of these need values for now).
  14. Add the text for the extra items and use a borderless table to insert the checkboxes. Don't worry about their values, but set their names to meaningful things like smallFry, largeFry, etc.
  15. Include the scrollable text box, and double click it to set it to be 30 characters wide, 5 lines tall, and have a name of comments.
  16. Double click the first button and change it to a normal button. Set its name to orderButton and alter its value or label to read "Take Order".
  17. Add some spaces between the two buttons and save your file. Preview your form and fill in some of the values. The take order button won't do anything now, but the reset button should work.