1. Making a web form
On an HTML page, you can have a ``form''. The user fills out the form and then submits it to your CGI program. A form can have one or more of the following kinds of fields.
There are two methods of transmitting the information to your CGI program:
$ENV{"QUERY_STRING"} .
Of the two methods, ``POST'' seems more natural, but with ``GET'' it can be easier to test your program. The ``GET'' method is often used for small amounts of data and the ``POST'' method for larger amounts.
2. Form tags
Suppose you want to make a questionnaire about some product,
asking users for ``your name'', ``your email address'', and ``your
opinion''. The first two can be text input and the third,
multiline. Also suppose you have a checkbox for ``student'',
radio buttons for ``new customer'' or ``repeat customer'', a menu
for US states, and a scrolled list accepting multiple choices for
``kinds of computers used''. Also, suppose your script for
processing the form is get_info.cgi and you are using the
``GET'' method. Your form will use tags <FORM ...> and
</FORM> with other possible tags in between, such as
<INPUT> and <SELECT> .
There are also attributes that go with the opening tags. One
of these attributes is usually NAME="..." , which is a name
you give the field. The user's action will give that field a
value. When the form is submitted to your CGI program, the
field name and value are transmitted together so your program
can tell what the value is for.
Some fields also have an attribute VALUE="..." . This
specifies a default value to be used if the user doesn't give
a value. You can omit this field if you don't want a default value.
<FORM ACTION="get_info.cgi" METHOD="GET">
Start the form.
<INPUT TYPE="text" NAME="email" SIZE=30 MAXLENGTH=50>
This is a text field named ``email'' of width 30, taking up to 50
characters of input. You can use a VALUE attribute if you wish.
<TEXTAREA ROWS=10 COLS=20 NAME="opinion"> [any default info goes
here] </TEXTAREA>
This is a multiline text field with scrolling. You can have multi-line
default information if you use a break <BR> at the end of each line.
<INPUT TYPE="checkbox" NAME="student">
This checkbox will return the value ``on'' if checked.
The radio buttons in a group must have the same name but different
values. The value of the button selected is sent to your program.
To check a button in advance as a default, use the attribute CHECKED .
This is a menu. The SIZE=1 always goes with a menu, meaning
that only one item at a time shows.
The OPTION SELECTED means this one is the default that the
user sees in the rectangle; it doesn't have to be the first one.
Instead of having the option selected be one of the actual choices,
it is often a good idea to have it be a description such as
``Your state'', since the user might not recognize AK .
A menu can have another attribute MULTIPLE to indicate that
multiple selections are allowed, but you probably don't want that
for selecting US states.
This is a scrolled list. It is the same as the menu described above,
with options, etc., except that 5 lines show at once. Also,
because of the attribute MULTIPLE, multiple selections are allowed.
The user has to hold down the CTRL key to do that, on some browsers.
<INPUT TYPE="password" NAME="pw" SIZE=10>
This will allow a password in a rectangle ten characters long. A
password is like a text field except that the characters being typed
show as * .
<INPUT TYPE="submit" VALUE="Submit the form">
This is a ``submit'' button. When the user clicks on it, the information for
the whole form is sent to your CGI program. The VALUE is what
shows on the button.
A submit button can also be an image (an icon, for example), in which case the browser will send the coordinates of the click.
<INPUT TYPE="reset" VALUE="Clear the form">
This is a ``reset'' button. The VALUE shows on the button.
If the user clicks on it, the whole form is cleared and reset
to any defaults. Having a reset button makes it easier for the
user to start over with the form. For example, a user might
want to fill in a form, submit it, and then use the browser's
``back'' button to come back, user ``reset'' to clear the form, and
fill in something else to submit.
<INPUT TYPE="hidden" NAME="info" VALUE="student">
This is a hidden field--like a text field except that it doesn't show at all. A typical use: If this whole form has already been generated by a previously called CGI program as a virtual page, then that program might use hidden fields to put information on the form that will then be sent to the current CGI program. This is a cheap way for the first CGI program to tell something to the second one. That may sound complicated, but later you'll see the reasons why it's handy.
</FORM>
End the form.
Notes:
<BR> or lists or even tables. Tables can
be good for keeping things lined up.
3. A sample form
Here's an example of the concepts above, but including only four
US states. To see the actual form, point your browser to
http://www.math.ucla.edu/~baker/40/sample_form.html . At this
writing, there is no corresponding CGI script in place, however.
[usual HTML header]
<BODY>
<H1> Questionnaire about our product </H1>
<FORM ACTION="get_info.cgi" METHOD="GET">
<TABLE>
<TR>
<TD> Your name:
<TD> <INPUT TYPE="text" NAME="name" SIZE=30 MAXLENGTH=50>
<TR>
<TD> Your email address:
<TD> <INPUT TYPE="text" NAME="email" SIZE=30 MAXLENGTH=50>
</TABLE>
<UL>
<LI> Your opinion of our product: <BR>
<TEXTAREA ROWS=10 COLS=50 NAME="opinion">
</TEXTAREA> <BR>
<LI> Check if you are a student:
<INPUT TYPE="checkbox" NAME="student"> <BR>
<LI> Are you a new user
<INPUT TYPE="radio" NAME="oldornew" VALUE="new" CHECKED>
or a repeat user
<INPUT TYPE="radio" NAME="oldornew" VALUE="repeat">
(select one) <BR>
<LI> Your state:
<SELECT NAME="state" SIZE=1>
<OPTION SELECTED> AK
<OPTION> AL
<OPTION> CA
<OPTION> TX
</SELECT> <BR>
<LI> The computer system(s) you use (select one, or more
by holding down the CTRL key): <BR>
<SELECT NAME="computer" SIZE=4 MULTIPLE>
<OPTION SELECTED> PC with Win 95/98
<OPTION> PC with Win NT
<OPTION> Macintosh
<OPTION> UNIX system
</SELECT> <BR>
</UL>
<P>
<INPUT TYPE="submit" VALUE="Submit the form"> <BR>
<P>
<INPUT TYPE="reset" VALUE="Clear the form"> <BR>
</FORM>
</BODY></HTML>
4. What's next?
The next step is to learn how to read the user information with a CGI program.