Forms

Forms provide a means for users, through their Web browsers or clients, to provide information to a program that is run by the server. As a result of running that program, data is normally returned to the user, although the program may have as its purpose producing some side effect that is not visible to the user, such as making a purchase or updating a database.

The facility that permits a program to be run by the server is called the Common Gateway Interface (CGI). It is discussed in the accompanying CGI Tutorial and will not be discussed in detail here. Thus, the emphasis in this discussion is on setting up forms and submitting them for processing, but not on processing, per se.

Information regarding forms can be found through the W3C's Forms page, including a basic tutorial. Additional information can be found, indirectly, through the NCSA CGI overview page.

The form tag

The basic form of a FORM tag is the following: 

<FORM ACTION="URL"  METHOD=GET | POST ENCTYPE="type">
<field definitions>
</FORM>
Let's look, briefly, at the attributes within the FORMS tag, and then we'll look at the field definitions.

The ENCTYPE attribute is not currently used (to my knowledge), so that leaves just the ACTION and METHOD attributes. The action is a URL that identifies the program that is to be used to process the data from the form. It will be discussed with respect to CGI, so I won't say anything further about it here. That leaves METHOD.

METHOD determines how the data from the form will be passed to the CGI program. If the method, GET, is specified, the form data is passed through a kind of global variable, called an environment variable, set by the server. If POST is used, it is passed through the standard input file, STDIN. POST is the preferred method, since data can be lost under some conditions when using GET. So, use POST.

Field definitions

Field definitions specify the various fields that are displayed within the form and which permit the user to enter data to be passed to a cgi program. There are three basic types of fields: INPUT, SELECT, and TEXTAREA. It is easier to explain these by example than through description. For a discussion of specific options, see the references noted above. You should also be aware that the example omits several of the field types, including HIDDEN and PASSWORD.

Sample Form

Sample Form

Name field:

Name field:

Your age: younger than 21, 21 -59, 60 or older

Things you like: pizza, hamburgers, spinich, mashed potatoes

What you like most:

Reset:

Submit:

Corresponding HTML

<H1 align = center>Sample Form</H1>
<FORM METHOD=POST ACTION="http://www2.cs.unc.edu/Courses/wwwp-f96/members/jbs/cgi-bin/formdemo.cgi">

<P>Name field: <INPUT TYPE="text" Name="name" SIZE=30 VALUE = "XXX">

<P>Name field: <TEXTAREA TYPE="textarea" ROWS=5 COLS=30 Name="textarea">Your comment.</TEXTAREA>

<P>Your age: <INPUT TYPE="radio" NAME="radiobutton" VALUE="youngun" CHECKED> younger than 21,
<INPUT TYPE="radio" NAME="radiobutton" VALUE="middleun"> 21 -59,
<INPUT TYPE="radio" NAME="radiobutton" VALUE="oldun"> 60 or older

<P>Things you like: <INPUT TYPE="checkbox" NAME="checkedbox" VALUE="pizza" >pizza,
<INPUT TYPE="checkbox" NAME="checkedbox" VALUE="hamburgers">hamburgers,
<INPUT TYPE="checkbox" NAME="checkedbox" VALUE="spinich" CHECKED>spinich,
<INPUT TYPE="checkbox" NAME="checkedbox" VALUE="mashed potatoes">mashed potatoes

<P>What you like most: <SELECT NAME="selectitem">
<OPTION>pizza<OPTION>hamburgers<OPTION SELECTED>spinich<OPTION>mashed potatoes<OPTION>other
</SELECT>

<P>Reset: <INPUT TYPE="reset" > 

<P>Submit: <INPUT TYPE="submit" NAME="submitbutton" VALUE="press" ACTION="SEND">
</FORM>