ch04_02.htm

用perl编写CGI的好书。本书从解释CGI和底层HTTP协议如何工作开始

enter a line of data (see <a href="ch04_02.htm#ch04-59247">Figure 4-2</a>). Text fields
are the default input type; if you omit the TYPE attribute, you will
get a text field. The HTML for a text field looks like this:</p>


<blockquote><pre class="code">&lt;INPUT TYPE="text" NAME="quantity" VALUE="1" SIZE="3" MAXLENGTH="3"&gt;</pre></blockquote>


<a name="ch04-59247" /><div class="figure"><img width="443" src="figs/cgi2.0402.gif" height="205" alt="Figure 4-2" /></div><h4 class="objtitle">Figure 4-2. Text and password fields</h4>

<p>Here are the <a name="INDEX-799" /> <a name="INDEX-800" />attributes that apply to text fields:</p>


<dl>
<dt><b>VALUE</b></dt>
<dd><p>The <a name="INDEX-801" />VALUE of text fields is the default
text displayed in the text field when the form is initially presented
to the user. It defaults to an empty string. The user can edit the
value of text fields; updates change what is displayed as well as the
value passed when the form is submitted.</p></dd>


<dt><b>SIZE</b></dt>
<dd><p>The <a name="INDEX-802" />SIZE attribute specifies the width of
the text field displayed. It roughly corresponds to the number of
characters the field can hold, but this is generally only accurate if
the element is surrounded by &lt;TT&gt; or &lt;PRE&gt; tags, which
indicate that a monospace font should be used. Unfortunately,
Netscape and Internet Explorer render the width of fields very
differently when monospaced fonts are not used, so certainly test
your form with both browsers. The default SIZE for text fields is 20.</p></dd>


<dt><b>MAXLENGTH</b></dt>
<dd><p>The <a name="INDEX-803" />MAXLENGTH attribute specifies the
maximum number of characters that a text field can hold. Browsers
generally do not allow users to enter more characters than this.
Because the size of text fields can vary with variable-width fonts,
it is possible to set MAXLENGTH and SIZE to the same value and yet
have a field that appears too large or too small for that number of
characters. A text field can have a MAXLENGTH set to more characters
than its SIZE can display. By default, there is no specified limit on
the size of text fields.</p></dd>


<dt><b>onFocus, onBlur, onChange</b></dt>
<dd><p>The <a name="INDEX-804" />
<a name="INDEX-805" />
<a name="INDEX-806" />JavaScript handlers are onFocus,
onBlur, and onChange, which are called when the text field has focus
(the input cursor is in the field), loses focus (the cursor moves out
of the field), and when the value of the field changes, respectively.</p></dd>

</dl>
</div>



<a name="ch04-5-fm2xml" /><div class="sect3">
<h3 class="sect3">4.2.3.2. Password fields</h3>


<p>A <a name="INDEX-807" />
<a name="INDEX-808" />password field is similar to a text
field, except that instead of displaying the true value of the field,
the browser represents each character with an asterisk or bullet
(refer back to <a href="ch04_02.htm#ch04-59247">Figure 4-2</a>):</p>


<blockquote><pre class="code">&lt;INPUT TYPE="password" NAME="set_password" VALUE="old_password"
  SIZE="8" MAXLENGTH="8"&gt;</pre></blockquote>


<p>This field does not provide any true security; it simply provides
basic protection against someone looking over the shoulder of the
user. The value is <em class="emphasis">not</em> encrypted when it is
transferred to the web server, which means that passwords are
displayed as part of the <a name="INDEX-809" />
<a name="INDEX-810" />query string for GET requests.</p>


<p>All the <a name="INDEX-811" />
<a name="INDEX-812" />attributes that apply to text
fields also apply to password fields.</p>
</div>



<a name="ch04-6-fm2xml" /><div class="sect3">
<h3 class="sect3">4.2.3.3. Hidden fields</h3>


<p>
<a name="INDEX-813" />Hidden fields
are not visible to the user. They are generally used only with forms
which are themselves generated by a CGI script and are useful for
passing information between a series of forms:</p>


<blockquote><pre class="code">&lt;INPUT TYPE="hidden" NAME="username" VALUE="msmith"&gt;</pre></blockquote>


<p>Like password fields, hidden fields provide no security. Users can
view the name and value of hidden fields by viewing the HTML source
in their browsers.</p>


<p>We'll discuss hidden fields in much more detail in our
discussion of maintaining state in <a href="ch11_01.htm">Chapter 11, "Maintaining State"</a>.</p>


