Starting an Online Form with the <Form> Tag

Before you begin to plan the layout, there are several elements which are commonly used in Web page forms which needs to be addressed.

  • Input boxes for text and numerical entries
  • Radio buttons, also called option buttons, to select a single option from a predefined lists
  • Selection button for long lists of options, usually in a drop-down list box
  • Check boxes to specify an item as either being present or absent
  • Text areas for extended entries that might include several lines of text
  • Submit and Reset buttons to either submit the form to the CGI script or to reset the form to its original state.

Each element in which the user can enter information is called a field. Information entered into a field is called the field value, or simply the value. Before you can create any field, you must first indicate to the browser that the page will contain fields. You do this using the <FORM> tag. The general syntax of the <FORM> tag is:



Between the <FORM> tags, you will place the various tags for each of the fields in the form.

First, set up a basic HTML page in your text editor (<HTML>, <HEAD>, <TITLE>, </TITLE>, </HEAD>, <BODY>, </BODY>, </HTML>). Remember to place the The name assigned for the title will be Ice Cream Flavor Contest. Save your file, using the .html extension, under the name contestform.html.

Return to your text editor and place your cursor behind the beginning body tag and press enter to create a new blank line. You will center the companies logo here. Create a text image in flash or fireworks and export it as a gif file. Write the HTML code to center it in the blank line created under the beginning body tag. Press the enter key to insert a blank line and type in the contest form directions as follows:

Enter our flavor contest and win up to $5,000. All you have to do is fill in the following information to help develop a new flavor of ice cream. If your entry is chosen as the best, you will win the $5,000 grand prize. Random drawings from remaining entries will win a years worth of free ice cream.

Save your file and view it in a browser window. Make sure your logo is centered at the top of the page and your description of the form is aligned to the left of the page and directly under the logo.

Return to the file contestform.html in your text editor. Directly above the </BODY> tag insert the following two lines:



Turn to page 6.9 in your textbook. This is how your form will be laid out. Figure 6-5 shows the simple two-column table that you'll use to create the form. Now, you'll add the tags for the two-column table to the contestform.html file.

Go to the <FORM> tag in the contestform.html file. Insert the following two lines between the <FORM> AND </FORM> tags:



Save your changes. With the <FORM> and <TABLE> tags in place, you can now start to insert tags for each field in the form. You'll begin by learning how to create input boxes.