Getting User Input with HTML Forms

Dynamic Content in Perl

Perl is frequently used to develop dynamic web applications that accept user input, act on the supplied values, and give information back to the user. We're going to build a simple calculator application that acts on two numbers. This example program is longer than our previous scipts, and incorporates many concepts learned in previous chapters.

First, create a file called "input_form.dat" and copy the following HTML code into it:

<html>
<head>
<title>Simple Perl Calculator</title>
</head>

<body>

<h1>Simple Perl Calculator</h1>
<form action="calc.pl" method="get">
<table border="0">
    <tr>
        <td>
            <input type="text" name="num1" size="3">
        </td>
        <td>
            <select name="operation">
                <option value="a">+</option>
                <option value="s">-</option>
                <option value="m">*</option>
                <option value="d">/<option>
            </select>
        </td>
        <td>
            <input type="text" name="num2" size="3">
        </td>
        <td>
            <input type="submit" value="Calculate">
        </td>
    </tr>
</table>
</form>

<p>$OUTPUT</p>

</body>
</html>

Next, copy the following Perl code into a file named "calc.pl":

#!/usr/bin/perl -w

use strict;
use CGI qw/:standard/;

# Declare and initialize variables.
my $num1 = 0;
my $num2 = 0;
my $result = 0;
my $operation = "";
my $output = "";
my @input_form = ();
my $output_html = "";

# Get input from "param" via CGI.pm.
$num1 = param("num1");
$num2 = param("num2");
$operation = param("operation");

# Act on supplied input.
if ($operation eq "a") { $result = $num1 + $num2; }
if ($operation eq "s") { $result = $num1 - $num2; }
if ($operation eq "m") { $result = $num1 * $num2; }
if ($operation eq "d")
{
    if ($num2 == 0)
    {
        $result = "Cannot divide by zero.";
    }
    else { $result = $num1 / $num2; }
}

# Read in the HTML template file.
open (HTMLFILE, "<input_form.dat");
@input_form = <HTMLFILE>;
close HTMLFILE;
foreach (@input_form)
{
    $output_html .= $_;
}

# Insert result in HTML template.
$output_html =~ s/\$RESULT/$result/g;

# Send HTML to the browser.
print "Content-type:text/html\n\n";
print $output_html;

Running the Example

Upload both files to your web server, and make "calc.pl" globally readable and executable (try "chmod 755" if in doubt). Visit "http://www.yoursite.com/calc.pl" (or whatever URL points to the place you uploaded the script), and you should see a nifty little calculator in your browser. Try entering various combinations of numbers and operators.

The script begins by importing the "standard" portion of the CGI.pm module, allowing us access to an object named "param" that holds values submitted through HTML forms. We declare some some variables, and load the input from the "param" object into them. Depending on the value of "operator", we do the requested math; a special case is included to handle any attempts to divide by zero. Our HTML template gets loaded into a scalar, and a basic regular expression is used to insert the math result into the template. Last, the completed HTML is sent to the user's browser.

Most real-world web applications would be much more complicated, of course. We're not doing any real validation of user input to make sure the supplied information is acceptable, and our calculator doesn't handle anything beyond basic arithmetic. It's a good starting point for experimentation; try expanding the program to include more features, and play with different HTML output options.

The next chapter provides some pointers on writing code that is easy to understand. Well-written programs should be clear to anyone familiar with the language, and modifying them in the future shouldn't trigger the urge to pull your hair out.

Continue: Coding Style and Maintenance

Table of Contents