retrieval system without prior written permission of the publisher except in the case of brief quotations embodied in critical articles and reviews. Making copies of any part of this book for any purpose other than your own personal use is a violation of

United States copyright laws. For information, address Que Corporation, 201 West 103^rd Street, Indianapolis, IN 46290 or at support@mcp.com.

Notice: This material is excerpted from Special Edition Using HTML, 2nd Edition, ISBN: 0-7897-0758-6. This material has not yet been through the final proof reading stage that it will pass through before being published in printed form. Some errors may exist here that will be corrected before the book is published. This material is provided "as is" without any warranty of any kind.

Chapter 21 Forms and How They Work

by Jim O'Donnell

What an HTML form is
How to create a form
How to use list, check boxes, and radio buttons to present a list of options
How to allow for the entry of text, secret text (such as passwords), and arbitrary length text
How to allow the user to reset and submit completed forms.

Forms are one of the most popular features on the World Wide Web. They enable users to interact with the text and graphics that are displayed on your machine. You can make forms with simple yes or no questions, you can make highly complex order forms, or you can make a form for people to send you comments.

You create forms by providing a number of fields in which a user can enter information or choose an option. Then, when the user submits the form, the information is returned to a script. A script is a short program that is written specifically for each form. You can create them to do any number of things.

HTML Forms

HTML forms give the Web author the opportunity to solicit input from people reading his Web pages. Just as HTML provides many mechanisms for outputting information, the use of HTML forms enables information input. These forms can be used to solicit free-form text information, get answers to yes or no questions, and get answers from a set of options.

Forms can be used in Web pages for many different reasons. They can be used for something as simple as allowing visitors to your home page to sign a guest book or comment about your pages. Forms input can be used to create and maintain a discussion group over the Web. When combined with a secure method of transmission, forms can be used to conduct business over the Web. These, and many other uses can be achieved with HTML forms.

See "Adding Live Chat Pages to Your Site"

An Overview of HTML Forms Tags

The HTML tags you use to display forms are straightforward. There are three types of tags for creating fields: <TEXTAREA>, <SELECT>, and <INPUT>. You can put any number of these tags between the <FORM> and </FORM> container tags. The following is a brief description of each tag:

<TEXTAREA>-This tag defines a field in which the end user can type multiple lines of text.
<SELECT>-This tag enables the end user to choose among a number of options in either a scroll box or pop-up menu.
<INPUT>-This tag provides all of the other types of input: single lines of text, radio buttons, check boxes, and the buttons to submit or clear the form.

<FORM>

The <FORM> element comes at the beginning of any form. When you create a <FORM> element, you also define the script it uses and how it sends data, using the ACTION and METHOD attributes:

ACTION-This attribute points the form to a URL that will accept the forms information and do something with it. If you don't specify an ACTION, it sends the information back to the same URL the page came from.
METHOD-This attribute tells the form how to send its information back to the script. The most common method is POST, which sends all the information from the form separately from the URL. The other option for METHOD is GET, which tacks the information from the form to the end of the URL.

Use POST for all of your forms unless it's a very simple query, especially because URLs have a definite length that they can't exceed.

The following is an example of a <FORM> tag:

<FORM METHOD="POST" ACTION="/cgi-bin/comment_script">
...
</FORM>

This example says that I want the form to send the completed form to the script comment_script in the cgi-bin directory on my server and to use the POST method to send it.

See "All About CGI Scripts"

You can put any number of forms on the same HTML page, but be careful not to nest one form inside another. If you put in a <FORM> tag before finishing that last one, that line is ignored and all the inputs for your second form are assumed to go with the first one.

<TEXTAREA>

With <TEXTAREA>, you can provide a field for someone to enter multiple lines of information. By default, a <TEXTAREA> form shows a blank field four rows long and 40 characters wide. You can make it any size you want by using the ROWS and COLS attributes in the tag. You can also specify some default text by simply entering it between the <TEXTAREA> and </TEXTAREA> tags.

<TEXTAREA> fields are ideal for having users enter comments or lengthy information because they can type as much as they want in the field.

The options for the <TEXTAREA> tag are as follows:

NAME-This is required. It defines the name for the data.
ROWS-This sets the number of rows in the field.
COLS-This sets the width of the field in characters.
Default text-Any text between the <TEXTAREA> and </TEXTAREA> tags is used as default text and shows up inside the field.

While the ROWS and COLS attributes are not required, there is no default value for these that you will be guaranteed to get on every Web browser, so it's always a good idea to set them.

All input fields in a form-<TEXTAREA>, <SELECT>, and <INPUT>-must each have a NAME defined for its information.

Browsers can't interpret any HTML coding inside <TEXTAREA> tags (see Listing 21.1).

Listing 21.1 TEXTAREA.HTM-<TEXTAREA> Default Text

<HTML>

<HEAD>

<TITLE>TEXTAREA.HTM</TITLE>

</HEAD>

<BODY>

<FORM>

<TEXTAREA NAME="comments" ROWS=4 COLS=40>Default text

1 2 3 ...

</TEXTAREA>

</FORM>

</BODY>

</HTML>

The result of Listing 21.1 is shown in figure 21.1.

Fig. 21.1

The default text is shown as preformatted text in the <TEXTAREA> element.

<SELECT>

The <SELECT> element shows a list of choices in either a pop-up menu or a scrolling list. It's set up as an opening and closing tag with a number of choices listed in between. Just like the <TEXTAREA> element, the <SELECT> tag requires you to define a name. You can specify how many choices to show at once, using the SIZE attribute.

The options for the <SELECT> element are as follows:

NAME-This is required. It defines the name for the data.
SIZE-This attribute determines how many choices to show. If you omit SIZE or set it to 1, the choices are shown as a pop-up menu. If you set it to 2 or higher, it shows the choices in a scroll box. If you set SIZE larger than the number of choices you have within <SELECT>, a "nothing" choice is added. When the end user chooses this, it's returned as an empty field.
MULTIPLE-This allows multiple selections. If you specify multiple, a scrolling window displays-regardless of the number of choices or the setting of SIZE.

Some WWW browsers won't properly display a scrolling window if the SIZE is 2 or 3. In that case, leave it as a pop-up menu or think about using the <INPUT> field's radio buttons.

You present the choices the end user will make within the <SELECT> and </SELECT> tags. The choices are listed inside the <OPTION> tag and don't allow any other HTML markup.

The options for the <OPTION> tag are the following:

VALUE-This is the value to be assigned for the choice, which is what is sent back to the script and doesn't have to be the same as what is presented to the end user.
SELECTED-If you want one of the choices to be a default, use the SELECTED option in the <OPTION> tag.

Consider Listing 21.2, the result of which is shown in figure 21.2 and figure 21.3.

Listing 21.2 SELECT1.HTM-Selection via Pop-up Menu

<HTML>
<HEAD>
<TITLE>SELECT1.HTM</TITLE>
</HEAD>
<BODY>
What type of connection:
<FORM>
<SELECT NAME="network">
<OPTION SELECTED VALUE="ethernet"> Ethernet
<OPTION VALUE="token16"> Token Ring - 16MB
<OPTION VALUE="token4"> Token Ring - 4MB
<OPTION VALUE="localtalk"> LocalTalk
</SELECT>
</FORM>
</BODY>
</HTML>

Fig. 21.2

The <SELECT> element will use the default of a pop-up menu (size=1).

Fig. 21.3

The width of the pop-up menu is determined by the size of the entries listed with the <OPTION> elements.

Suppose that you set the tag as shown in Listing 21.3.

Listing 21.3 SELECT2.HTM-Selection via Scrollable List

<HTML>
<HEAD>
<TITLE>SELECT2.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
What type of Connection:
<SELECT MULTIPLE NAME="network">
<OPTION SELECTED VALUE="ethernet"> Ethernet
<OPTION VALUE="token16"> Token Ring - 16MB
<OPTION VALUE="token4"> Token Ring - 4MB
<OPTION VALUE="localtalk"> LocalTalk
</SELECT>
</FORM>
</BODY>
</HTML>

The result of Listing 21.3 is shown in figure 21.4.

Fig. 21.4

If you use MULTIPLE within the <SELECT> tag, then the field becomes a list of choices.

Troubleshooting

I know the most common choices I want to present, but I want to allow people to enter their own value if they want to. How can I do that?

Your best bet is to display the common choices in a <SELECT> box or pop-up menu, with one of the options set to Other. Then include an <INPUT> text field or a <TEXTAREA> field right after the list of choices (see Listing 21.4).

Listing 21.4 SELECT3.HTM-Selection with "Other" Option.

<HTML>

<HEAD>

<TITLE>SELECT3.HTM</TITLE>

</HEAD>

<BODY>

<FORM>

What type of Connection:

<SELECT MULTIPLE NAME="network">

<OPTION SELECTED VALUE="ethernet"> Ethernet

<OPTION VALUE="token16"> Token Ring - 16MB

<OPTION VALUE="token4"> Token Ring - 4MB

<OPTION VALUE="localtalk"> LocalTalk

<OPTION VALUE="other"> Other...

</SELECT>

<BR>

If other, please specify:<INPUT TYPE="text" NAME="network_other">

</FORM>

</BODY>

</HTML>

The result of Listing 21.4 is shown in figure 21.5.

Fig. 21.5

This type of form layout provides both a common list and a place for exceptions.

<INPUT>

<INPUT>, unlike <TEXTAREA> and <SELECT>, is a single tag option for gathering information. <INPUT> contains all of the other options for acquiring information, including simple text fields, password fields, radio buttons, check boxes, and the buttons to submit and reset the form.

The attributes for the <INPUT> tag are the following:

NAME-This defines the name for the data. This field is required for all the types of input except SUBMIT and CLEAR.
SIZE-This is the size of the input field in number of characters for text or password.
MAXLENGTH-This specifies the maximum number of characters to be allowed for a text or password field.
VALUE-For a text or password field, it defines the default text displayed. For a check box or radio button, it specifies the value that will be returned to the server if the box or button is selected. For the SUBMIT and RESET buttons, it defines the text inside the button.
CHECKED-This sets a check box or radio button on. It has no meaning for any other type of <INPUT> tag.
TYPE-This sets the type of input field you want to display. (See the types in the following section.)

INPUT TYPE

This section describes the possible values for the INPUT TYPE attribute.

TEXT

TEXT, the default input type, displays a simple line of text. You can use the attributes NAME (this is required), SIZE, MAXLENGTH, and VALUE with TEXT. For example, consider Listing 21.5, the result of which is shown in figure 21.6

Listing 21.5 INPUT1.HTM-Text Input Box

<HTML>
<HEAD>
<TITLE>INPUT1.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
A Phone Number: <INPUT TYPE="text" NAME="Phone" SIZE="15" MAXLENGTH="12">
</FORM>
</BODY>
</HTML>

Fig. 21.6

The INPUT TEXT element provides a very flexible input field.

Troubleshooting

I want to let someone put in a very long URL, but the screen is not wide enough. How do I do that?

A good way to enable someone to put in an extremely long text line is to simply set the size to 60 or 80 characters and not set a maximum length. This will allow someone to put in a very long string, even if you can't see it all at once.

PASSWORD

PASSWORD, a modified TEXT field, displays typed characters as bullets instead of the characters actually typed. Possible attributes to include with the type PASSWORD include NAME (this is required), SIZE, MAXLENGTH, and VALUE. Consider Listing 21.6, the result of which is shown in figure 21.7.

Listing 21.6 INPUT2.HTM-Text Input Box with No Echo

<HTML>
<HEAD>
<TITLE>INPUT2.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
Enter the secret word: <INPUT TYPE="password" NAME="secret_word" Size="30" MAXLENGTH="30">
</FORM>
</BODY>
</HTML>

Fig. 21.7

Although it will look different in different browsers, the PASSWORD element hides the text that is typed.

CHECKBOX

CHECKBOX displays a simple check box that can be checked or empty; use a check box when the choice is yes or no and doesn't depend on anything else. Possible attributes to include with the TYPE text include NAME (this is required), VALUE, and CHECKED (which defaults the check box as checked). Consider Listing 21.7, the result of which is shown in figure 21.8.

Listing 21.7 CHECKBOX.HTM-Checkbox Form Input