<p>Hidden fields only use <a name="INDEX-814" />
<a name="INDEX-815" />
<a name="INDEX-816" /> <a name="INDEX-817" />NAME and VALUE attributes.</p>
</div>



<a name="ch04-7-fm2xml" /><div class="sect3">
<h3 class="sect3">4.2.3.4. Checkboxes</h3>


<p>
<a name="INDEX-818" />Checkboxes are
useful when users simply need to indicate whether they desire an
option. See <a href="ch04_02.htm#ch04-88757">Figure 4-3</a>.</p>


<a name="ch04-88757" /><div class="figure"><img width="452" src="figs/cgi2.0403.gif" height="325" alt="Figure 4-3" /></div><h4 class="objtitle">Figure 4-3. Checkboxes</h4>

<p>The user can <a name="INDEX-819" />toggle between two states on a
checkbox: checked or unchecked. The tag looks like this:</p>


<blockquote><pre class="code">&lt;INPUT TYPE="checkbox" NAME="toppings" VALUE="lettuce" CHECKED&gt;</pre></blockquote>


<p>In this example, if the user selects the checkbox, then
"toppings" returns a value of "lettuce". If
the checkbox is not selected, neither the <a name="INDEX-820" />
<a name="INDEX-821" />
<a name="INDEX-822" />name
nor the value is returned for the checkbox.</p>


<p>It is possible to have multiple checkboxes use the same name. In
fact, this is not uncommon. The most typical situation in which you
might do this is if you have a dynamic list of related options and
the user could choose a similar action for all of them. For example,
you may wish to list multiple options this way:</p>


<blockquote><pre class="code">&lt;INPUT TYPE="checkbox" NAME="lettuce"&gt; Lettuce&lt;BR&gt;
&lt;INPUT TYPE="checkbox" NAME="tomato"&gt; Tomato&lt;BR&gt;
&lt;INPUT TYPE="checkbox" NAME="onion"&gt; Onion&lt;BR&gt;</pre></blockquote>


<p>If, however, the CGI script does not need to know the name of each of
the options in order to perform its task, you may wish to do this
instead:</p>


<blockquote><pre class="code">&lt;INPUT TYPE="checkbox" NAME="toppings" VALUE="lettuce"&gt; Lettuce&lt;BR&gt;
&lt;INPUT TYPE="checkbox" NAME="toppings" VALUE="tomato"&gt; Tomato&lt;BR&gt;
&lt;INPUT TYPE="checkbox" NAME="toppings" VALUE="onion"&gt; Onion&lt;BR&gt;</pre></blockquote>


<p>If someone selects "lettuce" and "tomato" but
not "onion", then the browser will encode this as
<tt class="literal">toppings=lettuce&amp;toppings=tomato</tt>. The CGI
script can process these multiple toppings, and you may not need to
update the CGI script if you later add items to the list. Attributes
for checkboxes include:</p>


<dl>
<dt><b>VALUE</b></dt>
<dd><p>The VALUE attribute is the value included in the request if the
checkbox is checked. If a VALUE attribute is not specified, the
checkbox will return "ON" as its value. If the checkbox
is not checked, then neither its name nor value will be sent.</p></dd>


<dt><b>CHECKED</b></dt>
<dd><p>The <a name="INDEX-823" />CHECKED attribute indicates that the
checkbox should be selected by default. Omitting this attribute
causes the checkbox to be unselected by default.</p></dd>


<dt><b>onCheck</b></dt>
<dd><p>Checkboxes also take the <a name="INDEX-824" /> <a name="INDEX-825" />onCheck attribute, which
indicates the JavaScript code that should be executed when the
checkbox is selected.</p></dd>

</dl>
</div>



<a name="ch04-8-fm2xml" /><div class="sect3">
<h3 class="sect3">4.2.3.5. Radio buttons</h3>


<p>
<a name="INDEX-826" />
<a name="INDEX-827" />Radio buttons are very similar to
checkboxes except that any group of radio buttons that share the same
name are exclusive: only one of them may be selected. See <a href="ch04_02.htm#ch04-92305">Figure 4-4</a>.</p>


<a name="ch04-92305" /><div class="figure"><img width="449" src="figs/cgi2.0404.gif" height="342" alt="Figure 4-4" /></div><h4 class="objtitle">Figure 4-4. Radio buttons</h4>

<p>The tag is used just like a checkbox:</p>


