ch04.htm

Web_Programming_with_Perl5,一个不错的Perl语言教程。

<P>The <TT>-linebreak</TT> option causes the buttons to be laid out vertically aligned.

<H4 ALIGN="CENTER"><A NAME="Heading7"></A><FONT COLOR="#000077">Checkboxes</FONT></H4>

<P>Checkboxes are used for Boolean values. They can be used for things that require

a yes or no response. Using raw HTML, you create checkboxes by using the <TT>INPUT</TT>

tag with <TT>TYPE</TT> <TT>checkbox</TT> as shown in the following line:</P>

<PRE><FONT COLOR="#0066FF">&lt;INPUT TYPE=checkbox NAME='want-notification' VALUE='yes' CHECKED&gt;

</FONT></PRE>

<P>Using <TT>CGI::Form</TT>, this is a call to the method <TT>checkbox</TT>:</P>

<PRE><FONT COLOR="#0066FF">$q-&gt;checkbox( -name=&gt;'want-notification', -value=&gt;'yes', -checked=&gt;'true' );

</FONT></PRE>

<H4 ALIGN="CENTER"><A NAME="Heading8"></A><FONT COLOR="#000077">Hidden Fields</FONT></H4>

<P>Hidden fields are fields that do not appear on the form. At first you may wonder,

&quot;Why have hidden fields?&quot; It turns out that hidden fields are an essential

tool for solving the problem of maintaining state between transactions. In Chapter

16, &quot;Advanced CGI/HTML,&quot; the concept of maintaining state will be discussed

in great detail. Using raw HTML, you can create hidden fields using the <TT>INPUT</TT>

tag with <TT>TYPE hidden</TT>:</P>

<PRE><FONT COLOR="#0066FF">&lt;INPUT TYPE=hidden NAME='runningTotal' VALUE='36.25'&gt;

</FONT></PRE>

<P>Using <TT>CGI::Form</TT>, the following is a call to the method <TT>hidden</TT>:</P>

<PRE><FONT COLOR="#0066FF">$q-&gt;hidden( -name=&gt;'runningTotal', -value=&gt;'36.25' );

</FONT></PRE>



<DL>

	<DT><FONT COLOR="#0066FF"></FONT></DT>

</DL>



<H3 ALIGN="CENTER">

<HR WIDTH="84%">

<FONT COLOR="#0066FF"><BR>

</FONT><FONT COLOR="#000077">NOTE:</FONT></H3>





<BLOCKQUOTE>

	<P>It turns out that one of the primary programming issues regarding HTTP and CGI

	is that of state. It is often essential for a programmer to keep track of certain

	values as the user is navigating through the user interface. This will become more

	obvious as you go through some of the examples.<BR>

	

<HR>





</BLOCKQUOTE>



<H4 ALIGN="CENTER"><A NAME="Heading10"></A><FONT COLOR="#000077">Submit Buttons</FONT></H4>

<P>Submit buttons initiate the action of sending the form data back to the server.

A single form may have more than one Submit button to indicate what action is being

performed. To create Submit buttons, use the <TT>INPUT</TT> tag with <TT>TYPE</TT>

<TT>submit</TT>:</P>

<PRE><FONT COLOR="#0066FF">&lt;INPUT TYPE=submit NAME='action' VALUE='Submit'&gt;

</FONT></PRE>

<P>Using <TT>CGI::Form</TT>, the following calls the method <TT>submit</TT>:</P>

<PRE><FONT COLOR="#0066FF">$q-&gt;submit( -name=&gt;'action', -value=&gt;'Submit' );

</FONT></PRE>

<H4 ALIGN="CENTER"><A NAME="Heading11"></A><FONT COLOR="#000077">Reset Buttons</FONT></H4>

<P>Reset buttons also appear as push buttons. The effect they have on the form, however,

is to reset the contents of the form to its initial state of either blank fields

or default values. Create Reset buttons by using the <TT>INPUT</TT> tag with <TT>TYPE</TT>

<TT>reset</TT>, as shown here:</P>

<PRE><FONT COLOR="#0066FF">&lt;INPUT TYPE=reset VALUE='Clear'&gt;

</FONT></PRE>

<P>Using <TT>CGI::Form</TT>, call the method <TT>reset</TT>, in the following manner:</P>

<PRE><FONT COLOR="#0066FF">$q-&gt;reset( -value=&gt;'Clear' );

</FONT></PRE>

<H4 ALIGN="CENTER"><A NAME="Heading12"></A><FONT COLOR="#000077">Image Buttons</FONT></H4>

<P>Image buttons are the same as Submit buttons, except that an image is displayed

instead of text. For example, you can place an image of a mailbox that could cause

