Subjects -> Computer Networks -> Lectures -> Lecture #22

Lecture 22: CGI and Electronic Commerce

Forms in HTML

In HTML version 2, the idea of "forms" (and various related data structures) were introduced. These provided the basis technology for the recent explosion in "electronic storefronts" on the Web as well as several other innovations.

A form in HTML is an area of a Web page which is used to gather input from a human user. The information which is gathered can then be returned to the page's owner using a SUBMIT action.

The form is, as expected, delimited by a <FORM> and </FORM> markup pair.

The <FORM> markup has two important attributes:

ACTION: specifies the action URL of this form. Typically this is the URL of an executable program, see the later discussion of CGI.
METHOD: specifies the way in which the ACTION URL is accessed. There are two methods, GET and POST.

Example:

<FORM
ACTION="http://ironbark.bendigo.latrobe.edu.au/cgi-bin/myprog" METHOD="GET">

Form Elements

Data is collected in a form by the use of INPUT tags. Each INPUT tag has an associated TYPE attribute.

For example:

<INPUT TYPE="TEXT"

This INPUT type can take several further attributes, eg:

<INPUT TYPE="TEXT"  NAME="Name" MAXLENGTH="64" SIZE="20">

In a browser, this would be presented as a (scrollable) textbox, 20 characters wide (but able to accept 64 characters of input).

There are several other INPUT types:

TYPE="PASSWORD"
TYPE="CHECKBOX"
TYPE="RADIO"
TYPE="IMAGE"
TYPE="HIDDEN"
TYPE="SUBMIT"
TYPE="RESET"

Form Elements #2

There are two other markup tags used in forms:

SELECT: allows the user to select from an enumerated list of values. Each value is given by an OPTION markup tag, which can take a couple of extra attributes.
TEXTAREA: presents a multi-line text field into which the user can type information. It is specified as a number of ROWS and COLS and can have a NAME attribute and an initial value.

URL Encoding

When form information is returned to the HTTP server, it is encoded into a format called (using MIME terminology):

application/x-www-form-urlencoded

...or simply "URL-encoded". In this format:

ASCII space characters are (usually) replaced by the "+" character. This is a hangover from an older format, and is not universally used, see next point.
Non-printable characters are given in hexadecimal format, thus: %HH, where the H characters are the two hexadecimal digits of the byte. Sometimes the space character is also sent in this format, as %20.
The fields of a form are encoded as name=value, with each name-value pair separated by the "&" (ampersand) character.
Fields with null values are (normally) not sent, nor are unselected CHECKBOXes and RADIO buttons.

Submission Methods

The two ways in which form data can be returned to the server are METHOD=GET and METHOD=POST.

GET: This method is ()according to the original specification) preferred if the submission of the form is not going to have a lasting effect on the global state of the universe -- that is, it does not have side effects. For example, it may query a database, returning the result as HTML. A HTTP GET request is issued to the ACTION URL specified in the <FORM> markup tag, with the urlencoded form information appended after a separating "?" character. This can generate very long URLs.
POST: This method should be used where processing of the form is intended to have side effects, eg, updating the contents of a database. In this case, a HTTP POST transaction is performed. The "body" of the transaction contains the urlencoded form data, as a single long line of text. The POST transaction is directed at the URL specified in the ACTION attribute of the <FORM> tag.

In "real life", GET and POST methods are used pretty much interchangeably, depending on the programmer's or system designer's preference.

Common Gateway Interface (CGI)

CGI defines the way in which form data is presented to an application program by the HTTP server.

When a user clicks the SUBMIT button on a form, the HTTP server starts up the specified CGI program, and makes the form data available to it.

A difference between GET and POST is the way in which a CGI program receives the form data. If the method was GET, the information is usually obtained by examining the contents of an environment variable (usually called "QUERY_STRING) containing the URL-encoded form data. Other environment variables contain additional useful information.

If the method was POST, the CGI program usually receives the form data on its standard input stream, with any extra stuff obtained, as before, from environment variables.

CGI programs can, as a rule, be written in any language (compiled or interpreted) supported on the system running the HTTP server.

On Unix servers, they are commonly written in Perl, C or as Bourne shell (/bin/sh) scripts.

A CGI program (almost) always generates (to standard output) a Web page which is returned to the browser, in addition to any other effect.

Example CGI

Using the following HTML:

<html>
<head>
<TITLE>Test form for INT20CN Lecture #22 Example</TITLE>
</head>
<body bgcolor="#FFFFFF">

<h2>Test form for INT20CN Lecture #22 Example</h2>
<FORM action="/subjects/bitcne/cgi/L22CGI.cgi" method="GET">
Family Name: <INPUT type="text" name="family" size="20"><br>
Given Name: <INPUT type="text" name="given" size="20"><br>
<input type="submit" value="Get Information">
<input type="reset" value="Clear Form">
</FORM>
</BODY>
</HTML>

The <FORM> markup of this segment of HTML looks like:

Family Name
Given Name

Note that you can press the "submit" button if you like...

This <FORM> is processed by the following CGI program (in Perl):

#!/usr/local/bin/perl
use CGI;

$fdata = CGI->new();
$family = $fdata->param("family");
$given = $fdata->param("given");
print "Content-type: text/html", "\n\n";
print "<HTML>";
print "<HEAD>";
print "<TITLE>This is what you sent me</TITLE></HEAD>";
print "<body bgcolor=#ffffff>";
print "<h2>This is what you sent me</h2>";

print "Given name: <strong>", $given, "</strong>.<br>", "\n";
print "Family name: <strong>", $family, "</strong>.<p>", "\n";
print "Here's the complete (URL-encoded) data which you submitted:\n";
print "<blockquote>\n<pre>";
print $ENV{QUERY_STRING};
print "</pre>\n</blockquote>\n";

print '<a href="/subjects/bitcne/lectures/l22.d/Lect22.html#form">Back</a>',"\n";
print "to the lecture notes.\n";
print "</BODY>";
print "</HTML>";

exit(0);

The tutorial for this lecture is Tutorial #22.
La Trobe Uni Logo

[Previous Lecture] [Lecture Index] [Next Lecture]