<blockquote><pre class="code">&lt;INPUT TYPE="radio" NAME="bread" VALUE="wheat" CHECKED&gt; Wheat&lt;BR&gt;
&lt;INPUT TYPE="radio" NAME="bread" VALUE="white"&gt; White&lt;BR&gt;
&lt;INPUT TYPE="radio" NAME="bread" VALUE="rye"&gt; Rye&lt;BR&gt;</pre></blockquote>


<p>In this example, "wheat" is selected by default.
Selecting "white" or "rye" will cause
"wheat" to be unselected.</p>


<p>Although you may omit the <a name="INDEX-828" />VALUE attribute with checkboxes, doing
so with radio buttons is meaningless since the CGI script will not be
able to differentiate between different radio buttons if they all
return "ON".</p>


<p>Using the <a name="INDEX-829" />
<a name="INDEX-830" />CHECKED attribute with multiple radio
buttons with the same name is not valid. Browsers will generally
render both as selected, but they will be unselected as soon as the
user selects a different option and the user will be unable to return
the form to this initial state (unless it has a reset button of
course).</p>


<p>Radio buttons use the same attributes as checkboxes.</p>
</div>



<a name="ch04-9-fm2xml" /><div class="sect3">
<h3 class="sect3">4.2.3.6. Submit buttons</h3>


<p>A <a name="INDEX-831" />
<a name="INDEX-832" /> <a name="INDEX-833" />
<a name="INDEX-834" />submit button does just what the name
implies. It submits the contents of the form (see <a href="ch04_02.htm#ch04-39427">Figure 4-5</a>). When the user clicks on a submit button, the
browser runs any associated JavaScript <em class="emphasis">onSubmit</em>
handler, formats an HTTP request according to the form method and
form encoding type, then sends this request to the URL specified by
the form action. The result is then displayed as a new web page.</p>


<a name="ch04-39427" /><div class="figure"><img width="448" src="figs/cgi2.0405.gif" height="196" alt="Figure 4-5" /></div><h4 class="objtitle">Figure 4-5. Submit buttons</h4>

<p>The HTML for a submit button looks like this:</p>


<blockquote><pre class="code">&lt;INPUT TYPE="submit" NAME="submit_button" VALUE="Submit the Form"&gt;</pre></blockquote>


<p>Virtually all forms have a submit button, and you can have multiple
submit buttons on one form:</p>


<blockquote><pre class="code">&lt;INPUT TYPE="submit" NAME="option" VALUE="Option 1"&gt;
&lt;INPUT TYPE="submit" NAME="option" VALUE="Option 2"&gt;</pre></blockquote>


<p>Only the name and value of the submit button clicked is included in
the form submission. Here are the attributes it supports:</p>


<dl>
<dt><b>VALUE</b></dt>
<dd><p>The <a name="INDEX-835" />VALUE attribute for submit buttons
specifies the text that should be displayed on the button as well as
the value supplied for this element when the form is submitted. If
the value is omitted, browsers supply a default label -- generally
"Submit" -- and refrain from submitting a name and
value for this element.</p></dd>


<dt><b>onClick</b></dt>
<dd><p>Submit buttons may have an <a name="INDEX-836" />
<a name="INDEX-837" />onClick JavaScript handler, which
specifies the code to execute if the user clicks the button.
Returning a false value from this code cancels the submit operation.</p></dd>

</dl>
</div>



<a name="ch04-10-fm2xml" /><div class="sect3">
<h3 class="sect3">4.2.3.7. Reset buttons</h3>


<p>A <a name="INDEX-838" />
<a name="INDEX-839" />
<a name="INDEX-840" />reset button allows users to reset the
value of all the fields in a form to their default values. From the
user's perspective, it generally accomplishes the same thing as
reloading the form but is much faster and more convenient. Because
the browser accomplishes this event without consulting the web
server, CGI scripts never respond to it. The HTML tag looks like
this:</p>


<blockquote><pre class="code">&lt;INPUT TYPE="reset" VALUE="Reset the form fields"&gt;</pre></blockquote>


<p>You may have multiple
<a name="INDEX-841" /> <a name="INDEX-842" />
<a name="INDEX-843" /> <a name="INDEX-844" />
<a name="INDEX-845" />reset buttons on the same form,
although this would almost certainly be redundant.</p>


<dl>
<dt><b>NAME</b></dt>
<dd><p>You may specify a NAME for reset buttons, but neither the name nor
the value is ever passed to a CGI script. Thus, the name is only
useful to JavaScript code.</p></dd>


<dt><b>VALUE</b></dt>