?? ch04_02.htm
字號:
<?label 4.2. Form Tags?><html><head><title>Form Tags (CGI Programming with Perl)</title><link href="../style/style1.css" type="text/css" rel="stylesheet" /><meta name="DC.Creator" content="Scott Guelich, Gunther Birznieks and Shishir Gundavaram" /><meta scheme="MIME" content="text/xml" name="DC.Format" /><meta content="en-US" name="DC.Language" /><meta content="O'Reilly & Associates, Inc." name="DC.Publisher" /><meta scheme="ISBN" name="DC.Source" content="1565924193L" /><meta name="DC.Subject.Keyword" content="stuff" /><meta name="DC.Title" content="CGI Programming with Perl" /><meta content="Text.Monograph" name="DC.Type" /></head><body bgcolor="#ffffff"><img src="gifs/smbanner.gif" alt="Book Home" usemap="#banner-map" border="0" /><map name="banner-map"><area alt="CGI Programming with Perl" href="index.htm" coords="0,0,466,65" shape="rect" /><area alt="Search this book" href="jobjects/fsearch.htm" coords="467,0,514,18" shape="rect" /></map><div class="navbar"><table border="0" width="515"><tr><td width="172" valign="top" align="left"><a href="ch04_01.htm"><img src="../gifs/txtpreva.gif" alt="Previous" border="0" /></a></td><td width="171" valign="top" align="center"><a href="index.htm">CGI Programming with Perl</a></td><td width="172" valign="top" align="right"><a href="ch04_03.htm"><img src="../gifs/txtnexta.gif" alt="Next" border="0" /></a></td></tr></table></div><hr align="left" width="515" /><h2 class="sect1">4.2. Form Tags</h2><p>A <a name="INDEX-769" /><a name="INDEX-770" /> <a name="INDEX-771" /><a name="INDEX-772" />full discussionof HTML and user interface design is clearly beyond the scope of thisbook. Many other books are available which discuss these topics atlength, such as <em class="citetitle">HTML: The Definitive Guide</em>, by ChuckMusciano and Bill Kennedy (O'Reilly & Associates,Inc.). However, many of these other resources do notdiscuss the relationship between HTML form elements and thecorresponding data sent to the web server when a form is submitted.So let's run through a quick review of HTML form elementsbefore we see how CGI scripts process them.</p><a name="ch04-1-fm2xml" /><div class="sect2"><h3 class="sect2">4.2.1. Quick Reference to Form Tags</h3><p>Before<a name="INDEX-773" /><a name="INDEX-774" />weget going, <a href="ch04_02.htm#ch04-10942">Table 4-1</a> shows a short list of all theavailable form tags.</p><a name="ch04-10942" /><h4 class="objtitle">Table 4-1. HTML Form Tags </h4><table border="1"><tr><th><p>Form Tag</p></th><th><p>Description</p></th></tr><tr><td><p><FORM ACTION="/cgi/register.cgi" METHOD="POST"></p></td><td><p>Start the form</p></td></tr><tr><td><p> <INPUT TYPE="text" NAME="name"</p><p> VALUE="value" SIZE="size"></p></td><td><p>Text field</p></td></tr><tr><td><p> <INPUT TYPE="password" NAME="name"</p><p> VALUE="value" SIZE="size"></p></td><td><p>Password field</p></td></tr><tr><td><p> <INPUT TYPE="hidden" NAME="name"</p><p> VALUE="value" ></p></td><td><p>Hidden field</p></td></tr><tr><td><p> <INPUT TYPE="checkbox" NAME="name"</p><p> VALUE="value" ></p></td><td><p>Checkbox</p></td></tr><tr><td><p> <INPUT TYPE="radio" NAME="name"</p><p> VALUE="value" ></p></td><td><p>Radio button</p></td></tr><tr><td><p> <SELECT NAME="name" SIZE=1></p><p> <OPTION SELECTED>One</OPTION></p><p> <OPTION>Two</OPTION></p><p> :</p><p> </SELECT></p></td><td><p>Menu (drop-down)</p></td></tr><tr><td><p> <SELECT NAME="name" SIZE=n MULTIPLE></p><p> <OPTION SELECTED>One</OPTION></p><p> <OPTION>Two</OPTION></p><p> :</p><p> </SELECT></p></td><td><p>Select box</p></td></tr><tr><td><p> <TEXTAREA ROWS=yy COLS=xx NAME="name"></p><p> :</p><p> </TEXTAREA></p></td><td><p>Multiline text field</p></td></tr><tr><td><p> <INPUT TYPE="submit" NAME="name"</p><p> VALUE="value" ></p></td><td><p>Submit button</p></td></tr><tr><td><p> <INPUT TYPE="image" SRC="/image.gif"</p><p> NAME="name" VALUE="value"></p></td><td><p>Image button</p></td></tr><tr><td><p> <INPUT TYPE="reset" VALUE="Message!"></p></td><td><p>Reset button</p></td></tr><tr><td><p></FORM></p></td><td><p>End the form</p></td></tr></table></div><a name="ch04-2-fm2xml" /><div class="sect2"><h3 class="sect2">4.2.2. The <FORM> Tag</h3><p>All forms begin with <a name="INDEX-775" /><a name="INDEX-776" />a <FORM> tag andend with a </FORM> tag:</p><blockquote><pre class="code"><FORM ACTION="/cgi/register.cgi" METHOD="POST"> . . .</FORM></pre></blockquote><p>Submitting a form generates an <a name="INDEX-777" /><a name="INDEX-778" />HTTP request just likeclicking on a hyperlink, but a request generated by a form is almostalways directed at a CGI script (or a similar dynamic resource). Youspecify the format of the HTTP request via attributes of the<FORM> tag:</p><dl><dt><b>METHOD</b></dt><dd><p><a name="INDEX-779" /> <a name="INDEX-780" /><a name="INDEX-781" />METHODspecifies the HTTP request method used when calling the CGI script.The options are GET and POST, and they correspond to the requestmethods we've already seen as part of the HTTP request line,although they are not case-sensitive here. If the method is notspecified, it defaults to GET.</p></dd><dt><b>ACTION</b></dt><dd><p><a name="INDEX-782" /> <a name="INDEX-783" /> <a name="INDEX-784" />ACTION specifies the URL of the CGIscript that should receive the HTTP request made by the CGI script.By default, it is the same URL from which the browser retrieved theform. You are not limited to using a CGI program on your server todecode form information; you can specify a URL of a remote host if aprogram that does what you want is available elsewhere.</p></dd><dt><b>ENCTYPE</b></dt><dd><p><a name="INDEX-785" /><a name="INDEX-786" /><a name="INDEX-787" /><a name="INDEX-788" />ENCTYPE specifies the media typeused to encode the content of the HTTP request. Because GET requestsdo not have a body, this attribute is only meaningful if the form hasPOST as its method. This attribute is rarely included since thedefault -- <em class="emphasis">application/x-www-form-urlencoded</em> -- isappropriate in almost all cases. The only real reason to specifyanother media type is when creating a form that accepts file uploads.File uploads must use <em class="emphasis">multipart/form-data</em>instead. We will discuss this second option later.</p></dd><dt><b>onSubmit</b></dt><dd><p><a name="INDEX-789" /> <a name="INDEX-790" />onSubmit is a JavaScript handler,and it specifies the JavaScript code that should be executed when theform is submitted. If the code returns a false value, it will cancelthe submission of the form. Throughout this chapter we will reviewwhich JavaScript handler is associated with each HTML form element,but we won't cover JavaScript in detail until <a href="ch07_01.htm">Chapter 7, "JavaScript"</a>.</p></dd></dl><p>A document can consist of multiple forms, but one form cannot benested inside another form.</p></div><a name="ch04-3-fm2xml" /><div class="sect2"><h3 class="sect2">4.2.3. The <INPUT> Tag</h3><p>The <a name="INDEX-791" /> <a name="INDEX-792" /><a name="INDEX-793" /><INPUT>tag generates a wide array of form widgets. They are differentiatedby the <a name="INDEX-794" /><a name="INDEX-795" />TYPEattribute. Each <INPUT> tag has the same general format:</p><blockquote><pre class="code"><INPUT TYPE="text" NAME="element_name" VALUE="Default value"></pre></blockquote><p>Like <BR>, this tag has no closing tag. The basic attributesthat all input types share are as follows:</p><dl><dt><b>TYPE</b></dt><dd><p>TYPE determines the type of the input widget to display. Apresentation of each type follows this section.</p></dd><dt><b>NAME</b></dt><dd><p>The <a name="INDEX-796" />NAMEattribute is important because the CGI script uses this name toaccess the value of those elements that are submitted.</p></dd><dt><b>VALUE</b></dt><dd><p>The meaning of <a name="INDEX-797" />VALUE varies depending on the type ofthe input element. We will discuss this property in our discussion ofeach type.</p></dd></dl><p>Let's look at each of the input types.</p><a name="ch04-4-fm2xml" /><div class="sect3"><h3 class="sect3">4.2.3.1. Text fields</h3><p>One of the most basic uses of the <INPUT> tag is to generate a<a name="INDEX-798" />text fields where users may?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -