📄 ch8.htm
字号:
<HTML>
<HEAD>
<TITLE>Chapter 8 -- Forms and How Handle Them</TITLE>
<META>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000EE" VLINK="#551A8B" ALINK="#CE2910">
<H1><FONT COLOR=#FF0000>Chapter 8</FONT></H1>
<H1><B><FONT SIZE=5 COLOR=#FF0000>Forms and How Handle Them</FONT></B>
</H1>
<P>
<HR WIDTH="100%"></P>
<P>
<H3 ALIGN=CENTER><FONT COLOR="#000000"><FONT SIZE=+2>CONTENTS<A NAME="CONTENTS"></A>
</FONT></FONT></H3>
<UL>
<LI><A HREF="#WhatIsanHTMLForm" >What Is an HTML Form?</A>
<UL>
<LI><A HREF="#WhatCanFormsDo" >What Can Forms Do?</A>
<LI><A HREF="#WhatCantFormsDo" >What Can't Forms Do?</A>
</UL>
<LI><A HREF="#CreatingHTMLForms" >Creating HTML Forms</A>
<UL>
<LI><A HREF="#ASampleHTMLForm" >A Sample HTML Form</A>
<LI><A HREF="#HTMLFormTags" >HTML Form Tags</A>
<LI><A HREF="#INPUTTYPETEXT" >INPUT TYPE=TEXT</A>
<LI><A HREF="#INPUTTYPESUBMIT" >INPUT TYPE=SUBMIT</A>
<LI><A HREF="#INPUTTYPERESET" >INPUT TYPE=RESET</A>
<LI><A HREF="#INPUTTYPERADIO" >INPUT TYPE=RADIO</A>
<LI><A HREF="#INPUTTYPEchECKBOX" >INPUT TYPE=chECKBOX</A>
<LI><A HREF="#INPUTTYPEIMAGE" >INPUT TYPE=IMAGE</A>
<LI><A HREF="#INPUTTYPEHIDDEN" >INPUT TYPE=HIDDEN</A>
<LI><A HREF="#TEXTAREA" >TEXTAREA</A>
<LI><A HREF="#SELECT" >SELECT</A>
<LI><A HREF="#FutureFORMHTMLTagsProposedintheD" >Future FORM HTML Tags Proposed in the "Draft HTML 3.0 Spec"</A>
<LI><A HREF="#FormStyle" >Form Style</A>
<LI><A HREF="#ASampleForm" >A Sample Form</A>
</UL>
<LI><A HREF="#HandlingFormSubmissions" >Handling Form Submissions</A>
<UL>
<LI><A HREF="#REQUEST_TYPEsGETversusPOST" >REQUEST_TYPEs GET versus POST</A>
<LI><A HREF="#FormDataDecoding" >Form Data Decoding</A>
<LI><A HREF="#ChoosingtheProgrammingLanguage" >Choosing the Programming Language</A>
<LI><A HREF="#ASampleCGIFormHandlerProgram" >A Sample CGI Form Handler Program</A>
<LI><A HREF="#FormsBasedIntranetInternetClientSer" >Forms-Based Intranet/Internet Client/Server Applications</A>
</UL>
<LI><A HREF="#FormsReadyReference" >Forms Ready Reference</A>
<UL>
<LI><A HREF="#BriefOutlineofGETandPOSTMechanisms" >Brief Outline of GET and POST Mechanisms</A>
<LI><A HREF="#BriefOutlineofFormEncoding" >Brief Outline of Form Encoding</A>
</UL>
<LI><A HREF="#Summary" >Summary</A>
</UL>
<HR>
<P>
Even if you have never created a World Wide Web form, as a Web
user you are probably already familiar with forms. The most popular
Web search indexes provide forms to allow the user to customize
a search query. Many Web sites request registration information
with them. They have even been used to implement multiuser chat
lines. Web forms, or <I>HTML forms</I>, are the simplest way to
transform a Web page from an on-line brochure into an interactive
tool.
<H2><A NAME="WhatIsanHTMLForm"><FONT SIZE=5 COLOR=#FF0000>What
Is an HTML Form?</FONT></A></H2>
<P>
An <I>HTML form</I> is a section of a Web document into which
the user can enter information. This information is passed back
to a Web server where it might be recorded in a database for future
use or perhaps used to control what information is returned to
the user.
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Note</B></TD></TR>
<TR><TD>
<BLOCKQUOTE>
An HTML form is a Web page into which a Web user can enter information.</BLOCKQUOTE>
</TD></TR>
</TABLE></CENTER>
<H3><A NAME="WhatCanFormsDo">What Can Forms Do?</A></H3>
<P>
HTML forms can do the following:
<UL>
<LI><FONT COLOR=#000000>Prompt the user to type in some text or
choose from a number of options</FONT>
<LI><FONT COLOR=#000000>Collect several different items of information
at once</FONT>
<LI><FONT COLOR=#000000>Restrict user responses to a set of known
values</FONT>
<LI><FONT COLOR=#000000>Structure user-supplied information for
automatic processing</FONT>
<LI><FONT COLOR=#000000>Implement graphical user interfaces (GUIs)
for network applications or for navigating Web sites</FONT>
</UL>
<H3><A NAME="WhatCantFormsDo">What Can't Forms Do?</A></H3>
<P>
HTML forms cannot provide a fully interactive user interface;
they can only construct a query or submission to be fetched like
any other Web page. There is no way of controlling what is typed
into text fields. Forms only prompt the user for information.
To handle the information the user enters into the form usually
requires the provider to write a CGI-based program designed specifically
to process submissions from that form.
<H2><A NAME="CreatingHTMLForms"><FONT SIZE=5 COLOR=#FF0000>Creating
HTML Forms</FONT></A></H2>
<P>
Creating Web forms is no more difficult than authoring other Web
documents. Web forms are constructed from HTML mark-up commands
or <I>tags.</I> If you use an HTML authoring tool, check in its
documentation to find out how to use it to add HTML form tags,
or simply edit in the tags described in this chapter, in the section
"HTML Form Tags"using a simple text editor.
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Note</B></TD></TR>
<TR><TD>
<BLOCKQUOTE>
A tag is an HTML mark-up command in angle brackets, <TT><FONT FACE="Courier"><THUS></FONT></TT>.
</BLOCKQUOTE>
</TD></TR>
</TABLE></CENTER>
<P>
<H3><A NAME="ASampleHTMLForm">A Sample HTML Form</A></H3>
<P>
In the HTML source, a form must start with a <TT><FONT FACE="Courier"><FORM></FONT></TT>
tag and end with a <TT><FONT FACE="Courier"></FORM></FONT></TT>
tag. When you have written a <I>form handler</I> (often a CGI
program) to which the data in the form will be sent, you will
be able to add an <TT><FONT FACE="Courier">ACTION="<I>url</I>"</FONT></TT>
attribute to specify the location of the handler and a <TT><FONT FACE="Courier">METHOD=<I>reqtype</I></FONT></TT>
attribute for the submission method to be used. Don't worry about
these just yet; their precise meaning will be discussed later
in this chapter, in the section "Handling Form Submissions."
Listing 8.1 is an example of a simple form.
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Note</B></TD></TR>
<TR><TD>
<BLOCKQUOTE>
HTML tags often have attributes; <TT><FONT FACE="Courier"><DIV ALIGN=CENTER></FONT></TT> is an HTML <TT><FONT FACE="Courier">DIV</FONT></TT> tag with an <TT><FONT FACE="Courier">ALIGN</FONT></TT> attribute of <TT><FONT
FACE="Courier">CENTER</FONT></TT>.
</BLOCKQUOTE>
</TD></TR>
</TABLE></CENTER>
<P>
<HR>
<BLOCKQUOTE>
<B>Listing 8.1. A simple Web form.<BR>
</B>
</BLOCKQUOTE>
<BLOCKQUOTE>
<TT><FONT FACE="Courier"><FORM ACTION="register.cgi"
METHOD=POST><BR>
<DL><BR>
<DT>Your full name:<BR>
<DD><INPUT TYPE=TEXT NAME="fullname" SIZE=60
MAXLENGTH=180><BR>
<DT>Your e-mail address: <EM> RFC822 (Internet) format
</EM><BR>
<DD><INPUT TYPE=TEXT NAME="email" SIZE=60 MAXLENGH=180>
<BR>
</DL><BR>
<P> <INPUT TYPE=SUBMIT VALUE="Register">
</P><BR>
</FORM></FONT></TT>
</BLOCKQUOTE>
<HR>
<P>
Don't be daunted by the number of tags in this example. Compare
the HTML listing with Figure 8.1, which shows how the form might
look under a particular browser. The <TT><FONT FACE="Courier"><FORM></FONT></TT>
and <TT><FONT FACE="Courier"></FORM></FONT></TT> tags group
the input fields together and define how and where they will be
submitted. The <TT><FONT FACE="Courier"><DL></FONT></TT>
and <TT><FONT FACE="Courier"></DL></FONT></TT> tags wrap
the input fields in an HTML <I>definition list</I> that is used
to mark up names or labels (beginning with <TT><FONT FACE="Courier"><DT></FONT></TT>
for <I>definition term</I>) and their meanings or contents (beginning
with <TT><FONT FACE="Courier"><DD></FONT></TT> for <I>definition
defined</I>). The <TT><FONT FACE="Courier"><P></FONT></TT>
and <TT><FONT FACE="Courier"></P></FONT></TT> tags ensure
that the <I>submit </I>button is treated like a separate paragraph.
<P>
<A HREF="f8-1.gif" ><B>Figure 8.1: </B><I>A simple Web form</I>.</A>
<P>
Most of the usual HTML mark-up tags, such as <TT><FONT FACE="Courier"><P></FONT></TT>,
<TT><FONT FACE="Courier"><PRE></FONT></TT>, <TT><FONT FACE="Courier"><BR></FONT></TT>,
and <TT><FONT FACE="Courier"><DL></FONT></TT>, are permitted
between the <TT><FONT FACE="Courier"><FORM></FONT></TT>
and <TT><FONT FACE="Courier"></FORM></FONT></TT> tags, and
can be used to control the layout of the form to some extent.
Although the <TT><FONT FACE="Courier">INPUT</FONT></TT> tags have
<TT><FONT FACE="Courier">NAME</FONT></TT> attributes, these are
internal labels not normally seen by the user, so a label for
each <TT><FONT FACE="Courier">FORM</FONT></TT> tag should be included
in the Web page. In the previous example, the input field with
<TT><FONT FACE="Courier">NAME</FONT></TT> attribute <TT><FONT FACE="Courier">"fullname"</FONT></TT>
also has some text associated with it in HTML <I>definition list
</I>tags.
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Tip</B></TD></TR>
<TR><TD>
<BLOCKQUOTE>
Use <TT><FONT FACE="Courier"><DT></FONT></TT> and <TT><FONT FACE="Courier"><DD></FONT></TT> tags within <TT><FONT FACE="Courier"><DL></FONT></TT> and <TT><FONT FACE="Courier"></DL></FONT></TT> tags to clearly associate textual
labels with form tags. Use <TT><FONT FACE="Courier"><P></FONT></TT> and <TT><FONT FACE="Courier"></P></FONT></TT> to group form tags, or <TT><FONT FACE="Courier"><BR></FONT></TT> to separate them.
</BLOCKQUOTE>
</TD></TR>
</TABLE></CENTER>
<P>
<H3><A NAME="HTMLFormTags">HTML Form Tags</A></H3>
<P>
Within the <TT><FONT FACE="Courier"><FORM></FONT></TT> and
<TT><FONT FACE="Courier"></FORM></FONT></TT> tags, the following
HTML form tags or <I>form components</I> are also available:
<H4><TT><FONT FACE="Courier">INPUT TYPE=TEXT</FONT></TT></H4>
<BLOCKQUOTE>
<TT><FONT FACE="Courier"><INPUT [TYPE=TEXT] NAME="<I>text-id</I>"
[SIZE=<I>nn</I>] [MAXLENGTH=<I>nn</I>] [VALUE="<I>default
text</I>"]></FONT></TT>
</BLOCKQUOTE>
<H4><TT><FONT FACE="Courier">INPUT TYPE=SUBMIT</FONT></TT></H4>
<BLOCKQUOTE>
<TT><FONT FACE="Courier"><INPUT TYPE=SUBMIT [NAME="<I>button-id</I>"]
[VALUE="<I>Button label text</I>"]></FONT></TT>
</BLOCKQUOTE>
<H4><TT><FONT FACE="Courier">INPUT TYPE=RESET</FONT></TT></H4>
<BLOCKQUOTE>
<TT><FONT FACE="Courier"><INPUT TYPE=RESET [VALUE="<I>Button
label text</I>"]></FONT></TT>
</BLOCKQUOTE>
<H4><TT><FONT FACE="Courier">INPUT TYPE=RADIO</FONT></TT></H4>
<BLOCKQUOTE>
<TT><FONT FACE="Courier"><INPUT TYPE=RADIO NAME="<I>radio-set-id</I>"
VALUE="<I>choice-id</I>" [chECKED]></FONT></TT>
</BLOCKQUOTE>
<H4><TT><FONT FACE="Courier">INPUT TYPE=chECKBOX</FONT></TT></H4>
<BLOCKQUOTE>
<TT><FONT FACE="Courier"><INPUT TYPE=chECKBOX NAME="<I>box-set-id</I>"
VALUE="<I>choice-id</I>" [chECKED]></FONT></TT>
</BLOCKQUOTE>
<H4><TT><FONT FACE="Courier">INPUT TYPE=IMAGE</FONT></TT></H4>
<BLOCKQUOTE>
<TT><FONT FACE="Courier"><INPUT TYPE=IMAGE NAME="<I>image-id</I>"
SRC="<I>image-url</I>" [ALIGN=<I>alignment</I>]></FONT></TT>
</BLOCKQUOTE>
<H4><TT><FONT FACE="Courier">INPUT TYPE=HIDDEN </FONT></TT></H4>
<BLOCKQUOTE>
<TT><FONT FACE="Courier"><INPUT TYPE=HIDDEN NAME="<I>data-id</I>"
VALUE="<I>hidden form data</I>" ></FONT></TT>
</BLOCKQUOTE>
<H4><TT><FONT FACE="Courier">TEXTAREA</FONT></TT></H4>
<BLOCKQUOTE>
<TT><FONT FACE="Courier"><TEXTAREA NAME="<I>text-id</I>"
[COLS=<I>nn</I>] [ROWS=<I>nn</I>]>default text</TEXTAREA></FONT></TT>
</BLOCKQUOTE>
<H4><TT><FONT FACE="Courier">SELECT</FONT></TT></H4>
<P>
<TT><FONT FACE="Courier"><SELECT NAME="<I>select-id</I>"
[SIZE=<I>nn</I>] [MULTIPLE]><BR>
<OPTION [VALUE="<I>choice-id</I>"] [SELECTED]>1st
choice<BR>
<OPTION>2nd choice<BR>
<OPTION>...<BR>
</SELECT>
<P>
<CENTER></FONT></TT><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Note</B></TD></TR>
<TR><TD>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -