ch8.htm

CGI programming is the hottest stuff to look out for in this book

<BLOCKQUOTE>
Attributes are mandatory unless they are shown here in square brackets (<TT><FONT FACE="Courier">[]</FONT></TT>). Mandatory attributes must be included for the form to be meaningful. Almost all form tags must have a <TT><FONT 
FACE="Courier">NAME</FONT></TT> attribute. The <TT><FONT FACE="Courier">NAME</FONT></TT> attribute is used as an identifier for the contents of the form component when the form is submitted. The attributes shown previously in square brackets are optional.
</BLOCKQUOTE>

</TD></TR>
</TABLE></CENTER>
<H3><A NAME="INPUTTYPETEXT"><TT><FONT SIZE=4 FACE="Courier">INPUT
TYPE=TEXT</FONT></TT></A></H3>
<BLOCKQUOTE>
<TT><FONT FACE="Courier">&lt;INPUT [TYPE=TEXT] NAME=&quot;<I>text-id</I>&quot;
[SIZE=<I>nn</I>] [MAXLENGTH=<I>nn</I>] [VALUE=&quot;<I>default
text</I>&quot;]&gt;</FONT></TT>
</BLOCKQUOTE>
<P>
An <TT><FONT FACE="Courier">INPUT</FONT></TT> tag with a <TT><FONT FACE="Courier">TYPE=TEXT</FONT></TT>
attribute presents the user with a prompt for a single line of
text. The tag must have a <TT><FONT FACE="Courier">NAME</FONT></TT>
attribute by which it can be identified later. A <TT><FONT FACE="Courier">SIZE</FONT></TT>
attribute can be used to specify how many characters wide the
text prompt window should be. A <TT><FONT FACE="Courier">MAXLENGTH</FONT></TT>
attribute can be used to limit the input to a maximum number of
characters. If the <TT><FONT FACE="Courier">MAXLENGTH</FONT></TT>
attribute is larger than the <TT><FONT FACE="Courier">SIZE</FONT></TT>
attribute, the browser will usually scroll the entered text  appropriately.
A <TT><FONT FACE="Courier">VALUE</FONT></TT> attribute can be
used to fill the prompt with some initial text as soon as the
form is displayed, which is often referred to as the <I>default</I>
text. Listing 8.1, earlier in the chapter, illustrates the use
of <TT><FONT FACE="Courier">INPUT TYPE=TEXT</FONT></TT>.
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Caution</B></TD></TR>
<TR><TD>
<BLOCKQUOTE>
Some Web browsers do not honor the <TT><FONT FACE="Courier">MAXLENGTH</FONT></TT> attribute. Don't rely on the <TT><FONT FACE="Courier">MAXLENGTH</FONT></TT> value when interpreting form data. It is an advisory limit that most Web browsers implement, but 
some do not.
</BLOCKQUOTE>

</TD></TR>
</TABLE></CENTER>
<P>
<H3><A NAME="INPUTTYPESUBMIT"><TT><FONT SIZE=4 FACE="Courier">INPUT
TYPE=SUBMIT</FONT></TT></A></H3>
<BLOCKQUOTE>
<TT><FONT FACE="Courier">&lt;INPUT TYPE=SUBMIT [NAME=&quot;<I>button-id</I>&quot;]
[VALUE=&quot;<I>Button label text</I>&quot;]&gt;</FONT></TT>
</BLOCKQUOTE>
<P>
An <TT><FONT FACE="Courier">INPUT</FONT></TT> tag with <TT><FONT FACE="Courier">TYPE=SUBMIT</FONT></TT>
provides a button that submits the information in the completed
form to the URL given as the <TT><FONT FACE="Courier">ACTION</FONT></TT>
attribute to the <TT><FONT FACE="Courier">&lt;FORM&gt;</FONT></TT>
tag. The information is submitted using the HTTP request type
specified by the <TT><FONT FACE="Courier">FORM</FONT></TT>'s <TT><FONT FACE="Courier">METHOD</FONT></TT>
attribute. This is described in more detail in the section &quot;Handling
Form Submissions.&quot; A form can have more than one <TT><FONT FACE="Courier">SUBMIT</FONT></TT>
button, in which case the buttons can be distinguished by giving
a value to the optional <TT><FONT FACE="Courier">NAME</FONT></TT>
attribute. The <TT><FONT FACE="Courier">NAME</FONT></TT> attribute
will be passed in the form data when the form is submitted to
allow the form-handling mechanism to determine which submit button
the user used. Listing 8.1, earlier in the chapter, is an example
of the use of a <TT><FONT FACE="Courier">SUBMIT</FONT></TT> button.

