Web Conference 2004

Writing Perl/CGI Scripts for ITS/ASET Web services

Passing Data

Sending data back to the server - the basics of CGI in motion

The following HTML form code asks the user to type in information, and upon Submit, sends it to the server; specifically to the script located on the Web at http://test.scripts.psu.edu/staff/j/c/jcd/useful/webcon/2004/passingdata.cgi.

<form method="GET" action="http://test.scripts.psu.edu/staff/j/c/jcd/useful/webcon/2004/passingdata.cgi">

What is your favorite color: <input type="text" name="color"> <input type="submit">

</form>

It should look like this:

The script passingdata.cgi looks like this:

#!/usr/local/bin/perl

use CGI qw(:param);

my $color = param('color');

# Cross Site Scripting (XSS) prevention by proper escaping of all untrusted input
# before displaying back to the browser - added 2009/06/28.
#
$color = CGI::escapeHTML($color);

print <<END;
Content-Type: text/html

<html>
<body>
<p>Your favorite color is $color.</p>
</body>
</html>
END

When you submit the above form, take note of what happens to the URL in the Location field of your browser. Compare it to the <form> tag action attribute.

What is happening

When your browser asked for this page from the Personal server, it returned a set of HTML tags and text, of which included a CGI form. The form is in the second box above, and the HTML that made up the form is in the first box. The CGI form is inside the <form> tags. It is this form that instructs the browser how to send data back to the server in a way the CGI program can understand.

The <input> tags specify elements of the form which are returned to the server. These parameters contain two parts, a name and a value. You can have as many parameters in a form as you want. This example just uses the one parameter, "color". The value of the parameter color is set by whatever you type in the field. There is also a second parameter which isn't used to send any information (but it can in some cases), which is the submit button. By setting the type attribute of the <input> tag to "submit", it will become a button which will send all of the parameters in the form back to the server.

The <form> tag itself has a couple attributes necessary for the form to work. The second attribute is the "action" attribute, which specifies what URL to request when the form is sent. A form can send to and CGI program, on any server, anywhere in the world, regardless of where the form itself came from.

The first attribute is the "method". When a browser asks a server for a page, it uses one of many "methods". These methods are keywords defined in the HTTP protocol that describe what type of request the browser wants. The two most popular are GET and POST. This form uses the GET method, which is the same method used for regular Web pages; the simple description of the GET method is this is the method used when a browser just wants to GET a page. However you can also send CGI parameters over the GET method.

At the end of the URL in the action attribute, the browser places a question mark (?), followed by the name of each parameter, an equals sign (=) and then the value of the parameter. If there is more than one parameter, they are separated by ampersands (&). In this case, if you type in "blue" for your color, the URL you visit upon submit will be:

http://test.scripts.psu.edu/staff/j/c/jcd/useful/webcon/2004/passingdata.cgi?color=blue

which has the parameter list of:

color=blue

<- Back - Your First Script