CGI scripting is most commonly used to process the data
from a form after it is filled out by a user. However,
you can also place a link on a Web page that invokes
the CGI script directly, without requiring a form;
for that technique, see Section 3.2, “Direct CGI links without use of a form”.
Any web page may contain any number of “fill-out
forms”, each represented by a form
element in its HTML coding. For the complete details of
form design, refer to the relevant section of Building web pages
with XHTML 1.1.
The design of an HTML form must be closely coordinated with the design of the CGI script that processes that form's data.
Each form has a set of controls such as checkboxes, text entry fields, and buttons.
Each control must have an internal control name that is used by the CGI script to retrieve the value of that control.
The form must have a button that causes the data on the form to be transmitted to the receiving CGI script.
When the button is
clicked, the CGI script will receive the information
from the form as a set of ordered pairs (. The name, value) is the
control name you assign to that control in the form's
HTML code. The name is a string of
characters that describes what the user entered in
that control.
value
Not all controls will transmit a name-value pair every time. For example, a checkbox control will transmit a name-value pair only when it is checked (turned on).
Also, be aware that some controls can transmit more
than one value. For example, if your form contains a
pull-down menu or pick list made with select
multiple='multiple', the user can select any
or all of the items in the list.
The connection from a form to the CGI script that
processes it is specified by the action attribute of the HTML form element.
For the method attribute, we recommend
method='get' in most situations.
However, if your form includes a file
control for uploading files, you must use method='post'.
Here is an example of a very simple web page that contains a form with only three elements: a text entry field labeled , a checkbox labeled , and a button.
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Form example</title>
</head>
<body>
<h1>Form example</h1>
<form method='get'
action='http://infohost5.nmt.edu/~tcc/demo/pycgi/anyform.cgi'>
<div>
<input type='text' name='fave' id='fave-field'/>
<label for='fave-field'>Favorite color</label>
</div>
<div>
<input type='checkbox' name='natural' id='nature-field'/>
<label for='nature-field'>Color found in nature?</label>
</div>
<div>
<input type='submit' value='send'/>
</div>
</form>
</body>
</html>
Here is a screen shot of this page after a user has filled it out:

When the user clicks the
button, two name-value pairs will be transmitted to the
handler script example.cgi:
('fave', 'puce')
('natural', 'on'): The default value
for a checkbox is the string 'on'.
If you like, you can click here to try this form yourself.
To find out how to write a CGI script for this form, see Section 4, “Writing your CGI script”.
Keep in mind that some forms can transmit multiple values
for one name. For example, if a form has an element
select multiple='multiple' name='rainbow'
containing the colors of the rainbow, the user might
pick the top three, so name 'rainbow' is
associated with the values 'red', 'orange', and 'yellow'. The
associated CGI script must anticipate the possibility of
multiple values for such control names.