📄 ch8.htm
字号:
is, the horizontal coordinate is sent as contents of the <TT><FONT FACE="Courier">NAME</FONT></TT>
attribute with ".x" added to the end, and the vertical
coordinate is sent as the <TT><FONT FACE="Courier">NAME</FONT></TT>
attribute with ".y" added.
<P>
Listing 8.4 illustrates the use of <TT><FONT FACE="Courier">INPUT
TYPE=IMAGE</FONT></TT> as a custom submit button, but many sites
use the pixel coordinate feature to present graphical menus or
tables of buttons or icons or navigation maps. The behavior is
similar to that of the imagemap tag <TT><FONT FACE="Courier"><IMG
ISMAP></FONT></TT>
<H3><A NAME="INPUTTYPEHIDDEN"><TT><FONT SIZE=4 FACE="Courier">INPUT
TYPE=HIDDEN</FONT></TT></A></H3>
<BLOCKQUOTE>
<TT><FONT FACE="Courier"><INPUT TYPE=HIDDEN NAME="<I>data-id</I>"
VALUE="<I>hidden form data</I>" ></FONT></TT>
</BLOCKQUOTE>
<P>
The <TT><FONT FACE="Courier">INPUT TYPE=HIDDEN</FONT></TT> form
tag is unusual in the respect that it does not appear in the displayed
form. It is a convenience tool for the form designer. It can be
used to hold contextual information, such as the name of the form
(useful when the same form handler is used for several different
forms) or data the user entered into a previous form (if the form
has been generated "on-the-fly" in response to the user
input). Its <TT><FONT FACE="Courier">VALUE</FONT></TT> attribute
is passed as the form data for the <TT><FONT FACE="Courier">NAME</FONT></TT>
attribute, but the user cannot see any representation of this
form component on the screen and is not prompted to change the
form component contents.
<P>
In Listing 8.3, an <TT><FONT FACE="Courier">INPUT TYPE=HIDDEN</FONT></TT>
tag is used to identify the form to the form handler, perhaps
because the form handler is used in the <TT><FONT FACE="Courier">ACTION</FONT></TT>
attribute of more than one <TT><FONT FACE="Courier">FORM</FONT></TT>.
Some examples of the use of the <TT><FONT FACE="Courier">INPUT
TYPE=HIDDEN</FONT></TT> tag are illustrated in Listings 8.5 and
8.8.
<H3><A NAME="TEXTAREA"><TT><FONT SIZE=4 FACE="Courier">TEXTAREA</FONT></TT></A>
</H3>
<BLOCKQUOTE>
<TT><FONT FACE="Courier"><TEXTAREA NAME="<I>text-id</I>"
[COLS=<I>nn</I>] [ROWS=<I>nn</I>]>default text</TEXTAREA>
<BR>
</FONT></TT>
</BLOCKQUOTE>
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Note</B></TD></TR>
<TR><TD>
<BLOCKQUOTE>
An HTML container is a pair of tags, opened <TT><FONT FACE="Courier"><THUS></FONT></TT> and closed <TT><FONT FACE="Courier"></THUS></FONT></TT>, whose meaning applies to the text between the tags.
</BLOCKQUOTE>
</TD></TR>
</TABLE></CENTER>
<P>
<P>
The <TT><FONT FACE="Courier">TEXTAREA</FONT></TT> tag is not a
variant on the <TT><FONT FACE="Courier">INPUT</FONT></TT> tag;
it is an entirely separate HTML tag. It is similar to the <TT><FONT FACE="Courier">INPUT
TYPE=TEXT</FONT></TT> form tag. The <TT><FONT FACE="Courier">TEXTAREA</FONT></TT>
tag presents a multiline text window, with the size specified
by the <TT><FONT FACE="Courier">COLS</FONT></TT> and <TT><FONT FACE="Courier">ROWS</FONT></TT>
attributes. It is an HTML <I>container</I>, like the <TT><FONT FACE="Courier">A
HREF="<I>url</I>"</FONT></TT> tag or the <TT><FONT FACE="Courier">STRONG</FONT></TT>
tag, so a closing <TT><FONT FACE="Courier"></TEXTAREA></FONT></TT>
tag should always be included after the contained text. The text
contained within the <TT><FONT FACE="Courier"><TEXTAREA></FONT></TT>
and <TT><FONT FACE="Courier"></TEXTAREA></FONT></TT> tags
appears in the text input window as the default contents. Compare
Listing 8.3 with Figure 8.3, which shows the <TT><FONT FACE="Courier">TEXTAREA</FONT></TT>
default contents have not been changed by the user.
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Caution</B></TD></TR>
<TR><TD>
<BLOCKQUOTE>
Notice that in most browsers, there is no limit imposed on the amount of text that can be entered into a <TT><FONT FACE="Courier">TEXTAREA</FONT></TT>. Be prepared to handle a large amount of input to the form handler.
</BLOCKQUOTE>
</TD></TR>
</TABLE></CENTER>
<P>
<H3><A NAME="SELECT"><TT><FONT SIZE=4 FACE="Courier">SELECT</FONT></TT></A>
</H3>
<P>
<TT><FONT FACE="Courier"><SELECT NAME="<I>text-id</I>"
[SIZE=<I>nn</I>] [MULTIPLE]><BR>
<OPTION [VALUE="<I>choice-id-1</I>"] [SELECTED]>1st
choice<BR>
<OPTION [VALUE="<I>choice-id-2</I>"] [SELECTED]>2nd
choice<BR>
<OPTION [VALUE="<I>choice-id-etc</I>"] [SELECTED]>...
<BR>
</SELECT></FONT></TT>
<P>
The <TT><FONT FACE="Courier">SELECT</FONT></TT> tag is an alternative
to radio buttons or checkboxes that presents a list of choices
in a scrolling window. When given the <TT><FONT FACE="Courier">MULTIPLE</FONT></TT>
attribute, it is comparable to checkboxes in the respect that
any number of choices can be selected. Without the <TT><FONT FACE="Courier">MULTIPLE</FONT></TT>
attribute, it behaves like radio buttons, and only one choice
can be selected at a time. The <TT><FONT FACE="Courier">SIZE</FONT></TT>
attribute can be used to specify the number of choices the form
designer would like to be visible and, in effect, controls the
size of the scrolling window. The <TT><FONT FACE="Courier">VALUE</FONT></TT>
attribute of each <TT><FONT FACE="Courier">OPTION</FONT></TT>
selected is passed with the form data to the form handler. If
the <TT><FONT FACE="Courier">VALUE</FONT></TT> attribute is omitted,
the contents of the option are used instead. As with checkboxes,
if more than one option is selected, the <TT><FONT FACE="Courier">VALUE</FONT></TT>
attributes are joined together in a comma-separated list. Listing
8.4 gives an example of the use of <TT><FONT FACE="Courier">SELECT</FONT></TT>
tags, and a possible browser representation of the example is
shown in Figure 8.4.
<P>
<A HREF="f8-4.gif" ><B>Figure 8.4:</B> <I>Selection boxes and clickable images.</I></A>.
<HR>
<BLOCKQUOTE>
<B>Listing 8.4. Selection boxes and clickable images.<BR>
</B>
</BLOCKQUOTE>
<BLOCKQUOTE>
<TT><FONT FACE="Courier"><FORM ACTION="select.cgi"
METHOD=GET><BR>
<H2><BR>
Choose which software to download:<BR>
</H2><BR>
<P><BR>
<SELECT NAME="package" SIZE=3><BR>
<OPTION VALUE="text" SELECTED>Text viewer<BR>
<OPTION VALUE="image">Image viewer<BR>
<OPTION VALUE="movie">Movie player<BR>
<OPTION VALUE="audio">Sound player<BR>
<OPTION VALUE="editor">Media editor<BR>
</SELECT><BR>
<SELECT NAME="platform"><BR>
<OPTION>IBM pc compatible<BR>
<OPTION>Macintosh (68000)<BR>
<OPTION>Macintosh (Power pc)<BR>
</SELECT><BR>
<SELECT NAME="options" MULTIPLE><BR>
<OPTION>License<BR>
<OPTION>Media<BR>
<OPTION>Documentation<BR>
</SELECT><BR>
</P><BR>
<P><BR>
<INPUT TYPE="IMAGE" NAME="coords" SRC="download.gif">
<BR>
</P><BR>
</FORM></FONT></TT>
</BLOCKQUOTE>
<HR>
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Caution</B></TD></TR>
<TR><TD>
<BLOCKQUOTE>
Certain browsers implement a <TT><FONT FACE="Courier">SELECT</FONT></TT> form component with no <TT><FONT FACE="Courier">MULTIPLE</FONT></TT> attribute or no <TT><FONT FACE="Courier">SIZE</FONT></TT> attribute as a drop-down menu. However, drop-down menus
can cause problems. On some platforms, a long drop-down menu can exceed the size of the screen, which renders some of the choices unusable. If you wish to constrain the user to one of more than, say, 12 choices, use radio buttons, or at least specify a
<TT><FONT FACE="Courier">SIZE</FONT></TT> attribute.
</BLOCKQUOTE>
</TD></TR>
</TABLE></CENTER>
<P>
<H3><A NAME="FutureFORMHTMLTagsProposedintheD">Future <TT><FONT SIZE=4 FACE="Courier">FORM</FONT></TT><FONT SIZE=4>
HTML Tags Proposed in the "Draft HTML 3.0 Spec"</FONT></A>
</H3>
<P>
Before the announcement of HTML 3.2 (the new standard for Web
hypertext-also known as Wilbur), some ideas for a future version
of HTML were outlined in a consultation document informally referred
to as the "draft HTML 3.0 specification," including
the introduction of three new form tags. <TT><FONT FACE="Courier"><INPUT
TYPE="audio"></FONT></TT> would allow for the submission
of voice or sounds recorded by the form user. <TT><FONT FACE="Courier"><INPUT
TYPE="scribble"></FONT></TT> would allow the user
to submit a free-hand sketch with the form. <TT><FONT FACE="Courier"><INPUT
TYPE="file"></FONT></TT> would prompt for a filename
to be uploaded with the form data. To use these components in
a form would require the form designer to add an attribute to
the <TT><FONT FACE="Courier">FORM</FONT></TT> tag, probably <TT><FONT FACE="Courier">EncTYPE="multi-part/form-data"</FONT></TT>.
The <TT><FONT FACE="Courier">EncTYPE</FONT></TT> attribute is
not documented here, but the default encoding for form submissions
"application/x-www-form-urlencoded" is described in
the section "Decoding <TT><FONT FACE="Courier">+</FONT></TT>
and <TT><FONT FACE="Courier">%<I>hh</I></FONT></TT> (URL-Encoding)."
If you are interested in new developments in the HTML standard,
you can find out more from the W3 Consortium Web site at
<BLOCKQUOTE>
<TT><FONT FACE="Courier"><A HREF="http://www.w3.org/">http://www.w3.org/</A></FONT></TT>
</BLOCKQUOTE>
<H3><A NAME="FormStyle">Form Style</A></H3>
<P>
With a little care, you can design forms that are simple, clear,
and easy to use. While it can be tempting to use every different
<TT><FONT FACE="Courier">FORM</FONT></TT> tag and feature, the
user will be more impressed by a form that is easy to use than
one that is rich in features. The first priority must be to make
the form usable. This will encourage the user to take the time
to fill in the form and open a channel of communication between
the provider and the user.
<P>
Use the following list as a guide to form style:
<UL>
<LI><FONT COLOR=#000000>Give simple instructions</FONT>
<LI><FONT COLOR=#000000>Include a textual label with every form
component</FONT>
<LI><FONT COLOR=#000000>Supply defaults</FONT>
<LI><FONT COLOR=#000000>Use radio buttons/checkboxes/select lists
where appropriate to avoid user misunderstanding, to reduce user
typing, to make handling simpler, and to add visual impact</FONT>
</UL>
<P>
Instructions should be appropriate to the intended audience and
should not insult the user's intelligence. They are primarily
there to <I>invite </I>the user to take the trouble to fill in
the form. The instruction "Please select the product that
interests you" is likely to get a better response than "Click
in the right boxes and press the continue button."
<P>
A textual label is not part of a form tag but is included in the
HTML source of the form alongside the tag. Use HTML mark-up tags
to group the label with the form component. Don't rely on the
form looking the same in other browsers and on other screens as
it does on yours. Use tags such as <TT><FONT FACE="Courier"><P></FONT></TT>,
the paragraph tag
<BLOCKQUOTE>
<TT><FONT FACE="Courier"><P>Your full name: <INPUT NAME="fullname"></P></FONT></TT>
</BLOCKQUOTE>
<P>
to ensure that the label and the entry box appear together on
the screen but is distinct from other form components.
<P>
Wherever there is an appropriate default option, offer it as <I>default
text</I> in the <TT><FONT FACE="Courier">VALUE</FONT></TT> of
an <TT><FONT FACE="Courier">INPUT TYPE=TEXT</FONT></TT> tag, between
<TT><FONT FACE="Courier"><TEXTAREA></FONT></TT> and <TT><FONT FACE="Courier"></TEXTAREA></FONT></TT>
tags or as the <TT><FONT FACE="Courier">SELECTED</FONT></TT> or
<TT><FONT FACE="Courier">chECKED</FONT></TT> option in a list.
<P>
To make life easier for both the provider and the user, use checkboxes,
radio buttons, and <TT><FONT FACE="Courier">SELECT</FONT></TT>
lists whenever there are a limited number of possible options,
especially when you plan to process the form submission contents
automatically.
<P>
Avoid making your form functionally dependent on features that
are not available in the majority of Web browsers. Some newer
browsers support "mailto:" URLs as <TT><FONT FACE="Courier">FORM</FONT></TT>
<TT><FONT FACE="Courier">ACTION</FONT></TT>s, but many of the
current generation of Web browsers cope badly or fail completely
to send form submissions as mail messages. This may not be a problem
where the form is for internal use within an organization that
has standardized on a full-featured Web browser, but forms made
available to the world should ideally be handled by an HTTP server
using, for example, a CGI program.
<P>
In some cases, a Web form may not be the appropriate solution
to a problem. If the form consists solely of a set of radio buttons,
perhaps a list of <TT><FONT FACE="Courier"><A HREF="<I>url</I>"></FONT></TT>
hyperlinks would have been more appropriate. If the form is nothing
more than one <TT><FONT FACE="Courier">INPUT TYPE=IMAGE</FONT></TT>
component, would an <TT><FONT FACE="Courier"><IMG ISMAP></FONT></TT>
have been simpler? Even the poorly regarded <TT><FONT FACE="Courier"><ISINDEX></FONT></TT>
tag might be a simpler option than a search form employing a single
<TT><FONT FACE="Courier">INPUT TYPE=TEXT</FONT></TT> prompt.
<H3><A NAME="ASampleForm">A Sample Form</A></H3>
<P>
The definitions of the various <TT><FONT FACE="Courier">FORM</FONT></TT>
tags shown previously are accompanied by simple examples of HTML
forms. Listing 8.5 is a more realistic example of an HTML form.
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -