Perl CGI: The Happy Path Form Basics

Prepared by Bill Kilgallon, Bill@KilgallonFamily.com

Supplying Information to your CGI Script

So far, you may have noticed your CGI scripts are not very good listeners. They can talk all day long, and tell all sorts of information, but so far, they have not heard a thing you have to say.

Remember from the beginning of the class when we discussed how data is moved from a web server (server) to a web browser (client) via a TCP/IP socket.

What we did not discuss, is how data is returned to the server from the client browser.

Obviously, a mechanisim exists, because a web browser requests a particular page from many pages available on a given server. The browser must have told the server which one it wants and where to send it.

Therefore, the web browser must be passing some data to the web server, otherwise the web server would never know what page to display, or that a page was requested, or even where to send it.

Therefore, there must be a way we can send additional data up to a web server, like the contents of text entry boxes or check boxes that appear on web page forms.

Actually, there are at least two common ways to accomplish this.

Managing State

We have established that it is possible for a web browser (client) to send data to a web server, but there is another problem to be solved for effective use of form data.

Picture an online store, where users keep adding items to their shopping cart while browsing your site, then eventually want to check out and supply payment and shipping information.

Each browser (client) request for a page is a brand new and completely unique request to the web server. But, the server must somehow keep track of where each customer has been and what they have added to their cart.

Also, thousands of different people are simultaneously browsing your site... you have to keep track of who has what in their shopping cart without getting them confused with each other.

This information about what a user has done, what they have accumulated, and where they have been, is a type of state data.

Actually, there are at least three common ways to accomplish this, POST data, GET data, and cookies.

Get Data

The basic web browser and web server have two predifined methods for exchanging form data, the GET method and the POST method.

With the GET method, the web browser embeds a long string onto the URL being passed back as an address to the web server.

This string that is appended to the URL is then available for parsing by the CGI script that the server invokes.

A sample URL resulting from a trivial GET form would be as follows:

http://picocheep/cgi-bin/killbill/forms1.pl?TextfieldOne=I+entered+my+text+here

An advantage of GET data is that it can make it simple to link into documents from other locations, you just manually create the correct URL.

A disadvantage of GET data is that it can make the URL get awfully long, awfully ugly, and exposes a lot of your internal data.

Post Data

The POST method directs the web browser to establish a secondary connection with the web server, and to use that connection to transfer all fields and field data.

The URL is short and clean, and the server manages the transfer of the web fields and field data.

Disadvantages include the inability to cache data and the inability to manually build links that emulate filled out forms.

Note that there are many other important architectural issues that should be considered when chosing GET or POST that are beyond the scope of this class.

Note also that it makes precious little difference which you use in your Perl CGI script, they are all handled for you by Perl, and you only change one argument to one call. Both will likely do what you want done just fine, especially for the trivial cases will be dealing with.

Tracking State Information

Since every request to a server is a new request, your script has to start from scratch.

You need some way to keep track of previous states to create a user "session" for a users visit to your site.

Much of this state information can be carried along nicely in form fields, but you may have other internal state information that you need to carry.

One way of accomplishing this is via the use of form fields that are "hidden".

These fields are passed back and forth from the browser, but never actually appear on the screen.

These fields can be set, read, and modified by your browser to create what is effectively a virtual session on a per user basis for maintaining important information. The trick is that all the information about the session is stored by the client browser, not by your web server.

Creating Forms

The Perl CGI construct to start a form is as follows:

# Indicate we are creating a form.
# For this example, everything defaults.  We will flesh it out later.
# print $query->startform({-method=>'post'});
print $query->startform({-method=>'get'});

Note that the examples shows both POST and GET methods. The only change to your Perl CGI script to switch between methods is to change the line shown. This is saving you gobs of work.

The Perl CGI construct to end a form is as follows:
```
print $query->endform();
```

A sample trivial form content entry is shown below. We will be covering more form field types later.

# Generate a text box for data entry
# Render it regardless of if we have previously entered text or not.
print $query->h1('Please enter some text');
print $query->textfield({-name=>'TextfieldOne',
			 -default=>'Enter your text here',
			 -size=>50,
			 -maxlength=>100});

