CGI HTML Forms

Overview

Here's a quick reference for all the different types of forms that HTML supports:

<FORM Method="GET|POST" Action="URL"> </FORM> a Form with a CGI program at URL
<INPUT Name="name" Type=" text | hidden | password | image | submit | reset | checkbox | radio"> Input widget with symbolic name, name
<TEXTAREA Name="name" Rows="R" Cols="C"> Text area (lines of editable text) with symbolic name, name and R rows and C columns visible at a time.
<SELECT Name="name" [Size="N"] [Multiple]> Select element with symbolic name, name, N selections visible at a time; multiple selections possible; selections defined using OPTION
<OPTION Value="string"> text <OPTION> Option element used with SELECT; with returned value string or text if not provided.

Forms
     <FORM METHOD="POST" ACTION="blah.cgi">     
     Form elements and other HTML      
     </FORM>     
There can be several forms in a single document, but the FORM element can't be nested.

ACTION specifies the action URI for the form. This URI will almost always point to a CGI script to decode the form results; but it could, for example, be a mailto.
METHOD selects an HTTP method of accessing the action URI. There are two methods, GET (the default) and POST. Generally speaking, you use GET for only the simplest forms, or when you want the user to be able to bookmark the query or use it as a link - it will work just as if the user had filled in the form as before and submitted it. Use POST for forms with a lot of fields (GET might not be able to pass all the data) and for scripts that are supposed to change something on the server - you normally don't want anyone to do that from a bookmark or link.

METHOD=GET Information from a form using the GET method is appended onto the end of the action URI being requested. Your CGI program will receive the encoded form input in the environment variable QUERY_STRING.
METHOD=POST This method transmits all form input information immediately after the requested URI. Your CGI program will receive the encoded form input on stdin. The server will NOT send you an EOF on the end of the data, instead you should use the environment variable CONTENT_LENGTH to determine how much data you should read from stdin.

ENCTYPE specifies the media type used to encode the name/value pairs for transport, in case the protocol does not itself impose a format. With the POST method, the ENCTYPE attribute is a media type specifying the format of the posted data (by default application/x-www-form-urlencoded). Rarely used (??).

Input Text Tag

This tag allows the easy input of a single word or line of text, and typically defaults to a width of 20 characters. You will usually precede it with some descriptive text.

This example shows a simple form for asking a user their name. It presupposes a CGI script to process the user's response.
     <FORM ACTION = "blah.cgi">     

     Enter your name:    
     <INPUT TYPE = text    
               SIZE = 20    
	       >
     <INPUT TYPE = SUBMIT    
               VALUE = "Send!"    
     </FORM>    
Here's how it looks (non-functional):
Enter your name:

TYPE which can be one of Text, Number, Password, Checkbox, Radio, Submit, Reset. If omitted, Text is the default. The first 3 take text input from some platform-appropriate text-entry area, and the last 4 are represented typically as buttons or checkboxes. So the "Input" syntax is being somewhat overloaded..
NAME Field name. Used by the form processor to identify data items.
VALUE Assigns a default value to the field. You can specify text which you want to appear in the text entry field when the form is first loaded.
SIZE Specifies how large an area to allocate on screen, in characters. Note: the user can always type more characters than this amount, and the text will just scroll to the left within the field.
MAXLENGTH To limit the number of characters the user can input. The form will give an error beep if the user tries to type in more than the allowed MAXLENGTH.

Input Hidden Tag

It is possible to "hide" INPUT information within a FORM with the HIDDEN tag, which will be received by the decoding script, but not directly displayed to the user on the form.
<Form   action=test.cgi>
	<Input Type=Text name="Title"   value="Dork!" >
	<Input Type=HIDDEN name="OldTitle" value="Dude!">
	<Input type=submit>
</Form>
Even though your HIDDEN VALUE isn't displayed in the form, the user can see the hidden text by viewing the HTML source of the document, just like in a PASSWORD field.

Input Password Tag

INPUT elements of type PASSWORD are just like text entry fields, except all characters are displayed with an asterisk *.
<FORM METHOD="POST" ACTION="blah.cgi">
	Enter your 8-character password:
	<INPUT	TYPE="password"
		NAME="your_password"
		SIZE="8"
		MAXLENGTH="8">