the action of mailing the form contents to a certain user. Using raw HTML, image

buttons are created with the <TT>INPUT</TT> tag with <TT>TYPE image</TT>, as seen

here:</P>

<PRE><FONT COLOR="#0066FF">&lt;INPUT TYPE=image SRC=&quot;images/doit.gif&quot; NAME='action' 

       VALUE='Doit' ALIGN=middle&gt;

</FONT></PRE>

<P>Using <TT>CGI::Form</TT>, this is a call to the method <TT>image_button</TT>,

as shown in the following example:</P>

<PRE><FONT COLOR="#0066FF">$q-&gt;image_button( -src=&gt;&quot;images/doit.gif&quot;, -name=&gt;'action', -value=&gt;'Doit',

                  -align=&gt;'middle' );

</FONT></PRE>

<P><TT>-src</TT> is used to specify the URL to the image which is to be displayed;<TT>

-</TT>name specifies an arbitrary name associated with the image button; <TT>-value</TT>

specifies an arbitrary value. The <TT>-name</TT> and <TT>-value</TT> parameters are

important to distinguish the action between multiple image buttons on a form. <TT>-align</TT>

is used to line up the image with the text that follows it. The possible values for

<TT>-align</TT> are <TT>top</TT>, <TT>middle</TT>, and <TT>bottom</TT>.

<H4 ALIGN="CENTER"><A NAME="Heading13"></A><FONT COLOR="#000077">Listboxes</FONT></H4>

<P>Listboxes are fields that contain a scrollable list of text strings for single

or multiple selection. You can use listboxes for such things as specifying a state

(single selection) or product of interest (multiple selection). Use the <TT>SELECT</TT>

and <TT>OPTION</TT> tags, as shown in the following lines, to create a listbox:</P>

<PRE><FONT COLOR="#0066FF">&lt;SELECT NAME='State' SIZE=3&gt;

&lt;OPTION&gt;CA

&lt;OPTION&gt;WA

&lt;OPTION&gt;OR

&lt;OPTION&gt;NV

&lt;OPTION&gt;AZ

&lt;/SELECT&gt;

</FONT></PRE>

<P>Using <TT>CGI::Form</TT>, this calls the <TT>scrolling_list</TT> method:</P>