Now that we have built the form, we must handle the results of the user inputting information and hitting return.

Since we did not define an action for the form we declared, it will default to calling the same script that was used to generate the form page, just with the users supplied values filled in for the fields.

Getting Information from Forms

The Perl CGI construct to extract the information from the web field we defined on the previous page would be:

# Now conditionally report what the user typed in previously.

# If this is not the first time into the script...
if ($query->param()) {
    # Extract out whatever the contents of our field were.
    my $textInput = $query->param(-name=>'TextfieldOne');

    # Generate our output
    print $query->hr();
    print $query->p('The text you previously entered was:'), $query->br();
    print $query->em({-align=>'center'}, $textInput);
    print $query->hr();
}

Note that the variable names are relatively independent, but the fieldname (in this case TextfieldOne) is constant.

Note also that we are detecting if this is the first time into the form by looking to see if there are any supplied arguments. If not, then this is the first time into the form, and we should just render the form. If there are supplied arguments, then the user must have entered data into the form and hit return, so we should display the results with their entered data. We have carried state along, complete with values.

Annotated Example

#!C:\perl\bin\perl.exe -w
use CGI;
use strict;

# Create a perlCGI object.  It automatically picks up any arguments on
# the incoming URL.

my $query = new CGI;

# Create a header, and let it default arguments, it likely knows
# better then we do.

print $query->header();  

# Start the body of our document, and give it a title (shows up on the
# browser bar and on printouts).  All the legal fields within the HTML
# "BODY" tag are supported, and are optional.  Other unsupported
# options can be specified as well, and will be correctly added.  Note
# that there is nothing actually in the body tag, just HTML modifiers
# being specified.

print $query->start_html({-title=>'Form Test One...',
			  -author=>'Bill Kilgallon'});

print $query->hr();

# Indicate we are creating a form.
# For this example, everything defaults.  We will flesh it out later.
# print $query->startform({-method=>'post'});
print $query->startform({-method=>'get'});

# Generate a text box for data entry
# Render it regardless of if we have previously entered text or not.
print $query->h1('Please enter some text');
print $query->textfield({-name=>'TextfieldOne',
			 -default=>'Enter your text here',
			 -size=>50,
			 -maxlength=>100});

print $query->endform();

# Now conditionally report what the user typed in previously.

# If this is not the first time into the script...
if ($query->param()) {
    # Extract out whatever the contents of our field were.
    my $textInput = $query->param(-name=>'TextfieldOne');

    # Generate our output
    print $query->hr();
    print $query->p('The text you previously entered was:'), $query->br();
    print $query->em({-align=>'center'}, $textInput);
    print $query->hr();
}

# And finally, end the document.

print $query->end_html;

Excercise

Write and execute a Perl CGI script that will ask for one field, and then generate a results page that contains the information entered by the user for this field.

Submit Button

Every form must have a "submit" button.

For a form with a single form element, Perl will automatically generate a hidden submit button that will respond to the carriage return.

If there is only one submit button on a page (for example a page with multiple forms), it will automatically respond to the carriage return. If there is more then one submit button on the page, it must be manually clicked.

When a submit button is invoked, the data on the form is submitted to the web server.

The Perl CGI construct to create a submit button would be as follows:
```
# Generate a submit button for this form
print $query->submit();
```

Reset Buttons

"Reset" buttons are optional.

When "Reset" is invoked, the forms field contents are returned to the values they had when the page was originally rendered. Note this is all done local to the browser... the server is not involved.

The Perl CGI construct to create a reset button would be as follows:
```
# Generate a reset button for this form
print $query->reset();
```

Text Fields

A text field allows the user to enter a line of text.

Use the text "area" construct, as opposed to this text "field" construct to allow the user to enter paragraphs.

The Perl CGI construct to create a text field would be as follows:

# Generate a text field for data entry
print $query->h1('Please enter some text');
print $query->textfield({-name=>'TextfieldOne',
			 -default=>'Enter your text here',
			 -size=>50,
			 -maxlength=>100});

The Perl CGI construct to then later extract the contents of this field would be

