HTML Forms

A form provides an interface through which you can gather information from users who visit your web site. The user enters information into the form and then submits it.

HTML forms consist of two parts:

The HTML tags determine what you see when you display the form with a web browser. You can easily write this yourself.

The CGI script is a program that runs on the web server and processes the contents of the form. You will either have to write the script yourself, use a script that someone else has written (there are many available), or get a programmer to write it for you. It will need to be placed in a special directory on the web server--so you will also need to talk to your web master.


Within an HTML document, a FORM tag is used to specify a fill-out form. The syntax of this tag is

<FORM METHOD="method" ACTION="url"> ... </FORM>

The rest of your form tags go between the beginning form tag, <FORM>, and the ending form tag, </FORM>.  Let's see what sort of things we can put in our form.

The <INPUT> tag defines several different types of fields which request input from the person using the form.   The type of field is identified by the TYPE parameter.  Other parameters, some necessary and some optional, make up the rest of the INPUT tag.

The TEXT type creates a box in which text can be entered.  A NAME parameter is required to identify the name of the field.  The name is not displayed by the web browser but it is used by the CGI program to identify the input that the user enters in this field. Optional parameters are:
VALUE = the initial value of the field
SIZE = the length of the field
MAXLENGTH = the maximum length of the input field.
The <INPUT> tag used to create the following text field looks like this:
<input type="text" name="firstname" value="Tom" size="10">
Enter Your First Name: 
The PASSWORD type is the same as the TEXT type except that the characters entered will be displayed as bullets or astericks.  Try typing in the box below.  The parameters for the PASSWORD type are the same as for the TEXT type.

The <INPUT> tag used to create the following text field looks like this:

<input type="password" name="password" size="10">
Enter Your Password: 
The CHECKBOX type displays a box which can be checked on or off.  If the box is checked on, the browser returns a value of on to the CGI script for that variable when the form is submitted.  Optional parameters are:
VALUE = a text string used to override the value of "on" if the box is checked (eg., "yes")
CHECKED = a tag which indicates that the box should be initially checked (turned on).
The <INPUT> tags used to create the following checkboxes look like this:
<input type="checkbox" name="Computer">
<input type="checkbox" name="Stereo">
<input type="checkbox" name="VCR">
<input type="checkbox" name="moreinfo" CHECKED>
Check if you own any of the following:

Would you like more information about our company? 

The RADIO type creates buttons similar to the checkboxes that you can turn on or off.  Unlike the CHECKBOX type, however, you create a set of radio buttons that are grouped together.  Only one of the buttons in the set may be turned on.  Turning on a different button in the set automatically turns the other buttons off.  A set of radio buttons must all have the same NAME parameter but they each need different VALUEs; otherwise, the CGI script has no way of knowing which one has been turned on.  The browser returns the VALUE of the button turned on to the variable identified by NAME.  As with the CHECKBOX type, CHECKED is an optional parameter which can be used to initially turn a radio button on; however, it can only be used for one button in the set.

The <INPUT> tags used to create the following radio buttons look like this:

<input type="radio" name="sex" value="male">
<input type="radio" name="sex" value="female">

I am

Male Female 

The SUBMIT type creates a button which, when clicked, submits the form data to the CGI script for processing.  Optional parameters are NAME  and VALUE.  NAME would be used if you have multiple submit buttons so that the CGI script could distinguish what action to take and VALUE is the label that appears on the button (default=Submit).  Every form needs at least one submit button otherwise the form cannot be sent to the CGI script.

The <INPUT> tag used to create the following submit button looks like this:

<input type="submit" value="Process Form">

The  RESET type creates a button which clears all of the information entered by the user and allows him/her to start over again.  The reset button accepts the optional parameter VALUE.  VALUE is the label which appears on the reset button (default=Reset).

The <INPUT> tag used to create the following reset button looks like this:

<input type="reset" value="Clear Form">


The TEXTAREA tag defines an area in the form where the user can enter more than one line of information.  A NAME parameter is required to define the name of this field.  Also, you must define how large you want the area to be with the ROWS, and the COLS parameters.  The TEXTAREA tag must be closed with a </TEXTAREA> tag.  Within the beginning and ending TEXTAREA tags you can put any default information that you want to appear in this field.

The tags used to create the following textarea field looks like this:

<textarea name="comments" rows="10" cols=50">
Please enter any comments you may have below:


The SELECT tag is used to define two types of user input fields, menus and scrolled lists.  Like the TEXTAREA tag, the SELECT tag has both a beginning tag, <SELECT>, and an ending tag, </SELECT>.  The SIZE parameter determines whether a menu or a scrolled list is displayed.  If SIZE=1, a menu is displayed.  If SIZE is greater than 1, a scrolled list is displayed.  The NAME parameter is required to identify the name of the field.

Menu or list items are added with the OPTION tag, one OPTION tag for each item.  Optional parameters for the OPTION tag are VALUE and SELECTED.  If an OPTION tag has a VALUE parameter associated with it, that value is sent to the CGI script if that particular item is selected; otherwise, the value is the string of text that actually appears in the menu or list.  SELECTED just means that the item will be preselected (highlighted) on the form.

The scrolled list has one more option that the menu does not have and it goes with the SELECT tag itself, not with the OPTION tags.  MULTIPLE specified on the SELECT tag indicates that more than one item in the list can be selected.

The <SELECT> tags used to create the following menu looks like this:

<select name="interest">
<option value="Pick">Pick an area of interest
<option value="Computer">Computers and Technology
<option value="Engineer">Engineering
<option value="Humanities">Humanities
<option value="Science">Math and Science


The <SELECT> tags used to create the following scrolled list looks like this:

<select name="interest" size="4" multiple>
<option value="Computer" selected>Computers and Technology
<option value="Engineer">Engineering
<option value="Humanities">Humanities
<option value="Science">Math and Science

Pick an area of interest


The table below summarizes the various form tags that are available along with their required and optional parameters

    Begin Form
<FORM ACTION="url" METHOD="method">

OPTIONS: VALUE="value" SIZE="size" MAXLENGTH="size

<INPUT TYPE="password" NAME="name" OPTIONS

OPTIONS: VALUE="value" SIZE="size" MAXLENGTH="size

<INPUT TYPE="hidden" NAME="name" VALUE="value">
Multi-Line Text
<TEXTAREA NAME="name" ROWS="rows" COLS="cols"> 

any default text goes here...


<INPUT TYPE="checkbox" NAME="name" OPTIONS


Radio Button
<INPUT TYPE="radio" NAME="name" VALUE="value" OPTIONS


<SELECT NAME="name"> 

<OPTION OPTIONS> first menu entry goes here 

<OPTION OPTIONS> second menu entry goes here 




Scrolled List

<OPTION OPTIONS2> first menu entry goes here 

<OPTION OPTIONS2> second menu entry goes here 





Image button
<INPUT TYPE="image" SRC="image-source" OPTIONS


Submit button

OPTIONS: NAME="name" VALUE="value

Reset button


End Form