HTML Forms provide a way to prompt a user for information, and allow the user to enter information into the web page.  A program is used to process the information after the user enters it.  The most common type of Form processing program is a CGI script.  There are many different tags that are used to create Forms.  For example, you can create a simple text entry field to ask the user for a name, address, or other information.  Radio buttons give the user multiple choices, but they can select only one. Text Area fields provide a larger space for text entry.  These are often used as comment or suggestion boxes, but they can be used for a wide range of purposes.  Combo Boxes present a list of values that can be chosen by the user from a pull-down list.  These are often used as pull-down menus to navigate to web sites and can also be used to obtain information.  Checkboxes are similar to radio buttons, except checkboxes are not part of a group of choices, and either a box is checked, or not.

Beginning and Ending Forms
These are examples of the beginning and end tags to start/end a form.

<form METHOD=POST ACTION=”http://www.morris.umn.edu/~username/cgi-bin/scriptname.cgi”>
</form>

Parameters:

METHOD=POST or METHOD=GET

The METHOD parameter determines how the data will be sent to the CGI program.  The POST option is said to be more efficient, but either one should work.

ACTION=”The URL of the CGI program that will process the form”

The ACTION parameter is used to give the URL of the CGI program that will process the form.
 

Creating Text Fields
To create a text entry field you want to use the Input Tag.

Example of a plain text field:

<input TYPE=”text” NAME=”recipient” SIZE=”40” MAXLENGTH=”40”>

Example of Password Field:

<input TYPE="password" NAME="password" size="10" maxlength="10">

CheckBoxes, Pull-Down Menus, and Radio Buttons
Example of a Checkbox:

 <input TYPE="checkbox" NAME="checkbox" VALUE="Yes" checked>

Example of a Pull-Down Selection:

What country do you live in?
<select NAME="Country">
<option VALUE="USA">USA
<option VALUE="CA">Canada
</select>

Example of a radio button:

What type of computer do you have?
<input TYPE="radio" NAME="computer" VALUE="PC" checked>PC
<input TYPE="radio" NAME="computer" Value="Mac">Mac

Parameters:

TYPE=”value”
The TYPE parameter is used in the input tag to specify what kind of user interface will be in the form.
Values for the type parameter:

text  -tells the browser it is a text entry field
hidden  -tells the browser the field is not to be displayed
password -tells the browser to echo each entry in the field with an Asterisk (*****)
submit -tells the browser, when the button is pressed, to send the input to the CGI program to be processed
reset  -tells the browser to reset the form to the default values
checkbox -creates a checkbox to define input
radio  -creates a radio button to define input

NAME=”name”
This parameter provides a field name that is associated with the values entered.

SIZE=”40”
This parameter tells the browser how large to make the data field.

MAXLENGTH=”40”
This parameter tells the browser the maximum number of characters to be entered into the field. This can be larger than the size of the field.
 

Creating a Text Area
Below is an example of a Text Area Tag.  Text Areas are usually larger than Text Fields and are specified by rows and columns rather than characters.
 <textarea NAME=”comments” ROWS=”10” COLS=”70” >This is default text.
 </textarea>

Parameters:

ROWS=”10”
COLS=”70

Using Your Form
A Form requires a program to process it’s content. This example uses the CGI program called Formmail.  Formmail is a script that uses a form to get information from a user and then sends it to a specified email address.

<form METHOD=GET ACTION="http://www.morris.umn.edu/~username/cgi-bin/formmail/formmail.cgi">
<input type=hidden name="recipient" value="username@cda.morris.umn.edu">
Subject:
<input type=text name="subject">
Your Name:
<input type=text name="realname">
Your E-Mail:
<input type=text name="email">
<input type=submit value="Submit">
<input type=reset VALUE="Reset">
</form>