# Extract out whatever the contents of our text field were.
my $textInput = $query->param(-name=>'TextfieldOne');

# Generate our output
print $query->p('The text you previously entered was:'), $query->br();
print $query->em({-align=>'center'}, $textInput);

Text Areas

A text area allows the user to enter many lines of text.

Use the text "field" construct, as opposed to this text "area" construct to allow the user to shorter single line text fields.

The Perl CGI construct to create a text area would be as follows:

# Generate a text area for data entry
print $query->h1('Please enter some more text');
print $query->textarea({-name=>'TextareaOne',
			 -default=>'Enter lots of your text here',
			 -rows=>4,
			 -columns=>60});

The Perl CGI construct to then later extract the contents of this area would be

# Extract out whatever the contents of our text area was.
my $textInput = $query->param(-name=>'TextareaOne');
print $query->p('The text area contents were:'), $query->br();
print $query->em({-align=>'center'}, $textInput);

Password Fields

A password field allows the entering of text without echoing it on the screen.

Note that the actual data transferred is not secure or encrypted. Network logging, network sniffing, and many other attacks will easily intercept the password.

The only security this offers, is protection from someone looking over your shoulder at the screen. Note they could just as easily look over your shoulder at the keyboard.

The Perl CGI construct to create a password field would be as follows:

# Generate a password area
# Render it regardless of if we have previously entered text or not.
print $query->h1('Please enter some secret text');
print $query->password_field({-name=>'PasswordareaOne',
			 -default=>'Your Password',
			 -size=>10,
			 -maxlength=>60});

The Perl CGI construct to then later extract the contents of this area would be

    # Extract out whatever the contents of our password area were.
    my $textInput = $query->param(-name=>'PasswordareaOne');
    print $query->hr();
    print $query->p('The Password entered was:'), $query->br();
    print $query->em({-align=>'center'}, $textInput);
    print $query->hr();

Popup Menus

A popup menu allows the user to select one of several predefined menu entries, and only takes up a small amount of screen space.

Like a radio button, only one field can be chosen at a time.

The Perl CGI construct to create a popup menu would be as follows:

# Generate a popup menu
print $query->h1('Choose from the following menu');
print $query->popup_menu({-name=>'PopupOne',
			  -values=>['First Choice', 'Second Choice', 
				    'Third Choice', 'Fourth Choice', 
				    'Fifth Choice'],
			  -defaults=>'Fifth Choice'});

The Perl CGI construct to then later extract the contents of this menu would be

    # Extract out whatever the contents of our popup area were.
    my $textInput = $query->param(-name=>'PopupOne');
    print $query->hr();
    print $query->p('The popup selected was:'), $query->br();
    print $query->em({-align=>'center'}, $textInput);
    print $query->hr();

Scrolling Lists

The scrolling list will display a long list (scrollable if necessary) that contains a variety of choices.

You can specify the -multiple=>'true' option to allow more then one menu entry to be selected simultaneously.

Otherwise, the construct mimics the behavior of a radio button.

The Perl CGI construct to create a scrolling list would be as follows:

# Generate a scrolling list
print $query->h1('Choose from the following list');
print $query->scrolling_list({-name=>'ScrolllistOne',
			      -values=>['First Choice', 'Second Choice', 
					'Third Choice', 'Fourth Choice', 
					'Fifth Choice'],
			      -multiple=>'true',
			      -defaults=>'Fifth Choice'});

The Perl CGI construct to then later extract the contents of this menu would be

    # Extract out whatever the scrolling list was
    my @textInput = $query->param(-name=>'ScrolllistOne');
    print $query->hr();
    print $query->p('The scrolling list selects were:'), $query->br();
    print $query->em({-align=>'center'}, @textInput);
    print $query->hr();

Checkbox Groups

The checkbox group construct allows you to click boxes to tag elements within a list of related items.

The Perl CGI construct to create a checkbox group:

# Generate a checkbox for selecting zero or more elements from a list
print $query->checkbox_group({-name=>'CheckboxOne',
			      -values=>['First Box','Second Box', 'Third Box',
			                'Fourth Box', 'Fifth Box'],
			      -defaults=>['Second Box','Fifth Box']});

