Link to USGS home page
Internal USGS Access Only

Writing Forms

The NAME attribute sets the variable name, and the VALUE attribute (if it exists) sets the value.

checkboxes
<input type="checkbox" name="number_of_fish" value="1">one fish
<input type="checkbox" name="number_of_fish" value="2">two fish
one fish two fish
radio buttons
<input type="radio" name="color" value="red">red fish
<input type="radio" name="color" value="blue">blue fish
red fish blue fish
menus
<select name="lunch">
  <option value="eggs">Green eggs</option>
  <option value="ham">Ham (green too)</option>
  <option value="fish">Fish (assorted colors)</option>
</select>
scrolling list
<select name="brunch" size="2" multiple>
  <option value="eggs">Green eggs</option>
  <option value="ham">Ham (green too)</option>
  <option value="fish">Fish (assorted colors)</option>
  <option value="goat">Goat</option>
</select>

Scrolling lists are created identically to menus, but have a size option specified.

Option multiple allows multiple items to be selected.

single line text input
The cat in the
<input type="text" name="clothing" size="3">
The cat in the
multi-line text input
<textarea name="inventory" rows="2" cols="30">
  Enter cat inventory here
</textarea>

The text inside the TEXTAREA tag becomes the default, which may be blank.
hidden values
<input type="hidden" name="a_variable" value="secret data">
You can pass information to the CGI program that the user won't see.
buttons
<input type="submit" value="Submit Form">
<input type="reset" value="Reset Form">
<input type="image" name="help" src="images/help.gif" alt="Help">
When clicked, performs a Submit, and includes x,y coordinates, like an imagemap.

In html 4 there is also an explicit button tag, but this is not widely supported in Netscape 4.x.

In Netscape forms elements are scaled relative to the size of the user's fixed width font.

A future section will show how this form can be made Section 508 accessible.

Forms and CGI, To Be Modular or Not

One Html Form, One CGI Program
This is the most obvious scenario. Write a form and the CGI program to match.
Many Html Forms, One CGI Program
By looking ahead, one could write a more generic CGI program that could be used with a variety of forms. Hidden variables can be used to provide extra information to help a CGI program.
One CGI Program, No Separate Html Document
It is possible to have the CGI program generate as well as process a form. Doing this will make a form and its processing more self-contained, and make make a site easier to keep organized. It can be difficult to tell if a CGI is being used anymore; The html form might be removed but the CGI left behind.

Recycle Neurons!

You can write a CGI application from scratch, in fact there are notes from an NTC class on how to do this. But it can be more time-effective to use someone else's code.

One very helpful library for forms is the perl-5 CGI package. There is an book, "Official Guide to Programming with CGI.pm", by Lincoln Stein available on the use of this package. This program can create a form, parse the input from the form and display and/or save the results with relatively little coding.

A generic form processing program, process_form, has been installed on water.usgs.gov. If having form results mailed to you is sufficient you can use the program there, if you would like to save the results to a file, contact David Boldt (dboldt@usgs.gov), for a copy of the program to install at your own site. (Research is needed to find a generic tool of this sort for USGS use!)

A sample Registration form is availableoffline, along with the CGI code that produces it (using the perl-5 CGI package).

Safe CGI Programming using perl; Security guidelines for perl CGI programming.

slide 48

Lab Exercise on Creating Forms

[up]
"Mastering a Web Site" online course
Created and maintained by Lorna Schmid and David Boldt.
http://water.usgs.gov/usgs/training/webmaster/forms-writing.html    
Last modified: Fri Dec 9 17:47:21 EST 2005