Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

The NAME attribute is mandatory because it provides a unique identifier for the data entered into the field.

The optional VALUE attribute enables you to place some default text in the field, rather than have it initially appear blank. This capability is useful if a majority of users will enter a certain text string into the field. In such cases, you can use VALUE to put the text into the field, thereby saving most users the effort of typing it.

The optional SIZE attribute gives you control over how many characters wide the field should be. The default SIZE is typically about 20 characters, although this number can vary from browser to browser. MAXLENGTH is also optional and enables you to specify the maximum number of characters that can be entered into the field.

Figure 8.1 shows a form on Crestar Bank’s Internet Banking site used to prompt for a Customer Number and PIN (password). Notice how password text appears as asterisks. The corresponding HTML is shown in Listing 8.1.

Listing 8.1 HTML Code to Produce Text and Password Fields

<DIV ALIGN=left>
<IMG SRC=”images/drop_p.gif” WIDTH=18 HEIGHT=28 BORDER=0 HSPACE=0
VSPACE=0 ALIGN=”BOTTOM”>lease enter your Customer Number
<BR>and Personal Identification Number (PIN).</DIV>
<P><BR><P><BR><P>
Customer Number:
<INPUT TYPE=”text” NAME=”cin” SIZE=”12" MAXLENGTH=”9" VALUE=”>
<BR>
Pin:
<INPUT TYPE=”password” NAME=”pin” SIZE=”12" MAXLENGTH=”4" VALUE=”>
<P>

FIGURE 8.1  Text and password fields are frequently used together to produce a login interface.

Check Boxes Check boxes are used to provide users with several choices from which they can select as many of the choices as they want. An <INPUT> tag that is used to produce a check box option has the following syntax:

<INPUT TYPE=”CHECKBOX” NAME=”Name” VALUE=”Value” [CHECKED]>

Each check box option is created by its own <INPUT> tag and must have its own unique NAME. If you give multiple check box options the same NAME, the script has no way to determine which choices the user actually made.

The VALUE attribute specifies which data is sent to the server if the corresponding check box is chosen. This information is transparent to the user. The optional CHECKED attribute preselects a commonly selected check box when the form is rendered on the browser screen.

Figure 8.2 shows the Flight Wizard on Microsoft’s Expedia travel site. When searching for flights, you can choose to look for flights with no change penalties, flights with no advance purchase requirement, direct flights, or any combination of these by putting checks in the appropriate check boxes. The HTML that produces the check boxes is shown in Listing 8.2.

---

NOTE:  If they are selected, check box options show up in the form data sent to the server. Options that are not selected do not appear.

---

FIGURE 8.2  Users can choose as many check box options as they prefer.

Listing 8.2 HTML Code to Produce Check Boxes

<TABLE BORDER=0>
<TR>
   <TD HEIGHT=3> </TD>
</TR>
<TR>
   <TD VALIGN=TOP><INPUT TYPE=CHECKBOX NAME=tktp VALUE=1 ></TD>
   <TD VALIGN=TOP>Search only for flights with no change penalties</TD>
</TR>
<TR>
    <TD VALIGN=TOP ><INPUT TYPE=CHECKBOX NAME=tktr VALUE=1 ></TD>
    <TD VALIGN=TOP>Search only for flights with no advance-purchase
     restrictions</TD>
</TR>
<TR>
    <TD VALIGN=TOP ><INPUT TYPE=CHECKBOX NAME=tktc VALUE=1 ></TD>
    <TD VALIGN=TOP>Search only for direct flights</TD>
</TR>
</TABLE>

Radio Buttons Radio buttons are used to present users with a set of choices from which they can choose only one. When you set up options with a radio button format, you should make sure that the options are mutually exclusive so that a user doesn’t try to select more than one.

The HTML code used to produce a set of three radio button options is as follows:

<FORM ...>
<INPUT TYPE=”RADIO” NAME=”Name” VALUE=”VALUE1" [CHECKED]>Option 1<P>
<INPUT TYPE=”RADIO” NAME=”Name” VALUE=”VALUE2">Option 2<P>
<INPUT TYPE=”RADIO” NAME=”Name” VALUE=”VALUE3">Option 3<P>
...
</FORM>

The VALUE and CHECKED attributes work the same as they do for check boxes, although you should have only one preselected radio button option. A fundamental difference with a set of radio button options is that they all have the same NAME. This is permissible because the user can select only one of the options.

A new user of the Netscape/AOL Instant Messenger Service would need to select a privacy radio button value as shown in Figure 8.3; the corresponding HTML is in Listing 8.3.

FIGURE 8.3  Users can choose only one of a set of radio button options.

Listing 8.3 HTML Code to Produce Radio Buttons

<TR VALIGN=”top” ALIGN=”left”>
  <TD ALIGN=”right”>
    <B><FONT FACE=”Arial,Helvetica”>Privacy Options</FONT></B>
  </TD>
  <TD>
    <INPUT TYPE=”radio” NAME=”privacy” VALUE=1 CHECKED >
  </TD>
  <TD>
    Show my screen name.*
  </TD>
<TR VALIGN=”top” ALIGN=”left”>
  <TD></TD>
  <TD>
    <INPUT TYPE=”radio” NAME=”privacy” VALUE=2>
  </TD>
  <TD>
    Do not show my screen name, but show that
    <FONT COLOR=”#000000">I’m an Instant Messenger user.</FONT>
  </TD>
</TR>
<TR VALIGN=”top” ALIGN=”left”>
  <TD></TD>
  <TD>
    <INPUT TYPE=”radio” NAME=”privacy” VALUE=3>
  </TD>
  <TD>
    Do not show my screen name or indicate
    <FONT COLOR=”#000000">that I’m an Instant Messenger user.</FONT>
  </TD>
</TR>

---

NOTE:  Just as with check boxes, values for radio button fields are not sent to the server if no option is selected.

---

Hidden Fields Technically, hidden fields are not meant for data input. You can send information to the server about a form without displaying that information anywhere on the form itself. The general format for including hidden fields is as follows:

<INPUT TYPE=”HIDDEN” NAME=”name” VALUE=”value”>

One possible use of hidden fields is to enable a single general script to process data from different forms. The script needs to know which form is sending the data, and a hidden field can provide this information without requiring anything on the part of the user.