📄 ch04.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<!-- This document was created from RTF source by rtftohtml version 3.0.1 -->
<META NAME="GENERATOR" Content="Symantec Visual Page 1.0">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
<TITLE>Without a title - Title</TITLE>
</HEAD>
<BODY BACKGROUND="r2harch.gif" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/r2harch.gif" TEXT="#000000" BGCOLOR="#FFFFFF">
<P><BR>
<P ALIGN="CENTER"><A HREF="ch03.htm" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/ch03.htm"><IMG SRC="blanprev.gif" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/blanprev.gif" WIDTH="37" HEIGHT="37"
ALIGN="BOTTOM" BORDER="2"></A><A HREF="index-1.htm" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/index-1.htm"><IMG SRC="blantoc.gif" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/blantoc.gif" WIDTH="42"
HEIGHT="37" ALIGN="BOTTOM" BORDER="2"></A><A HREF="ch05.htm" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/ch05.htm"><IMG SRC="blannext.gif" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/blannext.gif"
WIDTH="45" HEIGHT="37" ALIGN="BOTTOM" BORDER="2"></A>
<P>
<P ALIGN="CENTER"><FONT SIZE="5" COLOR="#0000AA">4</FONT>
<H2 ALIGN="CENTER"><A NAME="Heading1"></A><FONT COLOR="#000077">HTML FormsThe Foundation
of an Interactive Web</FONT></H2>
<P ALIGN="CENTER">by Brian Deng
<H2 ALIGN="CENTER">
<HR>
</H2>
<UL>
<LI><A HREF="#Heading1">HTML FormsThe Foundation of an Interactive Web</A>
<UL>
<UL>
<LI><A HREF="#Heading3">Text Fields</A>
<LI><A HREF="#Heading4">Text Areas</A>
<LI><A HREF="#Heading5">Password Fields</A>
<LI><A HREF="#Heading6">Radio Buttons</A>
<LI><A HREF="#Heading7">Checkboxes</A>
<LI><A HREF="#Heading8">Hidden Fields</A>
<LI><A HREF="#Heading10">Submit Buttons</A>
<LI><A HREF="#Heading11">Reset Buttons</A>
<LI><A HREF="#Heading12">Image Buttons</A>
<LI><A HREF="#Heading13">Listboxes</A>
<LI><A HREF="#Heading14">Popup Menus</A>
<LI><A HREF="#Heading15">File-Upload Fields</A>
<LI><A HREF="#Heading16">Image Maps</A>
<LI><A HREF="#Heading17">Other Form Elements</A>
</UL>
<LI><A HREF="#Heading18">Generating HTML On-the-Fly with Perl5</A>
<UL>
<LI><A HREF="#Heading19">Constructing Headers</A>
<LI><A HREF="#Heading20">Constructing Elements</A>
</UL>
<LI><A HREF="#Heading21">Listing 4.1. Perl code for customer questionnaire.</A>
<UL>
<LI><A HREF="#Heading22">Included Files</A>
</UL>
<LI><A HREF="#Heading23">Listing 4.2. Perl subroutine for including another HTML
file.</A>
<LI><A HREF="#Heading24">Listing 4.3. parsessi.pl CGI program for including and parsing
a .shtml file.</A>
<UL>
<LI><A HREF="#Heading26">Closing Up</A>
</UL>
<LI><A HREF="#Heading27">Heady StuffGenerating More Advanced (Possibly Dynamic) HTML</A>
<UL>
<LI><A HREF="#Heading28">Other Elements Within Elements</A>
</UL>
<LI><A HREF="#Heading29">Listing 4.4. Perl code that emits a form formatted using
the <TABLE> object.</A>
<UL>
<LI><A HREF="#Heading31">Other Objects: Applets, Images, Animation, and the <EMBED>
Tag</A>
<LI><A HREF="#Heading32">What Forms Cannot Provide</A>
</UL>
<LI><A HREF="#Heading33">Summary</A>
</UL>
</UL>
<P>
<HR>
</P>
<UL>
<LI>Generating HTML On-the-Fly with Perl5
<P>
<LI>Heady Stuff--Generating More Advanced
<P>
<LI>(Possibly Dynamic) HTML
</UL>
<P>This chapter serves as a review of HTML forms. I will assume you have a working
knowledge of HTML tags. The HTML tags discussed in this review are limited to those
that pertain to creating forms. Later in this chapter, I will discuss some more advanced
HTML tags to give your forms a better look and feel. This chapter introduces the
CGI modules available for use with Perl5 and how they can be used to simplify the
generation of HTML forms.</P>
<P>The CGI modules consist of several packages, or classes, written by various Perl
contributors. These modules contain some very useful abstractions for HTML generation
and CGI processing. Instead of learning how to parse the received data within your
script, you can leverage the work already done by these Perl experts. The methods
provided by these classes can take care of the dirty work and give you more flexibility
to be creative with your Web content. As you will see, the <TT>CGI::Form</TT> package
gives you an easy-to-use programming interface to create HTML forms.
<DL>
<DT></DT>
</DL>
<H3 ALIGN="CENTER">
<HR WIDTH="84%">
<BR>
<FONT COLOR="#000077">NOTE:</FONT></H3>
<BLOCKQUOTE>
<P>You can obtain the <TT>CGI::Form</TT> module as well as other modules from the
CPAN included on the CD provided with this book.<BR>
<HR WIDTH="101%">
</BLOCKQUOTE>
<P>As you must already know, HTML forms are an essential reason for the Web's popularity.
Forms bring a powerful interactive aspect to the Web. Another thing the HTML form
provides is a cross-platform user interface. This capability is much more subtle
than the first, but if deciding on a client platform is a difficult decision for
you, HTML forms may be the answer. If you want to write simple applications such
as the ones in subsequent chapters (or even more complex ones), you can focus on
one piece of code to run on your server and provide a platform-independent user interface
to your application through the Web. Forms still have some drawbacks, and these are
mentioned in this chapter but discussed in greater detail in subsequent chapters.</P>
<P>HTML forms essentially consist of three things: a form declaration or header,
one or more input fields, such as text fields or list boxes, and the button that
submits the form data. This section discusses the different field types that can
make up a form. Along with each field type is an example of how the HTML code might
look, as well as how you can construct the field using the <TT>CGI::Form</TT> package.</P>
<P>The first thing you will need to do is construct a new <TT>CGI::Form</TT> object.
This can be done by using the <TT>new()</TT> method. For example:</P>
<PRE><FONT COLOR="#0066FF">use CGI::Form;
$q = new CGI::Form;
</FONT></PRE>
<P>The <TT>$q</TT> variable will then contain an instance of a <TT>CGI::Form</TT>
object that can then be used to emit the HTML for your form using the methods listed
in the following.
<H4 ALIGN="CENTER"><A NAME="Heading3"></A><FONT COLOR="#000077">Text Fields</FONT></H4>
<P>One of the most commonly used fields is the <TT>text</TT> field. This is an input
field that allows the user to type in a single line of text. For multiple lines of
text see "Text Areas" in the following section. Text fields can be used
for things such as names, phone numbers, and other user input. Using raw HTML, you
can create a <TT>text</TT> field using the <TT>INPUT</TT> tag with <TT>TYPE</TT>
<TT>text</TT> as shown here:</P>
<PRE><FONT COLOR="#0066FF"><INPUT TYPE=text NAME="Name"" SIZE=32 MAXLENGTH=32 VALUE="Your name">
</FONT></PRE>
<P>Using <TT>CGI::Form</TT>, this is a call to the method <TT>textfield</TT>, as
shown here:</P>
<PRE><FONT COLOR="#0066FF">$q->textfield(-name=>'Name', -default=>'Your name', -size=>32, -maxlength=>32);
</FONT></PRE>
<P><TT>-name</TT> specifies the name of the field. This value is used later for querying
the value of the field during the <TT>POST</TT> request. <TT>-default</TT> specifies
the default value of the field. <TT>-size</TT> specifies the size, in characters,
of the displayed text field. <TT>-maxlength</TT> specifies the maximum number of
characters allowed for the field.
<H4 ALIGN="CENTER"><A NAME="Heading4"></A><FONT COLOR="#000077">Text Areas</FONT></H4>
<P>Text areas are very similar to text fields. The difference is that text area values
can span multiple lines. Text areas might be used for such things as addresses or
comments. Using raw HTML, you can create a text area using the <TT><TEXTAREA></TT>
tag as shown here:</P>
<PRE><FONT COLOR="#0066FF"><TEXTAREA NAME="Address" ROWS=6 COLS=32>Your address</TEXTAREA>
</FONT></PRE>
<P>Using <TT>CGI::Form</TT>, this is a call to the method <TT>textarea</TT>, as shown
here:</P>
<PRE><FONT COLOR="#0066FF">$q->textarea( -name=>'Address', -default=>'Your address', -rows=>6, -cols=>32);
</FONT></PRE>
<P><TT>-rows</TT> specifies the number of rows to display to the user. <TT>-cols</TT>
specifies the number of columns to display to the user. The user is not constrained
to the values of <TT>-rows </TT>and <TT>-cols</TT> for his/her entry. If the user
needs extra space to enter more text, he/she can use the scrollbars provided with
this form field.
<H4 ALIGN="CENTER"><A NAME="Heading5"></A><FONT COLOR="#000077">Password Fields</FONT></H4>
<P>Password fields are also very similar to text fields. The difference is that the
characters that are typed into the field are not displayed. This is useful for entering
passwords (thus the name <TT>password</TT> field). Using raw HTML, you can create
<TT>password</TT> fields using the <TT>INPUT</TT> tag with <TT>TYPE</TT> <TT>password</TT>
like this:</P>
<PRE><FONT COLOR="#0066FF"><INPUT TYPE=password NAME=password VALUE="" SIZE=8 MAXLENGTH=8>
</FONT></PRE>
<P>Using <TT>CGI::Form</TT>, this is a call to the method <TT>password_field</TT>,
as shown here:</P>
<PRE><FONT COLOR="#0066FF">$q->password_field( -name=>'Password', -default=>'', -size=>8, -maxlength=>8 );
</FONT></PRE>
<H4 ALIGN="CENTER"><A NAME="Heading6"></A><FONT COLOR="#000077">Radio Buttons</FONT></H4>
<P>Radio buttons are used to select one out of several choices. This can be used
for such things as designating a sex or marital status. Using raw HTML, you create
radio buttons using the <TT>INPUT</TT> tag with <TT>TYPE</TT> <TT>radio</TT>. The
<TT>CHECKED</TT> attribute can be used to specify which button to initially highlight.
The following example shows how to highlight the button for selecting "male".</P>
<PRE><FONT COLOR="#0066FF"><INPUT TYPE=radio NAME='sex' VALUE='male' CHECKED>
<INPUT TYPE=radio NAME='sex' VALUE='female'>
</FONT></PRE>
<P>Because radio buttons are generally created in groups, <TT>CGI::Form</TT> provides
a single interface for creating a group of radio buttons. This method is called <TT>radio_group</TT>,
as shown here:</P>
<PRE><FONT COLOR="#0066FF">$q->radio_group( -name=>'sex', values=>[`male', `female'], -default=>'female',
-linebreak=>'true' );
</FONT></PRE>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -