CGI and HTML Forms

Common Gateway Interface

CGI is a lightweight mechanism for communication between the web server and other programs (CGI scripts) that can be run on the server.

Plenty of web resources to guide both learner and developer

CGI scripts can be used to perform a diversity of functions such as:

Form handling
Database access
Searching
Imagemap handling

Alternatives to CGI include Microsoft's Active Server Pages (ASP.NET) and the popular PHP.
CGI remains widely used because:

it is well understood technology
it is essentially browser independant
it is relatively standard across servers
CGI programs can be written in a variety of languages
some languages, notably Perl, offer remarkable power, flexibility, ease of use, portability, ...

cgi-bin

Instead of pointing to an HTML file a URL may request that a CGI program is run on the server. CGI programs (or scripts) are commonly written in:

Unix - Shell, Perl, Tcl, C, C++, Python, Ruby
Windoze - Visual Basic, Perl
Mac - Applescript, C, C++, Perl

CGI scripts are usually kept in a special directory on the server, named cgi-bin. This provides security and ease of server management. System security is ensured by restricting access to cgi-bin and/or restricting the script languages that the server may execute.

Handled through the server configuration. e.g. Apache httpd.conf ScriptAlias directive identifies which directory is available to run cgi scripts:

ScriptAlias /cgi-bin/ "/home/gonzo/public_html/cgi-bin/"

Visibility of the cgi-bin can be controlled. The following only allows the cgi scripts to execute within the domain gre.ac.uk

<Directory "/home/gonzo/public_html/cgi-bin">
   AllowOverride None
   Options None
   Order deny,allow
   Deny from all
   Allow from .gre.ac.uk
</Directory>

Although CGI scripts do not need to be in cgi-bin...

AddHandler cgi-script .pl

... allows perl files with the extension .pl execute outside cgi-bin.

The cgi files need to be made globally executable

-> chmod 755 somefile.pl
-> ls -l somefile.pl
-rwxr-xr-x   1 gonzo   users      645 Oct 28 10:58 somefile.pl

CGI Sequence of actions

The client browser sends a request (HTTP message) to the server
- may be triggered in several ways - e.g. form submit
- names the URL of the CGI program
- data can be sent with the message - get/post
Server software on the server machine receives the message
Server calls the CGI program
- information passed to the CGI program
  - get/post data
  - cookies
  - client environment data
  - server environment data
CGI program runs
- has access to server resources - e.g. filesystems, databases
- outputs a response - e.g. an HTML document
Server software routes stdout from the CGI program back to the client
Client browser receives the HTTP response

Forms

The HTML <form> tag has three attributes that control the interaction of the form with the program on the server:

action provides the URL of the program that is to process the form data.
method specifies how the name=value pairs are transmitted
- get - data is transferred as part of the URL
- post - data is transferred after the URL in the same http data stream
enctype specifies the data encoding used in transmission
- default is Internet Media Type (application/x-www-form-urlencoded)

For XHTML validity the <form> tag must be outside any container but the various form elements must be inside a container such as a paragraph or table.

<form action="/~mk05/cgi-bin/form.pl" method="get" enctype="application/x-www-form-urlencoded">
<p>
   Form components
</p>
</form>

Various types of input allowed in forms:

An input type text allows a single line of text input.

Name: <input type="text" size="20" maxlength="80" name="custName" value="Betty"/>

Suppress the display of the data as it's typed.

Password: <input type="password" maxlength="8" name="passwd"/>

Checkboxes allow multiple selections from a range of options. An array syntax is used for the input name because it has multiple values.

<input type="checkbox" name="mags[]" value="Hamster"/>Hamster Weekly<br />
<input type="checkbox" name="mags[]" value="Reptile"/>The Reptile Specialist<br />
<input type="checkbox" name="mags[]" value="Beekeeping checked="checked"/>Practical Beekeeping

Only one of a group of radio buttons with the same name can be selected. Note the use here of the selected attribute.

<input type="radio" name="age" value="under_18 checked="checked""/>Under 18<br />
<input type="radio" name="age" value="range18_30"/>18 to 30<br />
<input type="radio" name="age" value="over_30"/>Over 30<br />

A textarea is used for multiline input. Note how the value of this element is not an attribute but the element content.

<textarea rows="7" cols="40" name="address">
3 Bedrock Blvd.,
Boulder,
Colorado
</textarea>

The select and option elements provide a pulldown menu.

<select name="experience">
   <option value="newbie">Novice</option>
   <option value="ok">Intermediate</option>
   <option value="good" selected="selected">Expert</option>
   <option value="showoff">Wizard</option>
</select>

With the multiple attribute a select element provides a scrolling list:

<select multiple="multiple" name="languages[]" size="4">
   <option>C</option>
   <option>C++</option>
   <option>Java</option>
   <option>Pascal</option>
   <option selected="selected">Perl</option>
   <option selected="selected">PHP</option>
   <option>Visual Basic</option>
</select>

Types of form buttons:

Input type submit buttons cause the form data to be transmitted in an HTTP request to the web server which forwards the data to the CGI program.

Multiple submit buttons may be used in a single form. The name and value of the submit button are transmitted so the application can do something different depending on which button was clicked.

<input type="submit" value="Definitely Yes" name="myButton"/>
<input type="submit" value="Absolutely Not" name="myButton" onclick="return confirm('Are you sure?')"/>

JavaScript may be triggered by button events.

<input type="submit" value="Uncertain" name="myButton" onclick="return confirm('Are you sure?')"/>

Images may be used as submit buttons. The x, y coordinates of the mouse pointer click event on the image are sent to the server with the rest of the form data. Note the tool tip as the mouse pointer lingers over the image.

<input type="image" src="bobpush.gif" name="Bob"
   alt="Intolerant Bob pushbutton" title="Please click on Intolerant Bob"/>

An input type button may be used to trigger some JavaScript without submitting the form. In this example the JavaScript creates a cookie called 'crumble' with a value taken from the custName text input. (Another cookie called 'MyLittleSecret' was set by some JavaScript in the page head as the page loaded.)

<input value="Choc Chip Cookie" type="button"
onclick="document.cookie='crumble=' + this.form.custName.value + 
   ';path=/~mk05'"/>

An input type button could use some JavaScript to change the form properties such as the method and the action. Here the form is posted to a different URL than the URL given in the form action attribute. Note how this URL has some GET data appended to it.

<input value="POST form to info.php" type="button"
onclick="this .form.action='post';
this.form.action='PHP/info.php?fruit=apple&pet=cat';
submit();"/>

A reset button will restore the form to default data.

<input type="reset" value="Clean Me!"/>

Hidden fields can be included with input type hidden. As the type implies these inputs are not displayed by the web browser. Hidden fields can be used to give the CGI application information about the form or can be generated by the CGI script to pass state information.

<input type="hidden" name="form_id" value="form123"/>

Summary

This form demonstrator is a simple static HTML page that demonstrates several important concepts in the use of forms and the development of stateful web applications. Information is transmitted from this page to server side scripts in several ways. When the POST form to info.php button is clicked information is passed to the server side script info.php as GET, POST and cookie data.

Cookies are an important mechanism for implementing stateful web applications. This page demonstrates other ways of storing state information. State may be stored visibly as default values in form text fields and as default selects for checkboxes, radio buttons and options. State may be concealed in hidden form fields. And what about those GET parameters? This means of storing state is often referred to as URL re-writing. If this page were dynamically generated by a CGI program or server side script then all of these provide possible storage mechanisms for state.

This page demonstrates a bug in the W3C validator as it incorrectly identifies the & symbol in the JavaScript GET strings as being an XML entity.