Working with Web Forms

This document was written by CS 290W TA David Corcoran and was last modified

Web forms allow the user to transmit information to a CGI script. The following will show different examples of these form features and how to get information from them.

Text Field

Text Fields are the easiest to get information from. On a Text Field the value that you set NAME equal to will be what you use in the CGI parsing library. The following is HTML for a Text Field and its corresponding Perl code.

HTML

<INPUT TYPE="TEXT" SIZE="20" NAME="FIRSTNAME">
Perl
#!/usr/local/bin/perl

do "cgi-lib.pl"||die "Cannot Start CGI-LIB\n";
&ReadParse;

$sFirstName = $in{'FIRSTNAME'};
In this example FIRSTNAME is the NAME of the Text Field and therefore $sFirstName will get the value that is contained in the TextField called FIRSTNAME.

Text Area

Text Areas work identically like Text Fields. The name of the Text Area will be used to get the corresponding data from the CGI Parsing Library. The following is HTML for a Text Area and its corresponding Perl code.

HTML

<TEXTAREA NAME="INPUTFORM" ROWS="5" 
COLS="30"></TEXTAREA>
Perl
#!/usr/local/bin/perl

do "cgi-lib.pl"||die "Cannot Start CGI-LIB\n";
&ReadParse;

$sFormInput = $in{'INPUTFORM'};
In this example INPUTFORM is the NAME of the Text Area and therefore $sFormInput will get the value that is contained in the Text Area called INPUTFORM.

Radio Buttons

Visa
MasterCard
Discover Card

Radio Buttons work a bit differently than do Text Fields and Text Areas. Radio Buttons allow the user to pick exactly one of many choices. For example, if you wanted to make a list of Credit Card choices you would name each radio button CARD like we have done below and they would differ by what is contained in the VALUE field. The following is some example code to grab Radio Button information:

HTML

<INPUT TYPE="RADIO" NAME="CARD" 
VALUE="Visa"> Visa <BR>
<INPUT TYPE="RADIO" NAME="CARD" 
VALUE="MasterCard"> MasterCard <BR>
<INPUT TYPE="RADIO" NAME="CARD" 
VALUE="DiscoverCard"> Discover Card 
Perl
#!/usr/local/bin/perl

do "cgi-lib.pl"||die "Cannot Start CGI-LIB\n";
&ReadParse;

$sWhichCard = $in{'CARD'};

if    ( $sWhichCard eq "Visa" )          
# Card is a Visa Card
elsif ( $sWhichCard eq "MasterCard" )    
# Card is a MasterCard
elsif ( $sWhichCard eq "DiscoverCard" )  
# Card is a Discover Card
As you can see, each button is linked with the same name "CARD". What differs and allows the user to determine which button is clicked depends on which VALUE is contained in CARD.

CheckBox

Are you 21 or older?

Checkboxes are a way to determine a singular value such as ON or OFF. Look at the example above. We are curious if the user's age is 21 or older. If it is checked, then the user meets the criteria. The following is an example:

HTML

<INPUT TYPE="CHECKBOX" NAME="SURE" 
VALUE="legal"> Are you 21 or older?
Perl
#!/usr/local/bin/perl

do "cgi-lib.pl"||die "Cannot Start CGI-LIB\n";
&ReadParse;

$sAreYouSure = $in{'SURE'};

if ( $sAreYouSure eq "legal" )
# Checkbox is checked.
If the checkbox is checked, $sAreYouSure receives the character string specified by the VALUE attribute. (If there is no VALUE attribute, the default character string is "on".) If the checkbox is not checked, then $sAreYouSure receives an empty character string.

Selection List

Selection Lists receive a value much like a TextField does except the values are predefined in the list. For example, in the previous list the only possible values that can be passed to the Perl script are: Nothing, Under 18, 18 - 29, 30 - 39, Over 39. Consider the following code:

HTML

<SELECT NAME="AGE" SIZE="3">
<OPTION>Under 18</OPTION>
<OPTION>18 - 29</OPTION>
<OPTION>30 - 39</OPTION>
<OPTION>Over 39</OPTION>
</SELECT>
Perl
#!/usr/local/bin/perl

do "cgi-lib.pl"||die "Cannot Start CGI-LIB\n";
&ReadParse;

$sFormInput = $in{'AGE'};

if    ( $sFormInput eq "Under 18" )
# Person is under 18.
elsif ( $sFormInput eq "18 - 29" )
# Person is between 18 - 29.
...
In this example the value of $sFormInput will be the string value that was chosen in the Selection List. If no value is clicked, then $sFormInput will have no value.

[ Back to Main ]