<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Tip</B></TD></TR>
<TR><TD>
<BLOCKQUOTE>
If a form consists of only one single <TT><FONT FACE="Courier">INPUT TYPE=TEXT</FONT></TT> component, pressing the Enter key in the text window will often achieve the same result as pressing the <TT><FONT FACE="Courier">SUBMIT</FONT></TT> button. Not all 
Web browsers support this added feature, however, so for maximum coverage and to avoid annoying the user, a form design should always include a <TT><FONT FACE="Courier">SUBMIT</FONT></TT> button or <TT><FONT FACE="Courier">INPUT TYPE=IMAGE</FONT></TT> tag.

</BLOCKQUOTE>

</TD></TR>
</TABLE></CENTER>
<P>
<H3><A NAME="INPUTTYPERESET"><TT><FONT SIZE=4 FACE="Courier">INPUT
TYPE=RESET</FONT></TT></A></H3>
<BLOCKQUOTE>
<TT><FONT FACE="Courier">&lt;INPUT TYPE=RESET [VALUE=&quot;<I>Button
label text</I>&quot;]&gt;</FONT></TT>
</BLOCKQUOTE>
<P>
An <TT><FONT FACE="Courier">INPUT</FONT></TT> tag with <TT><FONT FACE="Courier">TYPE=RESET</FONT></TT>
provides a button that clears the form and sets the contents back
to their initial values where specified. Not all HTML forms will
use this feature, but it can help users start fresh if they want
to reconsider the default options. Listing 8.2 in the next section
illustrates the use of the reset button.
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Note</B></TD></TR>
<TR><TD>
<BLOCKQUOTE>
Unlike most other form tags where the <TT><FONT FACE="Courier">NAME</FONT></TT> attribute is mandatory, the <TT><FONT FACE="Courier">NAME</FONT></TT> attribute is optional for the <TT><FONT FACE="Courier">INPUT TYPE=SUBMIT</FONT></TT> tag and is not used 
in an <TT><FONT FACE="Courier">INPUT TYPE=RESET</FONT></TT> tag.
</BLOCKQUOTE>