The Perl CGI construct to then later extract the checkbox elements selected would be

    # Extract out whatever the contents of our checkbox were.
    my @textInput = $query->param(-name=>'CheckboxOne');
    print $query->hr();
    print $query->p('The checkbox entries you selected were:'), $query->br();
    print $query->em({-align=>'center'}, @textInput);
    print $query->hr();

Standalone Checkbox

The standalone checkbox construct allows you to create a single click box to be either turned on or off.

The Perl CGI construct to create a standalone checkbox:

# Generate a standalone checkbox, initialize checked
print $query->checkbox({-name=>'CheckboxAloneOne',
			-checked=>'checked'});
print $query->br();

The Perl CGI construct to then later extract the standalone checkbox state would be

    # Extract out whatever the state of the standalone checkbox was.
    # (Either "on" or an empty string)
    my $textInput = $query->param(-name=>'CheckboxAloneOne');
    print $query->hr();
    print $query->p('The checkboxalone state was:'), $query->br();
    print $query->em({-align=>'center'}, $textInput);
    print $query->hr();

Radio Button Group

The radio button group construct allows you to specify a list of entries, only one of which may be selected at a time.

The Perl CGI construct to create a radio group:

# Generate a Radio Group
print $query->h1('Choose only one from the following list');
print $query->radio_group({-name=>'RadioOne',
			   -values=>['First Choice', 'Second Choice', 
				     'Third Choice', 'Fourth Choice', 
				     'Fifth Choice'],
			   -default=>'Second Choice'});

The Perl CGI construct to then later extract the radio group value would be

    # Extract out whatever the radio group was
    my $textInput = $query->param(-name=>'RadioOne');
    print $query->hr();
    print $query->p('The radio group select was:'), $query->br();
    print $query->em({-align=>'center'}, $textInput);
    print $query->hr();

Generating URL's

Perl constructs are also available for generating URL information in just about any form imaginable.

The Perl CGI construct to construct a URL is:

    # Generate my URL
    print $query->br("My full URL:", $query->url() );
    print $query->br("My relative URL:", $query->url(-relative=>1) );
    print $query->br("My absolute URL:", $query->url(-absolute=>1) );
    print $query->br("My URL with path:", $query->url(-path_info=>1) );
    print $query->br("My URL with path and query info:", 
		     $query->url(-path_info=>1, -query=>1) );
    print $query->hr();

Perl constructs are also available for generating URL information in just about any form imaginable.

Because the form that uses the "-query=>1" maintains all the current state information from your CGI object ($query), you can use it in conjunction with the param method to generate custom links with unique states.

Detailed Annotated Example:

#!C:\perl\bin\perl.exe -w
use CGI;
use strict;

my $query=new CGI;

# Create a header, and let it default arguments, it likely knows
# better then we do.

print $query->header();  

# Start the body of our document, and give it a title 

print $query->start_html({-title=>'Compuware Perl Class State Example...',
			  -author=>'Bill Kilgallon'});

my $currentState = $query->param('myState');

# First time in the form, no state value exists
if ( ! $currentState ) {

    # Start the input form
    print $query->startform({-method=>'post'});

    # Print Name form field
    print $query->h2("Please enter your Name: ");
    print $query->textfield({-name=>'userName'});
    
    # Print Employee Number form field
    print $query->h2("Please enter your Employee ID Number:");
    print $query->textfield({-name=>'employeeId'});
    print $query->p();
    
    # Create a hidden field that maintains state so we know where we
    # are in the sequence of forms.
    $query->param('myState', 'DoPageTwo');    
    print $query->hidden({-name=>'myState'});

    # Submit button
    print $query->submit();
    
    # End the form
    print $query->endform();
} 

