Simple CGI forms

The Common Gateway Interface runs an external program (a 'CGI script') as a result of a client request and returns the output of the program to the client. CGI defines the interface between the web server and the CGI script.

Useful references:

The last example might have included some dynamic elements, but it wasn't very useful. We'll now look at how we can ask users for information and then act on it to generate personalized Web pages.

HTML Forms are the standard method of requesting information from the user. They provide a simple means of displaying text boxes, check buttons and radio buttons within the browser. For full information on HTML forms consult the HTML specifications at the World Wide Web Consortium (http://www.w3.org/).

Example: A basic HTML Form

<html>
 
 <head>
  <title>A simple form</title>
 </head>
 
 <body>
  <h1>Please enter your name!</h1>
  <form action="processform.cgi" method="POST">
  <p> Please enter your name <input type="text" name="name">   </p>
  <p> Please enter your email <input type="text" name="email"> </p>
 
  <p>
   <input type="submit" value="Submit the form">
   <input type="reset" value="Clear all fields">
  </p>
 
  </form>
 </body>
</html>

The important lines in the HTML are:

<form action="processform.cgi" method="POST">

This defines the CGI program to run when the submit button is pressed. It also defines how the data is passed to the CGI program. There are two methods which data can be passed to CGI programs, GET and POST. POST is generally the more useful, and more widely used method so it's that which we'll use here. For a more complete list of differences between the two methods please consult the Zeus CGI Reference Document.

And also:

<p> Please enter your name <input type="text" name="name">   </p>
<p> Please enter your email <input type="text" name="email"> </p>

These define two text input boxes labelled name and email. These labels are used in the CGI program to read the associated values. CGI Form Code The PERL script to process the form information is a little more complicated than the previous examples. The POST method writes data from the form straight to the CGI program through standard input, it also escapes some characters by prefixing them with %'s and converts other characters to their ASCII values in hexadecimal.

Process Form CGI

#!/usr/bin/perl
 
use strict;
 
main();
 
sub main ()
{
    my $query;
 
# Here we read the information entered from the form into an associated
# array, the total length of the data is passed via the environmental
# variable CONTENT_LENGTH. The array is then split on &'s which the
# POST method uses to separate each field in the HTML Form.
 
    read( STDIN, $query, $ENV{CONTENT_LENGTH} );
 
# Then for each item in the array we split it on ='s into key, value
# pairs. All spaces which have been encoded into +'s are then
# translated back using a Perl regular expression. We then use another
# regular expression to convert the ASCII values back in the real
# characters. Finally the last line builds an associative array (hash)
# indexed on the HTML input labels.
 
    my @param = split( /&/, $query );
    my %pairs = ();
 
    foreach my $item ( @param )
    {
        my ($key, $value) = split( /=/, $item );
        $key   =~ tr/+/ /;
        $value =~ tr/+/ /;
        $key   =~ s/%([A-F\d]{2})/chr(hex($1))/ieg;
        $value =~ s/%([A-F\d]{2})/chr(hex($1))/ieg;
 
        # NOTE: we are assuming the client passed us each key/value only once.
        # This is not an assumption you can always make in the real world.
        $pairs{$key} = $value;
    }
 
# We then set up three more variables. The first two which store the
# values out of the associative array we actually wanted. The last
# reads the remote machine name from an environment variable.
 
    my $name    = $pairs{name};
    my $email   = $pairs{email};
    my $machine = $ENV{REMOTE_HOST};
 
# From here on it's plain sailing. We output the HTTP Content-Type
# and Status headers, and the necessary HTML to build the page:
 
    print( STDOUT "Content-Type:text/html\r\n" );
    print( STDOUT "Status: 200 Ok\r\n" );
    print( STDOUT "\r\n" );
    print( STDOUT <<HTML );
<html>
 <head> <title>Form example output</title> </head>
 <body>
  <h1>welcome</h1>
  <hr>
  <p> Hi <em>$name</em> of <em>$email</em> from machine <em>$machine</em> </p>
  <hr>
 </body>
</html>
HTML
}
Content Manager [Administrator] 16 December 2005 Bookmark with del.icio.us Post this article to Digg Post this article to reddit Post this article to Facebook Tweet this article  

Recently...

Other Resources