</TD></TR>
</TABLE></CENTER>
<P>
<H3><A NAME="INPUTTYPERADIO"><TT><FONT SIZE=4 FACE="Courier">INPUT
TYPE=RADIO</FONT></TT></A></H3>
<BLOCKQUOTE>
<TT><FONT FACE="Courier">&lt;INPUT TYPE=RADIO NAME=&quot;<I>radio-set-id</I>&quot;
VALUE=&quot;<I>choice-id</I>&quot; [chECKED]&gt;</FONT></TT>
</BLOCKQUOTE>
<P>
A form can prompt the user to choose from a set of alternatives
with <TT><FONT FACE="Courier">INPUT TYPE=RADIO</FONT></TT> tags.
Each tag will be presented to the user as something like a radio
button that can be selected. Each radio button in the set of alternatives
in a <TT><FONT FACE="Courier">FORM</FONT></TT> is given the same
<TT><FONT FACE="Courier">NAME</FONT></TT> value. Only one of the
radio buttons may be selected at any one time. The <TT><FONT FACE="Courier">INPUT
TYPE=RADIO</FONT></TT> tag has a <TT><FONT FACE="Courier">VALUE
</FONT></TT>attribute that specifies the data sent when the form
is submitted if that radio button was selected. Listing 8.2 shows
the use of a set of radio buttons as a <I>one-of-many</I> selection.
Figure 8.2 shows how the example might appear in a Web browser.
<P>
<A HREF="f8-2.gif" ><B>Figure 8.2:</B> <I>A form with radio buttons</I>.</A>
<HR>
<BLOCKQUOTE>
<B>Listing 8.2. A form with radio buttons.<BR>
</B>
</BLOCKQUOTE>
<BLOCKQUOTE>
<TT><FONT FACE="Courier">&lt;FORM ACTION=&quot;choose.cgi&quot;
METHOD=POST&gt;<BR>
&lt;P&gt; E-mail address: &lt;INPUT TYPE=TEXT NAME=&quot;email&quot;
SIZE=60 MAXSIZE=180&gt; &lt;/P&gt;<BR>
&lt;P&gt; Please add me to the mailing list. &lt;/P&gt;<BR>
&lt;P&gt; I am: &lt;/P&gt;<BR>
&lt;OL&gt;<BR>
&lt;LI&gt;&lt;INPUT TYPE=RADIO NAME=&quot;employer&quot; VALUE=&quot;private&quot;
chECKED&gt;<BR>
Employed in the private sector<BR>
&lt;LI&gt;&lt;INPUT TYPE=RADIO NAME=&quot;employer&quot; VALUE=&quot;public&quot;&gt;
<BR>
Employed in the public sector<BR>
&lt;LI&gt;&lt;INPUT TYPE=RADIO NAME=&quot;employer&quot; VALUE=&quot;self&quot;&gt;
<BR>
Self-employed<BR>
&lt;LI&gt;&lt;INPUT TYPE=RADIO NAME=&quot;employer&quot; VALUE=&quot;unemployed&quot;&gt;
<BR>
Unemployed<BR>
&lt;/OL&gt;<BR>
&lt;P&gt; &lt;INPUT TYPE=SUBMIT VALUE=&quot;Continue&quot;&gt;
<BR>
&lt;INPUT TYPE=RESET VALUE=&quot;Clear form&quot;&gt; &lt;/P&gt;
<BR>
&lt;/FORM&gt;</FONT></TT>
</BLOCKQUOTE>
<HR>
<P>
Notice that related radio buttons share the same <TT><FONT FACE="Courier">NAME</FONT></TT>
but different <TT><FONT FACE="Courier">VALUE</FONT></TT>s. The
data sent by the group of radio buttons when the form is submitted
is the <TT><FONT FACE="Courier">VALUE</FONT></TT> attribute of
the selected radio button. The <TT><FONT FACE="Courier">chECKED</FONT></TT>
attribute marks a radio button as the default choice, switched
&quot;on&quot; when the form is first displayed.
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Caution</B></TD></TR>
<TR><TD>
<BLOCKQUOTE>
For radio buttons to behave meaningfully under most Web browsers, there must be at least two with the same <TT><FONT FACE="Courier">NAME</FONT></TT> attribute. The effect of a single radio button varies between browsers. If you want to display a single 
switch, use an <TT><FONT FACE="Courier">INPUT TYPE=chECKBOX</FONT></TT>.
</BLOCKQUOTE>