# See if we are in stage two of our form list
elsif (  $currentState eq 'DoPageTwo' )
{
    # Start the input form
    print $query->startform({-method=>'post'});

    # Print Date form field
    print $query->h2("Please enter Todays Date: ", $query->br());
    print $query->textfield({-name=>'theDate'});
    
    # Create a hidden field that maintains state so we know where we
    # are in the sequence of forms.
    $query->param('myState', 'DoPageThree');    
    print $query->hidden({-name=>'myState'});

    # We also need to carry along some other hidden fields, to
    # propagate the info from the first form through this second
    # form, and on to the third form, etc.
    print $query->hidden({-name=>'userName'});
    print $query->hidden({-name=>'employeeId'});
    print $query->hidden({-name=>'theDate'});

    # Submit button
    print $query->submit();
    
    # End the form
    print $query->endform();
}

# See if we are in stage three of our form list
elsif (  $currentState eq 'DoPageThree' )
{
    # Continue to carry along necessary hidden fields
    print $query->hidden({-name=>'userName'});
    print $query->hidden({-name=>'employeeId'});
    print $query->hidden({-name=>'theDate'});

    print $query->h1("Here are the values you input so far:");
    print $query->p($query->em("userName: ") . $query->param('userName'));
    print $query->p($query->em("employeeId: ") . $query->param('employeeId'));
    print $query->p($query->em("theDate: ") . $query->param('theDate'));

    print $query->hr();

    # Set the state for the link to be generated for option one
    $query->param('myState', 'DoPageFourA');
    print $query->a({-href=>$query->url({-query=>1})},
		    "Choose Link A" );

    print $query->br();

    # Set the state for the link to be generated for option two
    $query->param('myState', 'DoPageFourB');
    print $query->a({-href=>$query->url({-query=>1})},
		    "Choose Link B" );
    
    print $query->hr();

}

# See if we are in form 4, branch A of our state thread
elsif (  $currentState eq 'DoPageFourA' )
{
    print $query->h1("You chose ", $query->em("Option A"));
    print $query->hr();
    print $query->h2("Here are the values you input so far:");
    print $query->p($query->em("userName: ") . $query->param('userName'));
    print $query->p($query->em("employeeId: ") . $query->param('employeeId'));
    print $query->p($query->em("theDate: ") . $query->param('theDate'));
    print $query->hr();
}    

# See if we are in form 4, branch B of our state thread
elsif (  $currentState eq 'DoPageFourB' )
{
    print $query->h1("You chose ", $query->em("Option B"));
    print $query->hr();
    print $query->h2("Here are the values you input so far:");
    print $query->p($query->em("userName: ") . $query->param('userName'));
    print $query->p($query->em("employeeId: ") . $query->param('employeeId'));
    print $query->p($query->em("theDate: ") . $query->param('theDate'));
    print $query->hr();
}    

# And finally, end the document.

print $query->end_html;

Annotated Examples

A full annotated example of the discussed operations

An eclectic mess of Perl CGI functionality:

#!C:\perl\bin\perl.exe -w
use CGI;
use strict;

# Create a perlCGI object.  It automatically picks up any arguments on
# the incoming URL.

my $query = new CGI;

# Create a header, and let it default arguments, it likely knows
# better then we do.

print $query->header();  

# Start the body of our document, and give it a title (shows up on the
# browser bar and on printouts).  All the legal fields within the HTML
# "BODY" tag are supported, and are optional.  Other unsupported
# options can be specified as well, and will be correctly added.  Note
# that there is nothing actually in the body tag, just HTML modifiers
# being specified.

print $query->start_html({-title=>'Form Test One...',
			  -author=>'Bill Kilgallon'});

print $query->hr();

# Indicate we are creating a form.
# For this example, everything defaults.  We will flesh it out later.
print $query->startform({-method=>'post'});
# print $query->startform({-method=>'get'});

# Generate a text field for data entry
print $query->h1('Please enter some text');
print $query->textfield({-name=>'TextfieldOne',
			 -default=>'Enter your text here',
			 -size=>50,
			 -maxlength=>100});
print $query->br();

# Generate a text area for data entry
print $query->h1('Please enter some more text');
print $query->textarea({-name=>'TextareaOne',
			-default=>'Enter lots of your text here',
			-rows=>4,
			-columns=>60});
print $query->br();

# Generate a password area
print $query->h1('Please enter some secret text');
print $query->password_field({-name=>'PasswordareaOne',
			      -default=>'Your Password',
			      -size=>10,
			      -maxlength=>60});