<PRE><FONT COLOR="#0066FF">@states=( `CA', `WA', `OR', `NV', `AZ' );

$q-&gt;scrolling_list( -name=&gt;'State', -values=&gt;\@states, -default=&gt;'CA',

                    -size=&gt;3 );

</FONT></PRE>

<P>The nice feature of using <TT>scrolling_list</TT> in <TT>CGI::Form</TT> is that

the options can be stored within Perl arrays, which makes working with the data easier.

<H4 ALIGN="CENTER"><A NAME="Heading14"></A><FONT COLOR="#000077">Popup Menus</FONT></H4>

<P>With <TT>CGI::Form</TT>, popup menus, also referred to as drop-down lists, are

single selection lists that expand when the user clicks the icon to the right of

the text. Unlike listboxes, popup menus can only return a single selection. Popup

menus use the <TT>&lt;SELECT&gt;</TT> tag with <TT>SIZE</TT> equal to <TT>1</TT>:</P>

<PRE><FONT COLOR="#0066FF">&lt;SELECT NAME='State' SIZE=1&gt;

&lt;OPTION&gt;CA

&lt;OPTION&gt;WA

&lt;OPTION&gt;OR

&lt;OPTION&gt;NV

&lt;OPTION&gt;AZ

&lt;/SELECT&gt;

</FONT></PRE>

<P>Using <TT>CGI::Form</TT>, a call to the method <TT>popup_menu</TT>, is shown here:</P>

<PRE><FONT COLOR="#0066FF">@states=( `CA', `WA', `OR', `NV', `AZ' );

$q-&gt;popup_menu( -name=&gt;'State', -values=&gt;\@states, -default=&gt;'CA' );

</FONT></PRE>

<H4 ALIGN="CENTER"><A NAME="Heading15"></A><FONT COLOR="#000077">File-Upload Fields</FONT></H4>

<P>File-upload fields enable the user to specify files for uploading to the server.

Note that if you plan to use file-upload fields in your form, you must define your

form as multipart/form-data. This is the new MIME type introduced by Netscape 2.0

for handling large amounts of data sent back to the server. This type also allows

for binary data to be embedded within the form.</P>

<P>Using raw HTML, create file-upload fields with the <TT>INPUT</TT> tag and <TT>TYPE</TT>

file:</P>

<PRE><FONT COLOR="#0066FF">&lt;INPUT TYPE=file NAME=theFile&gt;

</FONT></PRE>

<P>Using <TT>CGI::Form</TT>, this is a call to the method <TT>filefield</TT>:</P>

<PRE><FONT COLOR="#0066FF">$q-&gt;filefield( -name=&gt;'theFile' );

</FONT></PRE>

<H4 ALIGN="CENTER"><A NAME="Heading16"></A><FONT COLOR="#000077">Image Maps</FONT></H4>

<P>Image maps allow users to interact with the page by selecting a part of the image

to navigate to another page or a location within the same page. Image maps are simply

files that contain a list of area shapes on an image and their corresponding URLs.

When a pixel on the image is clicked, the URL associated with the area containing

that pixel is returned. The Perl package <TT>CGI::Imagemap</TT> is available for

creating image maps within your Perl5 CGI script. The following are the possible

pixel area groupings:



<UL>

	<LI><TT>circle</TT>--Defines a circle of points given a center and edge point.

	<P>

	<LI>rect--Defines a rectangle of points given the upper-left and lower-right points.

	<P>

	<LI>point--Defines a single point.

	<P>

	<LI>poly--Defines a polygon of points given n number of points.

	<P>

	<LI>default--Defines the default action if the point matches none of the existing

	criteria.

</UL>



<P>This image map is stored on your Web server and is referred to using a standard

URL. Following is an example of a simple image map file:</P>

<PRE><FONT COLOR="#0066FF">circle food.html 10,10 15,15

rect entertainment.html 20,20 30,0

rect sports.html 50,20 60,0

</FONT></PRE>

<P>You can use this image map together with the <TT>&lt;A&gt;</TT> and <TT>&lt;IMG&gt;</TT>

HTML tags. In the following example, I will assume that the preceding map is stored

in the file <TT>maps/menu.map</TT> and that it corresponds to an image called <TT>my_menu.gif</TT>.</P>

<PRE><FONT COLOR="#0066FF">&lt;A HREF=&quot;maps/menu.map&quot;&gt;

&lt;IMG SRC=my_menu.gif ISMAP&gt;&lt;/A&gt;

</FONT></PRE>

<P>To use this image map along with an image in your form, use the <TT>CGI::Imagemap</TT>

module. Using <TT>CGI::Form</TT>, create an <TT>image_button</TT>; for example,</P>

<PRE><FONT COLOR="#0066FF">print $q-&gt;image_button( -name=&gt;'menu', -src=&gt;'images/my_menu.gif',

                        -align=&gt;'MIDDLE' );

</FONT></PRE>

<P>Then, assume this image map is stored in the file <TT>maps/menu.map</TT> on your

server. You can now associate the image map with the image using the following code:</P>

<PRE><FONT COLOR="#0066FF">use CGI::Imagemap;

use CGI::Form;



$q = new CGI::Form;

$x = $q-&gt;param( `menu.x' );

$y = $q-&gt;param( `menu.y' );

$map = $q-&gt;param( `maps/menu.map' );

$action = action_map( $x, $y, $map );

</FONT></PRE>

<H4 ALIGN="CENTER"><A NAME="Heading17"></A><FONT COLOR="#000077">Other Form Elements</FONT></H4>

<P>You can add other types of elements to your forms. The full list of available

form fields is available in the HTML 3.2 evolving specification, which can currently

be found at <TT>http://www.w3.org/pub/WWW/MarkUp/Wilbur/</TT>.

<H3 ALIGN="CENTER"><A NAME="Heading18"></A><FONT COLOR="#000077">Generating HTML

On-the-Fly with Perl5</FONT></H3>

<P>There are two ways to define your form. The first is to create a static HTML file

that contains all your form field definitions and reference the form to a particular

CGI script. Another, perhaps easier, method is to dynamically display your form within

your CGI script. The script can be called with a <TT>method get</TT> or a <TT>method

post</TT>. When it is called with <TT>method get</TT>, you can respond with the form

itself, and when it is called with <TT>method post</TT>, you can process the form

request. Everything you print to <TT>stdout</TT> from your CGI script is returned

back to the client (browser). This makes it very easy to generate HTML on-the-fly

with Perl--especially when you use the CGI modules for form generation and processing.

There is one drawback to this approach in that the Web server must execute a program

to respond to the request rather than simply read a potentially cached file. If you

don't mind the overhead of the extra process invocation, it will definitely make

the job of maintaining your form and CGI program a lot easier.

<H4 ALIGN="CENTER"><A NAME="Heading19"></A><FONT COLOR="#000077">Constructing Headers</FONT></H4>

<P>The first part of an HTML form that you should generate is the header, which contains

some important information about the text that is to follow. The most important piece