</FORM>
Enter your 8-character password:

Input Image Tag

Name:
<Form	Action="blah.cgi">
Name:	<Input	name	= "Name">
	<Input	type	= image
		alt	= "Submit :-)"
		src	=
		"/images/icon-happy.gif">
</Form>
Creates a graphical submit button. The value of the src attribute specifies the URL of the image to act as the button. As with regular images, you should provide alternate text to the image to allow access in cases where the image is not displayed.

When a pointing device, e.g. mouse, is used to click on the image, the form is submitted and the (x,y) location passed to the server. The x value is measured in pixels from the left of the image, and the y value in pixels from the top of the image. The submitted data includes name.x=x-value and name.y=y-value where "name" is the value of the name attribute, and x-value and y-value are the x and y coordinate values respectively.

Input Submit Tag

These buttons are actually done with Input tags. A RESET button can be used to reset all input values to their defaults, as if no information had been given so far. The SUBMIT button transfers all the form data to the URL specified in the ACTION element.
<Form	method=POST	action="CGI/Menu.cgi">
<Table>
<tr align=left><th>
	<input type=submit name=Button value="Home.">
	<input type=submit name=Button value="Library">
	<input type=submit name=Button value="Search">
	HTML:
	<input type=submit name=Button value="Head.">
	<input type=submit name=Button value="Body.">
	<input type=submit name=Button value="Tables">
	<input type=submit name=Button value="Forms">
	<input type=submit name=Button value="CGI....">
	<input type=submit name=Button value="DB.....">
	<input type=submit name=Button value="HTTP.">
	<input type=submit name=Button value="Style.">
	<br>
	<input type=submit name=Button value="<">
	<input type=submit name=Button value="X">
	<input type=submit name=Button value=">">
</Table>
</Form>
Input Checkbox Tag

INPUT tags of TYPE="checkbox" are best used to select members of small sets.
<Form	ACTION="blah.cgi">
<table border=2>
<tr>
    <th align=right>
	<INPUT	TYPE	= "checkbox"
		NAME	= "color"
		VALUE	= "Red" Checked>
			   Red
    </th>
    <th align=center>
	<INPUT	TYPE	= "checkbox"
		NAME	= "color"
		VALUE	= "Green">
			   Green
    </th>
    <th align=left>
	<INPUT	TYPE	= "checkbox"
		NAME	= "color"
		VALUE	= "Yellow">
			   Yellow
    </th>
  </tr>
</table>
</form>
Red Green Yellow

Decide whether the label goes to the left or the right, and stick to that convention.

Ensure that for checkboxes in the midst of several, it's clear which checkbox the label refers to, by means of some visual cue such as colon after the label, or a comma between label/checkboxes, or by placing in a bordered table.

If you have many, it may help to arrange them in preformatted columns.

You can emulate a SELECT MULTIPLE list by having CHECKBOXESwith the same NAME but different VALUES.

Input Radio Tag

The Radio type means that the user can only select one checkbox at one time; clicking on another causes the existing one to become unchecked. RADIO buttons are similar to CHECKBOXES, but only one option may be chosen among many.
<Form	ACTION="blah.cgi">
<table border=2>
<tr>
    <td align=right>
	<INPUT	TYPE="radio" NAME="color" VALUE="Red" Checked>
	<font size="4">				 Red</font>
    </td>
    <td align=center>
	<INPUT	TYPE="radio" NAME="color" VALUE="Green">
	<font size="4">				 Green</font>
    </td>
    <td align=left>
	<INPUT	TYPE="radio" NAME="color" VALUE="Yellow">
	<font size="4">				 Yellow</font>
  </tr>
</table>
</form>
Red Green Yellow

RADIO buttons are not good for lists with many items, because the browser has trouble displaying a lot of buttons. It would be best to use a SELECT menu element.

Once a radiobutton is selected, it cannot be deselected without choosing a radiobutton with the same NAME. The default selection can be restored with the use of the RESET button.

If you have a bunch of RADIO buttons with the same NAME and no VALUES specified, the server won't be able to tell which is selected, since a default value of "on" will be sent.

Textarea

