|
 |
 |
To access the contents, click the chapter and section titles.
Perl CGl Programming: No experience required.
(Publisher: Sybex, Inc.)
Author(s): Erik Strom
ISBN: 0782121578
Publication Date: 11/01/97
Skill 5 Creating Real-World HTML Forms with Perl and CGI
- Building an HTML form
- URLs and CGI
- The power of regular expressions
Forms in HTML are what make the World Wide Web interactive; they make it something more than a collection of good-looking graphics. Forms are what your Web site visitors will use to communicate with you, the Webmaster.
CGI is the heart of the communication; Perl is the brain. With these two tools, you will make your Web site usefulboth for your visitors and you.
Building an HTML Form
The concept of a form in the Hypertext Markup Language (HTML) is really quite simple. It gives the user the capability to enter information, rather than just display it. This feature alone is what allows two-way communication over the World Wide Web (see Figure 5.1).
Figure 5.1: Two-way communication on the Web is accomplished with forms.
But HTML cant do anything with the information in a form all by itself. What it can do is send the information to something that knows how to deal with it.
Through CGI, a Perl script can process the data a visitor deposits on your Web site and proceed according to your plan (see Figure 5.2).
Figure 5.2: Processing visitor information through CGI and Perl
This is important. Your intelligently written Perl script is capable of making decisions about how information should be digested and what to send back to the visitor as a result. Without the interaction that HTML forms allow, you would have no way of learning anything about your visitors.
Youd be working in the dark.
A Simple Form
Forms in HTML are used for two purposes: collecting information and creating interactivity between the visitor and the Web server. As an example of the former, you can create a small visitor information form with the following HTML code:
<HTML>
<HEAD>
<TITLE>Visitor Information Form</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="LEFT">Visitor Information Form</H1>
<HR>
<FORM ACTION="perl.bat" METHOD="GET">
<B>
Last name: <INPUT TYPE="text" NAME="LastName" SIZE=16>
First Name: <INPUT TYPE="text" NAME="FirstName" SIZE=16>
<BR><BR>
Address: <INPUT TYPE="text" NAME="Address" SIZE=32>
City: <INPUT TYPE="text" NAME="City" SIZE=32>
<BR><BR>
State: <INPUT TYPE="text" NAME="State" SIZE=2>
<BR><BR>
<CENTER>
<INPUT TYPE="submit" VALUE="Send Information">
<INPUT TYPE="reset" VALUE="Clear Form Fields">
</B>
</FORM>
</BODY>
</HTML>
Note: An interactive Web site is one that can tailor an individual response to a visitors input.
If you save this as form1.html you can run it in your Web browser by telling it to open the file in whatever location youve stored it. The result should look similar to Figure 5.3.
Figure 5.3: The first version of the visitor information form
HTML Forms Redux
A form is kicked off in HTML with the <FORM> statement, of course, but there is a bit more to it than that. Heres a brief review of the form tools used in the example.
- ACTION: The action the form should take when the user presses the button given a submit INPUT TYPE. More often than not, this is a URL to a CGI program.
- INPUT TYPE: Indicates that some kind of interaction with the user, or some input, is expected here. The type can be check box, hidden, image, password, radio, reset, submit, or text.
- METHOD: Usually GET or POST, though the default is GET if no method is given. The method determines how the form data will be sent out to a CGI application. (Details on this later in the skill.)
- NAME: Essentially a variable name; this string is sent to the CGI application along with the information in the field it names in the form name = value.
|
Table 5.1 lists the various input types, with details on what they do.
Table 5.1: HTML Input Types
|
Type
| Description
|
|
check box
| An on/off checked box that is used to indicate that a certain choice has been selected.
|
hidden
| A field hidden from the user. It can be used to pass information between the browser and the Web server, and then to the CGI program.
|
image
| An inline image (such as a GIF or JPEG file) with its URL indicated by SRC=. Clicking on the image will submit the form data along with the x-y coordinates of where it was clicked (measured from the top-left corner of the image).
|
password
| A one-line text field in which typed text is displayed as asterisks or some other character. Used for passwords, obviously.
|
radio
| A radio button. Similar to a check box, but radio buttons usually are set up in groups with the same name given to each button. Only one button in the group can be on; clicking one turns off any others.
|
reset
| A special button that resets (clears) the form. Its VALUE parameter determines what is displayed on the button.
|
submit
| Another special button. This one submits the form data to the URL specified in the forms ACTION parameter. Its VALUE parameter determines what is displayed on the button.
|
text
| A one-line field for entering text, with its width on the screen determined by the SIZE parameter.
|
|
|