Help with Online Help: Spinning Web Pages
By Ann-Marie Grissino

Want to do something so special that no one else will be able to do again until the year 4360? Spend some time gazing at the stars in March and you'll see the Hale-Bopp Comet, an unusually large comet, almost 25 miles across. And, for those adventurous travelers
among you, here is a chance to design a Web page that offers reservations for comet-gazing tours!

In this part of the online documentation series, we show you how to create an HTML-formatted form that allows users to enter data on a Web page and send it to a Web server. We include the HTML code, explanations of the code, and the resulting Web page. This article assumes some HTML knowledge.

The End Result

Let's start at the end for a change. Here's the Web page form that appears when you finish coding. We'll concentrate on the following four elements:

• Select drop-down list
• Checkboxes
• Radio buttons
• Submit and Reset buttons

Starting a Form

To start a form on a Web page, surround the parts of your form with the <FORM> and </FORM> tag pair.

<FORM METHOD=POST>
[parts of your form]
</FORM>

The <FORM> tag supports two METHOD attributes: GET and POST. METHOD indicates how information in the form is transferred to the Web server. Typically, use POST, which tells the server to process the entire form as one long concatenated line. (GET tells the server to process the form line by line.)

Creating a Select List

Creating a drop-down selection list requires using the <SELECT> and </SELECT> tag pair. Here's the code for a drop-down list.

<B>Select budget:</B>
<FORM>
 <SELECT NAME=”budget”>
  <OPTION>Unlimited</OPTION>
  <OPTION>Affordable</OPTION>
  <OPTION>Shoe-string</OPTION>
 </SELECT>
</FORM>

We bolded the Select budget label (<B> denotes bold). Labels for each field indicate what you expect the user to do.
You assign a name to the selection menu. Each item in the selection requires the <OPTION> tag. We named the list "budget." Notice the list includes three options: "Unlimited," "Affordable," and "shoe-string." Each option is encased in the <OPTION> and </OPTION> pair. (The elipses in the sample code represent additional code not displayed.)

The user can select one of the options. To let the user select multiple options, just include "MULTIPLE" inside the <SELECT> tag.

Creating Checkbox Fields

Many other fields, including checkboxes and radio buttons, require the <INPUT> tag. With this tag, you name the element, identify the type of input (for example, checkbox or radio), and optionally provide a value for it. Here's how we coded the checkboxes:

<B>Select preference:
</B><BR>
<INPUT NAME=shuttle” TYPE=”checkbox” VALUE=”checked”>
Space shuttle excursion
<BR>
<INPUT NAME=”desert” TYPE=”checkbox”>
Clear view from Mojave desert
<BR>
<INPUT NAME=”dinghy” TYPE=”checkbox”>
Open-ocean view two-man dinghy (oars included)
<BR>

We placed the label of 'select preference" in bold text above the checkboxes. We set line breaks (<BR>) to start each checkbox on a new line. Because we assumed that most people would choose the space excursion (of course!), we placed a default check in the first checkbox by inserting the optional value of "CHECKED."

Creating Radio Buttons

Next, we displayed two radio buttons, from which you can select only one. Code radio buttons with the <INPUT> tag. Identify the TYPE as "radio" and define the options with the same name, unlike checkboxes, which use different names. Using the same name forces a single selection: yes or no.

<INPUT NAME=”showing” TYPE=”radio”>Yes
<INPUT NAME=”showing” TYPE=”radio”>No

Creating Submit Buttons

To send the data that Web walkers enter in your form to the Web server, include a Submit button (ours shows the label of "Reserve"). To let the user clear all of the fields in the form with one click and reset them to their initial values, include a Reset button. Here's how:

<INPUT TYPE=”SUBMIT” VALUE=”Reserve”>
<INPUT TYPE=”RESET” VALUE=”Reset”>
</P>

Include the buttons with the <INPUT> tag, identify the type as either SUBMIT or RESET, and optionally assign a value. If you do not assign a value, the labels appear as "Submit query" and "Reset," respectively. Although the value for RESET is unnecessary in the sample, it demonstrates the option.

Viewing the HTML Code

That’s it. Collect reservation data from those Hale-Bopp comet watchers and send them off on their tours. Here’s the final code.

<HTML>
<HEAD>
 <TITLE>Keypoint Consultants Web Tales</TITLE>
</HEAD>
<BODY BACKGROUND=”#FFFFFF”>
 <H1>Hale-Bopp Comet</H1>
 <B><I>Viewing Selection</I></B>
 <IMG SRC=”astronom.gif” VALIGN=”TOP”ALIGN=”RIGHT”>
 <P>The Hale-Bopp Comet arrives from the distant edges of our solar system this spring! Reserve your viewing preference now!</P>
 <P></P>
 <B>Select budget:</B>
 <FORM>
  <SELECT NAME=”budget”>
   <OPTION>Unlimited</OPTION>
   <OPTION>Affordable</OPTION>
   <OPTION>Shoe-string</OPTION>
  </SELECT>
  <HR>
  <B>Select preference:</B><BR>
  <INPUT NAME=”shuttle” TYPE=”checkbox” VALUE=”checked”>Space shuttle excursion<BR>
  <INPUT NAME=”desert” TYPE=”checkbox”>Clear view from Mojave desert<BR>
  <INPUT NAME=”dinghy” TYPE=”checkbox”>Open-ocean view two-man dinghy (oars included)<BR>
  <HR>
  <B>Reservations for next showing? (4360 A.D)</B><BR>
  <INPUT NAME=”showing” TYPE=”radio”>Yes 
  <INPUT NAME=”showing” TYPE=”radio”>No
  <P>
   <INPUT TYPE=”SUBMIT” VALUE=”Reserve”> 
   <INPUT TYPE=”RESET” VALUE=”Reset”>
  </P>
  <P></P>
  <HR>
  <P></P>
 </FORM>
</BODY>
</HTML>

NOTE: To prepare the Web page for a small screen capture for this article, we inserted the drop-down list box in a table of one row and two cells with the label in one cell and the list in the other. This forced the menu to appear on the same line as the label. To enhance readability, we deleted the code that creates a table from our sample.