<HTML>
<HEAD>
<TITLE>CHECKBOX.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="checkbox" NAME="checkbox1" VALUE="checkbox_value1">A checkbox
<INPUT TYPE="checkbox" NAME="checkbox2" VALUE="checkbox_value2" CHECKED>A pre-selected checkbox
</FORM>
</BODY>
</HTML>

Fig. 21.8

Select the check boxes that are commonly checked to make the form easier to use.

You want to be especially careful when using check boxes and radio buttons in HTML documents with custom backgrounds or background colors. Depending on the Web browser used, check boxes and radio buttons will sometimes not show up with dark backgrounds.

RADIO

RADIO is a more complex version of a check box, allowing only one of a set to be chosen. You can group radio buttons together using the NAME attribute; keep all buttons in the same group under one NAME. Possible attributes to include with the TYPE text include NAME (this is required), VALUE, and CHECKED. Consider Listing 21.8, the result of which is shown in figure 21.9.

Listing 21.8 RADIO1.HTM-Radio Button Form Input

<HTML>
<HEAD>
<TITLE>RADIO1.HTM</TITLE>
</HEAD>
<BODY>
Form #1:
<FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="choice1"> Yes.
<INPUT TYPE="radio" NAME="choice" VALUE="choice2"> No.
</FORM>
<HR>
Form #2:
<FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="choice1" CHECKED> Yes.
<INPUT TYPE="radio" NAME="choice" VALUE="choice2"> No.
</FORM>
</BODY>
</HTML>

Fig. 21.9

In the top form, without selecting yes or no, the end user can send back a "blank" value for this selection.

Listing 21.9 is a variation on Listing 21.8. The result is shown in figure 21.10.

Listing 21.9 RADIO2.HTM-Radio Button Form Input with More Choices
<HTML>
<HEAD>
<TITLE>RADIO2.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
One Choice:<BR>
<INPUT TYPE="radio" NAME="choice1" VALUE="choice1" CHECKED>(1)
<INPUT TYPE="radio" NAME="choice1" VALUE="choice2">(2)
<INPUT TYPE="radio" NAME="choice1" VALUE="choice3">(3)
<BR>
One Choice:<BR>
<INPUT TYPE="radio" NAME="choice2" VALUE="choice1" CHECKED>(1)
<INPUT TYPE="radio" NAME="choice2" VALUE="choice2">(2)
<INPUT TYPE="radio" NAME="choice2" VALUE="choice3">(3)
<INPUT TYPE="radio" NAME="choice2" VALUE="choice4">(4)
<INPUT TYPE="radio" NAME="choice2" VALUE="choice5">(5)
</FORM>
</BODY>
</HTML>

Fig. 21.10

The end user has more choices in this variation. The first choice was the default in each list-this choice has been overridden in the second list.

If you want to provide a long list of choices, use the <SELECT> tag so the choice doesn't take up as much space on the page.

If you don't specify a set of radio buttons or check boxes with one of the values as SELECTED, then you could receive an empty field for that <INPUT> name.

RESET

RESET displays a push button with the preset function of clearing all the data in the form to its original value. You can use the VALUE attribute with the RESET tag to provide text other than "Reset" (the default) for the button. For example, consider Listing 21.10. The result is shown in figure 21.11.

Listing 21.10 RESET.HTM-Form Reset Button
<HTML>
<HEAD>
<TITLE>RESET.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="reset">
<BR>
<INPUT TYPE="reset" VALUE="Clear that form!">
</FORM>
</BODY>
</HTML>

Fig. 21.11

The top button shows the default text for the RESET element.

SUBMIT

SUBMIT displays a push button with the preset function of sending the data in the form to the server to be processed, typically by a CGI script. You can use the VALUE attribute with RESET to provide text other than "Submit Query" (the default) for the button. Consider, for example, Listing 21.11. The result is shown in figure 21.12.

See "All about CGI Scripts"

Listing 21.11 SUBMIT.HTM-Form Submit Button
<HTML>
<HEAD>
<TITLE>SUBMIT.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="submit">
<BR>
<INPUT TYPE="submit" VALUE="Send in the data!">
</FORM>
</BODY>
</HTML>

Fig. 21.12

The top button shows the default text for the SUBMIT element.