</TD></TR>
</TABLE></CENTER>
<P>
<H3><A NAME="INPUTTYPEchECKBOX"><TT><FONT SIZE=4 FACE="Courier">INPUT
TYPE=chECKBOX</FONT></TT></A></H3>
<BLOCKQUOTE>
<TT><FONT FACE="Courier">&lt;INPUT TYPE=chECKBOX NAME=&quot;<I>box-set-id</I>&quot;
VALUE=&quot;<I>choice-id</I>&quot; [chECKED]&gt;</FONT></TT>
</BLOCKQUOTE>
<P>
An <TT><FONT FACE="Courier">INPUT</FONT></TT> tag with attribute
<TT><FONT FACE="Courier">TYPE=chECKBOX</FONT></TT> offers the
user an &quot;on&quot; or &quot;off&quot; switch. It is similar
to a radio button, but any number of checkboxes may be switched
on. If a checkbox is switched &quot;on&quot; when the form is
submitted, its <TT><FONT FACE="Courier">VALUE</FONT></TT> attribute
is submitted as the form data for the <TT><FONT FACE="Courier">NAME</FONT></TT>d
form component. Several checkboxes can be grouped (as with radio
buttons) by giving them the same <TT><FONT FACE="Courier">NAME</FONT></TT>
attribute. If several checkboxes with the same <TT><FONT FACE="Courier">NAME</FONT></TT>
are switched on when the form is submitted, the form data for
that <TT><FONT FACE="Courier">NAME</FONT></TT>d component is the
list of switched-on <TT><FONT FACE="Courier">VALUE</FONT></TT>s
separated by commas (&quot;,&quot;). Listing 8.3 gives an example
of checkboxes in use. Figure 8.3 shows how this example might
look to the Web user.
<P>
<A HREF="f8-3.gif" ><B>Figure 8.3:</B> <I>Checkboxes and a text area.</I></A>.
<HR>
<BLOCKQUOTE>
<B>Listing 8.3. Checkboxes, hidden fields, and a text area.<BR>
</B>
</BLOCKQUOTE>
<BLOCKQUOTE>
<TT><FONT FACE="Courier">&lt;FORM ACTION=&quot;feedback.cgi&quot;
METHOD=POST&gt;<BR>
&lt;P&gt; Please tell us what you thought of this Web site. Select
the checkboxes which you agree with: &lt;/P&gt;<BR>
&lt;UL&gt;<BR>
&lt;LI&gt;&lt;INPUT TYPE=chECKBOX NAME=&quot;opinion&quot; VALUE=&quot;understandable&quot;&gt;
<BR>
The text was understandable.<BR>
&lt;LI&gt;&lt;INPUT TYPE=chECKBOX NAME=&quot;opinion&quot; VALUE=&quot;navigable&quot;&gt;
<BR>
I found it easy to find my way through the Web site. <BR>
&lt;LI&gt;&lt;INPUT TYPE=chECKBOX NAME=&quot;opinion&quot; VALUE=&quot;stylish&quot;&gt;
<BR>
I was impressed by the style and presentation.<BR>
&lt;/UL&gt;<BR>
&lt;P&gt; &lt;INPUT TYPE=&quot;HIDDEN&quot; NAME=&quot;pages&quot;
VALUE=&quot;brochure&quot;&gt;<BR>
Please add any other comments:<BR>
&lt;TEXTAREA NAME=&quot;feedback&quot; ROWS=5 COLS=40&gt;<BR>
I think your brochure is:<BR>
&lt;/TEXTAREA&gt; <BR>
&lt;/P&gt;<BR>
&lt;P&gt; &lt;INPUT TYPE=SUBMIT VALUE=&quot;Send comments&quot;&gt;
<BR>
&lt;INPUT TYPE=RESET VALUE=&quot;Clear form&quot;&gt; &lt;/P&gt;
<BR>
&lt;/FORM&gt;</FONT></TT>
</BLOCKQUOTE>
<HR>
<P>
As with most other form tags, the <TT><FONT FACE="Courier">INPUT
TYPE=checkbox</FONT></TT> must have a <TT><FONT FACE="Courier">NAME</FONT></TT>
attribute, but the designer of the form should still include some
label text in the HTML source to accompany each checkbox, and
it may be appropriate to precede a list of checkboxes with instructions
on their use.
<P>
<CENTER><TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>
<TR><TD><B>Tip</B></TD></TR>
<TR><TD>
<BLOCKQUOTE>
If you include instructions in a form, steer clear of phrases like &quot;click here&quot; and &quot;mark crosses in the boxes.&quot; These are platform-specific or browser-specific instructions. Users with a different Web browser than you may see 
checkboxes represented as unfilled/filled circles or bracketed asterisks, or whatever is the standard representation of a switch under the graphical user interface they are using. Try to use phrases like &quot;choose,&quot; &quot;select,&quot; or at worst, 
&quot;fill in the checkboxes.&quot; This guideline applies to instructions for other form components and even for hyperlinks.</BLOCKQUOTE>

</TD></TR>
</TABLE></CENTER>
<P>
<H3><A NAME="INPUTTYPEIMAGE"><TT><FONT SIZE=4 FACE="Courier">INPUT
TYPE=IMAGE</FONT></TT></A></H3>
<BLOCKQUOTE>
<TT><FONT FACE="Courier">&lt;INPUT TYPE=IMAGE NAME=&quot;<I>image-id</I>&quot;
SRC=&quot;<I>image-url</I>&quot; [ALIGN=<I>alignment</I>]&gt;</FONT></TT>
</BLOCKQUOTE>
<P>
The <TT><FONT FACE="Courier">INPUT TYPE=IMAGE</FONT></TT> form
tag is similar to the <TT><FONT FACE="Courier">IMG</FONT></TT>
HTML tag. It displays the in-line image from the <TT><FONT FACE="Courier">SRC</FONT></TT>
location with the optional <TT><FONT FACE="Courier">ALIGN</FONT></TT>
tag. It has two features that make it useful in a form. First,
it behaves like the submit button. When the user &quot;clicks&quot;
on the image, the completed form data is sent to the form handler
as described for the <TT><FONT FACE="Courier">INPUT TYPE=SUBMIT
</FONT></TT>component. Second, it allows the user to choose a
part of an image. The pixel coordinates of the point at which
the user clicked on the image are sent with the form data with
the names <I>image-id</I>.<I>x</I> and <I>image-id.y</I>. That