print $query->br();

# Generate a popup menu
print $query->h1('Choose from the following menu');
print $query->popup_menu({-name=>'PopupOne',
			  -values=>['First Choice', 'Second Choice', 
				    'Third Choice', 'Fourth Choice', 
				    'Fifth Choice'],
			  -defaults=>'Fifth Choice'});
print $query->br();

# Generate a scrolling list
print $query->h1('Choose from the following list');
print $query->scrolling_list({-name=>'ScrolllistOne',
			      -values=>['First Choice', 'Second Choice', 
					'Third Choice', 'Fourth Choice', 
					'Fifth Choice'],
			      -multiple=>'true',
			      -defaults=>'Fifth Choice'});
print $query->br();

# Generate a checkbox for selecting zero or more elements from a list
print $query->checkbox_group({-name=>'CheckboxOne',
			      -values=>['First Box','Second Box', 'Third Box',
					'Fourth Box', 'Fifth Box'],
			      -defaults=>['Second Box','Fifth Box']});
print $query->br();

# Generate a standalone checkbox, initialize checked
print $query->checkbox({-name=>'CheckboxAloneOne',
			-checked=>'checked'});
print $query->br();

# Generate a Radio Group
print $query->h1('Choose only one from the following list');
print $query->radio_group({-name=>'RadioOne',
			   -values=>['First Choice', 'Second Choice', 
				     'Third Choice', 'Fourth Choice', 
				     'Fifth Choice'],
			   -default=>'Second Choice'});
print $query->br();

# Generate a submit button for this form
print $query->submit();

# Generate a reset button for this form
print $query->reset();

print $query->endform();

print $query->hr();



# Now conditionally report what the user typed in previously.

# If this is not the first time into the script...
if ($query->param()) {
    # Extract out whatever the contents of our text field were.
    my $textInput = $query->param(-name=>'TextfieldOne');
    print $query->hr();
    print $query->p('The textfield entered was:'), $query->br();
    print $query->em({-align=>'center'}, $textInput);
    print $query->hr();

    # Extract out whatever the contents of our text area were.
    my $textInput = $query->param(-name=>'TextareaOne');
    print $query->hr();
    print $query->p('The textarea entered was:'), $query->br();
    print $query->em({-align=>'center'}, $textInput);
    print $query->hr();

    # Extract out whatever the contents of our password area were.
    my $textInput = $query->param(-name=>'PasswordareaOne');
    print $query->hr();
    print $query->p('The Password entered was:'), $query->br();
    print $query->em({-align=>'center'}, $textInput);
    print $query->hr();

    # Extract out whatever the contents of our popup area were.
    my $textInput = $query->param(-name=>'PopupOne');
    print $query->hr();
    print $query->p('The popup selected was:'), $query->br();
    print $query->em({-align=>'center'}, $textInput);
    print $query->hr();

    # Extract out whatever the scrolling list was
    my @textInput = $query->param(-name=>'ScrolllistOne');
    print $query->hr();
    print $query->p('The scrolling list selects were:'), $query->br();
    print $query->em({-align=>'center'}, @textInput);
    print $query->hr();

    # Extract out whatever the contents of our checkbox were.
    my @textInput = $query->param(-name=>'CheckboxOne');
    print $query->hr();
    print $query->p('The checkbox entries you selected were:'), $query->br();
    print $query->em({-align=>'center'}, @textInput);
    print $query->hr();

    # Extract out whatever the state of the standalone checkbox was.
    # (Either "on" or an empty string)
    my $textInput = $query->param(-name=>'CheckboxAloneOne');
    print $query->hr();
    print $query->p('The checkboxalone state was:'), $query->br();
    print $query->em({-align=>'center'}, $textInput);
    print $query->hr();

    # Extract out whatever the radio group was
    my $textInput = $query->param(-name=>'RadioOne');
    print $query->hr();
    print $query->p('The radio group select was:'), $query->br();
    print $query->em({-align=>'center'}, $textInput);
    print $query->hr();

    # Generate my URL
    print $query->br("My full URL:", $query->url() );
    print $query->br("My relative URL:", $query->url(-relative=>1) );
    print $query->br("My absolute URL:", $query->url(-absolute=>1) );
    print $query->br("My URL with path:", $query->url(-path_info=>1) );
    print $query->br("My URL with path and query info:", 
		     $query->url(-path_info=>1, -query=>1) );
    print $query->hr();

}

# And finally, end the document.

print $query->end_html;

Annotated Examples

Another full annotated example of the discussed operations

Create a table of form fields with the use of extensively prebuilt components.

#!C:\perl\bin\perl.exe -w
use CGI;
use strict;

# Demonstration program of using arrays to build up and nest HTML
# constructs using arrays and scalars.
#
# Bill Kilgallon, 5/15/00
# Bill@KilgallonFamily.Com
# This software released via the Artistic License
#

# Create our CGI object so we can get at the methods we want.
my $query=new CGI;

# Create a header, and let it default arguments, it likely knows
# better then we do.
print $query->header();  

# Start the body of our document, and give it a title 
print $query->start_html({-title=>'Table Demo',
			  -author=>'Bill Kilgallon'});

# Declare some variables
my (@rowOneData, @rowTwoData, @rowThreeData, @rowFourData);
my ($rowOneHtml, $rowTwoHtml, $rowThreeHtml, $rowFourHtml);
my $number;

# We will start from the inside out, and build up from the simplest
# parts.  These will then be gradually assembled to make the entire
# table construct.

# First, the easy part, the header row.
# Use our normal HTML generation logic, but instead of printing
# it out, save it in a scaler string variable.
my $headerHtml = $query->th(['Column One', 'Column Two', 'Column Three',
			     'Column Four']);

# Now, create the text entry fields for the rows.  This time, we will
# use the push function to build up an array of individual form field
# strings.  This will be helpfull later, as the perlCGI table
# functions are distributive.  That is, they will automatically apply
# themselves to each element within an array.  Again, instead of
# printing it out now, create an array for future use.  We are
# building up pieces.

# Note also that we are letting the loop variable change the field
# name... in effect we are dynamically naming our variables
# (FieldOneOne, FieldOneTwo, FieldOneThree, etc).

foreach $number ("One","Two","Three","Four") {
    push (@rowOneData, $query->textfield({-name=>"FieldOne$number"}));
    push (@rowTwoData, $query->textfield({-name=>"FieldTwo$number"}));
    push (@rowThreeData, $query->textfield({-name=>"FieldThree$number"}));
    push (@rowFourData, $query->textfield({-name=>"FieldFour$number"}));
}

# Now, convert the text fields built above into table data entries.
# Because the CGI methods are distributive, we only need to call the
# method once and pass it the whole array, and the HTML  and 
# constructs will be automatically created for each element within the
# array, and the whole mess will be returned as a big long html
# string.  We will save this string to be output later.

# Note we could have generated yet another array here also using push,
# and then in the section below where the Tr() constructs appear use
# the distributive proerty of that method as well, and had a lot less
# typing.  Instead, I figured you are confused enough at this point,
# and opted for clarity over elegance.

$rowOneHtml = $query->td(\@rowOneData);
$rowTwoHtml = $query->td(\@rowTwoData);
$rowThreeHtml = $query->td(\@rowThreeData);
$rowFourHtml = $query->td(\@rowFourData);

# Last part to be built (and another easy one)... Build my caption
my $tableCaption = $query->caption("Bills Sample Table");

# Now, build up an entire table based on the parts assembled above
# into one big long HTML string.
my $myTable = $query->table({-border=>'5'},
			    $tableCaption,
			    $query->Tr($headerHtml),
			    $query->Tr($rowOneHtml),
			    $query->Tr($rowTwoHtml),
			    $query->Tr($rowThreeHtml),
			    $query->Tr($rowFourHtml));
    
# Start the form
print $query->startform({-method=>'post'});

# Dump all the previously built up HTML code to the screen.
print $myTable;

# Create and display the submit and reset buttons
print $query->submit();
print $query->reset();

# display the HTML form end construct.
print $query->endform();

# And finally, end the document.
print $query->end_html;

Return to Index