Click Here!
home account info subscribe login search My ITKnowledge FAQ/help site map contact us


 
Brief Full
 Advanced
      Search
 Search Tips
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

Bookmark It

Search this book:
 
Previous Table of Contents Next


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 useful—both 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 can’t 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.

You’d 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 visitor’s 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 you’ve 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. Here’s 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 form’s 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.


Previous Table of Contents Next


Products |  Contact Us |  About Us |  Privacy  |  Ad Info  |  Home

Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc.
All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited.