Lesson 7
Forms and CGI

The HTML forms is used to collect information on a web page. If you want to do anything with that information you must use same addition program called a CGI script. These CGI scripts can be written in several different computer languages and it is beyond the scope of this course. We will use two different ready-made scripts to demonstrate some of the possibilities.

Forms can be created as a separate document or they can be a section of a longer document. The different input elememts available with forms include single and multiple line text, radio buttons, check boxes, menus, and passwords fields.

Here's what the opening tag looks like:

<form action="addressOfCGIScript.cgi" method="post">

Of course instead of "addressOfCGIScript.cgi" you would put the actual address, either relational or absolute (with the http and the www stuff).

• text
• password
• checkbox
• radiobutton
• hidden field
• reset
• submit
• image (used as a submit button)

Input fields also have a name and a value. The name/value pairing is an basic and important concept. When the information is sent to the CGI script, it is send in the name/value pairs. In the following example using a text input field, the name of the field is "Full_Name" and the value is "Erase this text and enter your full name" Here is a sample:

<form action="addressOfCGIScript.cgi" method="post">
<input type="text" name="Full_Name" value="Erase this text and enter your full name">
<input type="reset">
<input type="submit" value="send">
</form>

Here's what it looks like:

This form doesn't really do anthing or even work because the action attribute is a fake name. At the end of this lesson we'll rig up a form to a real CGI script.

The textarea tag allows you to create a multi-line input area for the web page visitor. The attributes for the textarea tag are "cols=" and "rows=", you type in the number of characters for width (cols) and height (rows) of the textarea. Continuing with the previous example:

<form action="addressOfCGIScript.cgi" method="post">

<input type="text" name="Full_Name" value="Erase this text and enter your full name"><br>
Your essay on why you love/hate ice cream.<br>
<textarea cols="30" rows="20" name="essay"></textarea>
<input type="reset">
<input type="submit" value="send">
</form>

Here's what it looks like (it's still a fake):

<form action="addressOfCGIScript.cgi" method="post">
<input type="text" name="Full_Name" value="Erase this text and enter your full name"><br>
Your essay on why you love/hate ice cream.<br>
<textarea cols="30" rows="20" name="essay"></textarea><br>
What is your favorite Ice Cream?
<select name="Favorite_Ice_Cream">
<option>Chocolate
<option>Vanilla
<option>Rocky Road
<option>Strawberry
<option>Garlic Anchovy
</select>
<input type="reset">
<input type="submit" value="send">
</form>

Here's what it looks like (it's still a fake):

I'm easily amused.

Notice how the table is used to control the page layout of the form. This insures the the labels and the buttons will line up properly. Also notice the use of a hidden field. It doesn't show up in the browser but it is information that shows up in the response page. Hidden fields are not used to keep secret information (anyone can save as source and read the hidden value) but they are useful for identifying which form is being processed by a CGI script that processes multiple forms.

Here's how it looks in HTML code:

<form action="http://www.guitarland.com/FormParse.cgi" method="post">
Enter your name:<input type="text" name="name" value="">
<p>
<table><tr>
<td align="center">Left Handed</td>
<td align="center">Right Handed</td>
</tr><tr>
</td>
<td align="center"><input type="radio" name="left/right" value="left handed"></td>
<td align="center"><input type="radio" name="left/right" value="right handed"></td>
</tr></table>
<br>
<table><tr>
<th colspan=3 align="center">Sex</th>
</tr align="center"><tr>
<td align="center">Male</td>
<td align="center">Female</td>
<td align="center">Yes</td>
</tr><tr>
<td align="center"><input type="radio" name="sex" value="male"></td>
<td align="center"><input type="radio" name="sex" value="female"></td>
<td align="center"><input type="radio" name="sex" value="yes"></td>
</tr></table>
<br>
<select name="Favorite_Music">
<option>Bluegrass
<option>Rock
<option>Jazz
<option>Classical
<option>Renaissance
<option>Baroque
<option>Blues
<option>12 tone serial
<option>Polka
<option>Punk
<option>Hip Hop
<option>Surf
<option>Heavy Metal
</select><br>
Please share with us your words of wisdom.
<textarea cols=30 rows=20 name="Words_of_Wisdom"></textarea>
<input type="hidden" name="Hidden_Word" value="A_message_in_a_bottle">
<input type="reset"><input type="submit" value="submit">
</form>

Here's how it looks on the page. Try it out. Then use the browser's "back" to return to this page.

After clicking on submit use the browser's "back" button to return to this page. If you want to try out a form of your own design, test it out by using the same opening form tag as this one:

<form action="http://www.guitarland.com/FormParse.cgi" method="post">