The <TEXTAREA> allows a text entry area with multiple rows. Note that it's a container: it has a closing tag. The enclosed text is displayed as the window contents. tag and the terminating </TEXTAREA> tag.
<Form	Method=POST
	Action="mailto:blah@blah.com">

	<Textarea rows=5 cols=55
		name="msg">Hi blah,
	</Textarea>
	<BR>
	<Input	type=submit
		value="Send it to blah">
</Form>
Hi blah,

ROWS is the number of vertical rows to be displayed for text entry. COLS is the number of horizontal columns to be displayed for text entry. If you would like default text to appear within the textarea, simply type the text in between the start and end TEXTAREA tags.

Be warned that putting email addresses into web pages (or anything on the Internet) will get you spam. The one in the example is fake.

Select Tag

This tag allows the user to choose from a fixed set of values; one or several at once.

The <SELECT> tag has OPTIONs in between the initiating <SELECT> tag and the terminating </SELECT> tag. The OPTION tag may have these attributes:

VALUE Specifies the value of the option to be sent to the server. If not defined, the label next to the option is sent as the value.
SELECTED By default, the first OPTION is displayed in the menu. This tag sets the default OPTION to be displayed in the menu, in case it isn't the first OPTION.
<FORM	Action="blah.cgi">
	<SELECT	NAME="Button"	SIZE=3>
		<OPTION>	Contact
		<OPTION>	Help
		<OPTION>	Docs
		<OPTION>	Downloads
		<OPTION>	Home
		<OPTION>	Toys
	</SELECT>
</FORM>
This presents a window with 3 items displayable at once. If there are more than 3 then the window has a scrollbar. If you want a drop-down menu, just set the SIZE to 1 or omit it. Only one item may be selected by the user.

This very simple and elegant example depends on the fact that the directory names at The WDVL are meaningful words. If you want something more sophisticated, e.g. say the menu labels are not exactly the same as the directory names, or comprise longer phrases, simply modify the CGI program to use a hash table to look up the URL from the supplied OPTION value (left as an exercise for the reader!).

The following code can be combined with a bit of JavaScript code to allow the user to select an option and immediately be redirected to that page.

Notes

Be careful that the open pull-down doesn't exceed the screen size; if you're on a large workstation screen remember the PC user with a small screen.

If you have more than 3 or 4 options to choose from, and the user may only select ONE, then this input element is the best. People are often tempted to use multiple RADIO buttons.

The decoding script on the server will probably appreciate having a single-word VALUE value instead of multiple-words.

Use the MULTIPLE keyword to allow the user to select several items at once.

<`FORM Method="GET\|POST" Action="URL"`> <`/FORM`>	a Form with a CGI program at URL
<`INPUT Name="name" Type=" text \| hidden \| password \| image \| submit \| reset \| checkbox \| radio"`>	Input widget with symbolic name, name
<`TEXTAREA Name="name" Rows="R" Cols="C"`>	Text area (lines of editable text) with symbolic name, name and R rows and C columns visible at a time.
<`SELECT Name="name" [Size="N"] [Multiple]`>	Select element with symbolic name, name, N selections visible at a time; multiple selections possible; selections defined using `OPTION`
<`OPTION Value="string"`> text <`OPTION`>	Option element used with `SELECT`; with returned value string or text if not provided.

`TYPE`	which can be one of `Text, Number, Password, Checkbox, Radio, Submit, Reset`. If omitted, `Text` is the default. The first 3 take text input from some platform-appropriate text-entry area, and the last 4 are represented typically as buttons or checkboxes. So the "Input" syntax is being somewhat overloaded..
`NAME`	Field name. Used by the form processor to identify data items.
`VALUE`	Assigns a default value to the field. You can specify text which you want to appear in the text entry field when the form is first loaded.
`SIZE`	Specifies how large an area to allocate on screen, in characters. Note: the user can always type more characters than this amount, and the text will just scroll to the left within the field.
`MAXLENGTH`	To limit the number of characters the user can input. The form will give an error beep if the user tries to type in more than the allowed `MAXLENGTH`.

`VALUE`	Specifies the value of the option to be sent to the server. If not defined, the label next to the option is sent as the value.
`SELECTED`	By default, the first `OPTION` is displayed in the menu. This tag sets the default `OPTION` to be displayed in the menu, in case it isn't the first `OPTION`.