Полезная информация


Special Edition Using HTML 4

Previous chapterNext chapterContents


- 13 -
Collecting Input with Forms

by Jerry Honeycutt, Jim O'Donnell, and Mark R. Brown

Introducing HTML Forms

Forms are one of the most popular, interactive features on the World Wide Web (WWW). 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 forms 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 server-side script. A script is a short program that is written specifically for each form. You can create scripts to do any number of things. You can also handle the contents of a form by using a client-side script, which you learn about in Part VI, "Scripting on the Web Server."

HTML forms give you the opportunity to gather information from people reading your Web page. Just as HTML provides many mechanisms for outputting information, the use of HTML forms enables 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.

You can add forms to your Web page with many different results in mind. You can do something simple, like asking visitors to sign a guest book or comment about your Web site. You can also use forms to gather input for a discussion group or, when combined with a secure method of transmission, take online orders for your $10 widgets. These and many other results can be achieved with HTML forms.

Working with 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 (you'll learn more about each a bit later in this chapter):

<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> tag comes at the beginning of any form. When you create a <FORM> tag, 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 an URL that will accept the form's 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 attaches the information from the form to the end of the URL.
The following is an example of a <FORM> tag:

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

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


CAUTION: 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 the 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.


TIP: <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 are guaranteed to get on every Web browser, so it's always a good idea to set them. Listing 13.1 shows you an example using the <TEXTAREA> tag. Figure 13.1 shows you what this example looks like.


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

Listing 13.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>

FIG. 13.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 by 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 drop-down list. 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.


TIP: Some WWW browsers don't properly display a scrolling window if the SIZE is 2 or 3. In that case, leave it as a drop-down list or think about using the <INPUT> field's radio buttons.

You present the choices the end user can 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 13.2, the results of which are shown in Figures 13.2 and 13.3. This HTML adds a list called network to the document that contains four options: ethernet, token16, token5, and localtalk.

Listing 13.2  SELECT1.HTM--Selection via Drop-Down List

<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. 13.2
The <SELECT> tag uses the default of a drop-down list (size=1).

FIG. 13.3
The width of the drop-down list is determined by the size of the entries listed with the <OPTION> tags.

Suppose you set the tag as shown in Listing 13.3, the result of which is shown in Figure 13.4.

Listing 13.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>

FIG. 13.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 13.4).

Listing 13.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 13.4 is shown in Figure 13.5.

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


TIP: You can use the <SELECT> tag as a navigational aid in your Web pages. You can provide a number of URLs in a list. The user can then choose one, click a Submit button, and have the server-side or client-side script jump to the URL indicated by that choice. Microsoft uses this method to direct users to different international Web sites (see http://www.microsoft.com).

<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 is 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 to 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.)

Setting the <INPUT> Tag's TYPE

This section describes the possible values for the INPUT tag's TYPE attribute. TEXT  TEXT, the default input type, gathers a simple line of text. You can use the attributes NAME (this is required), SIZE, MAXLENGTH, and VALUE with TEXT. For example, consider Listing 13.5, the result of which is shown in Figure 13.6.

Listing 13.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. 13.6
The TEXT input type 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 allows a user 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 (required), SIZE, MAXLENGTH, and VALUE. Consider Listing 13.6, the result of which is shown in Figure 13.7.

Listing 13.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. 13.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 left 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 (required), VALUE, and CHECKED (which defaults the check box as checked). Consider Listing 13.7, the result of which is shown in Figure 13.8. Check boxes are useful when you have a list of options, more than one of which can be selected at a time.

Listing 13.7  CHECK BOX.HTM--Check Box 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>


CAUTION: 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 sometimes do not show up with dark backgrounds.

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

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

Listing 13.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>

Listing 13.9 is a variation on Listing 13.8. The result is shown in Figure 13.10.

FIG. 13.9
In the top form, without selecting yes or no, the end user can send back a "blank" value for this selection because none of the boxes were preselected with the CHECKED field.

Listing 13.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. 13.10
he 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.


TIP: 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.


CAUTION: If you don't specify a set of radio buttons or check boxes with one of the values as CHECKED, 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 13.10. The result is shown in Figure 13.11.

Listing 13.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. 13.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 by a server-side script. You can use the VALUE attribute with SUBMIT to provide text other than Submit Query (the default) for the button. Consider, for example, Listing 13.11. The result is shown in Figure 13.12.

Listing 13.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>

Formatting and Designing Forms

Forms can be easy to read, simple one- or two-entry affairs with little to display; they can also be terrifically complex devices. As your forms get more complex, you need to carefully consider their layout. Think about how to make it obvious that certain titles are connected to certain fields and think about how to make your forms easy for anyone to use. People are often put off by complex forms that are hard to understand, so it's in your best interest to make them easy and fun to use--regardless of their complexity.

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

Using Line Break Tags

When you markup HTML documents, you usually just let the words wrap across the screen. Although this flexibility is wonderful to have for segments of text, it can make reading a form incredibly difficult. A quick and simple solution is to include the line break tag, <BR>, to move something to the next line.

Forcing Fields onto Separate Lines  If you want to have two fields, Name and E-Mail Address, for example, you can simply mark them up as shown in Listing 13.12.

Listing 13.12  LB1.HTM--Forms Without Line Breaks

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Line Break Tags</H1>
<FORM>
      Name: <INPUT NAME="name" SIZE="30">
      E-Mail Address: <INPUT NAME="email" SIZE="40">
</FORM>
</BODY>
</HTML>

Although this might look great now, it can wrap strangely on some WWW browsers and look shabby when displayed (see Figure 13.13).

FIG. 13.13
Without some type of organization, your forms can be very hard to read.

To split these lines and make them more readable, you need to include the line break tag, <BR>, between them, as shown in Listing 13.13.

Listing 13.13  LB2.HTM--Line Breaks Within Forms

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Line Break Tags</H1>
<FORM>
      Name: <INPUT NAME="name" SIZE="30">
      <BR>
      E-Mail Address: <INPUT NAME="email" SIZE="40">
</FORM>
</BODY>
</HTML>

Adding the <BR> tag between the two fields forces the browser to wrap the field to the next line, regardless of the width of the screen. The result of Listing 13.13 is shown in Figure 13.14.


NOTE: The wrapping feature of HTML can work for you to help keep a form small in size. If you have several multiple-choice items that could take up huge amounts of space on your form, you can try to keep them small and let them wrap closely together on the page.

If you're using the <SELECT> tag, the width of the pop-up menu on the screen is directly related to the words in the options to be selected. If you keep all the words small, you can provide a relatively large number of choices in a small area.


FIG. 13.14
The <BR> tag enables you to control the placement of form text.

Working with Large Entry Fields  If you're working with long text entry fields or perhaps with a <TEXTAREA> field, it's often easier to put the text just above the field and then separate the different areas with paragraph breaks. For example, if you have a text input line that is very long or a long field description, it doesn't work well to put them side by side. Also, if you want to leave a space for comments, it's easier--and looks nicer--to have the field description just above the comment area. This makes it appear that there's more space to write in. Listing 13.14 is an example of this sort of design. The result of this code is shown in Figure 13.15.

Listing 13.14  LARGE.HTM--Large Fields for Text Input

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Line Break Tags</H1>
<FORM>
      Please enter the new title for the message:<BR>
      <INPUT NAME="name" SIZE="40">
      <HR>
      Your comments:<BR>
      <TEXTAREA ROWS="6" COLS="70"></TEXTAREA>
</FORM>
</BODY>
</HTML>

FIG. 13.15
Using the line break tags enables you to put a label just above the field.


NOTE: Most browsers automatically wrap a large field to the next line, treating it like an image. Because you don't know how wide (or narrow!) the client screen is, take steps to ensure the form will look as you want. If, for example, you want the field to be on the next line, put in a <BR> tag to make sure it will be!

Using the Preformatted Text Tag to Line Up Forms  A common sight on many forms is simple text entry fields aligned haphazardly. A great trick for aligning text fields is to use the <PRE> tag. This ensures that some spaces appear before the field.


CAUTION: If you're using the <PRE> tags to line up fields, don't use any other HTML tags inside that area. Although the tags won't show up, they'll ruin the effect of lining everything up perfectly.

Listing 13.15 is an example of an entry form that uses line breaks only. The result of this code is displayed in Figure 13.16.

Listing 13.15  PRE1.HTM--Form Fields Not Aligned by Default

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Using PRE tags</H1>
<FORM>
      Name: <INPUT TYPE="text" NAME="name" SIZE="50"><BR>
      E-Mail: <INPUT TYPE="text" NAME="email" SIZE="50"><BR>
      Street Address: <INPUT TYPE="text" NAME="street1" SIZE="30"><BR>
      <INPUT TYPE="text" NAME="street2" SIZE="30"><BR>
      City: <INPUT TYPE="text" NAME="city" SIZE="50"><BR>
      State: <INPUT TYPE="text" NAME="state" SIZE="2"><BR>
      Zip: <INPUT TYPE="text" NAME="zip" SIZE="10">
</FORM>
</BODY>
</HTML>

FIG. 13.16
These fields were organized with line breaks only, so they align haphazardly.

If you space things out and use the tags for preformatted text, you can create a very nice looking form. Listing 13.16 is an example of aligning fields by using the <PRE> tag, which produces the layout shown in Figure 13.17.

Listing 13.16  PRE2.HTM--Aligning Form Fields with Preformatted Text

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Using PRE tags</H1>
<FORM>
      <PRE>
      Name:           <INPUT TYPE="text" NAME="name" SIZE="50">
      E-Mail:         <INPUT TYPE="text" NAME="email" SIZE="50">
      Street Address: <INPUT TYPE="text" NAME="street1" SIZE="30">
                      <INPUT TYPE="text" NAME="street2" SIZE="30">
      City:           <INPUT TYPE="text" NAME="city" SIZE="50">
      State:          <INPUT TYPE="text" NAME="state" SIZE="2">
      Zip:            <INPUT TYPE="text" NAME="zip" SIZE="10">
      </PRE>
</FORM>
</BODY>
</HTML>


CAUTION: Make sure you keep the size of the fields smaller than the general browser, or your lines will wrap off the screen. If an input field has to be large, you can use a line break to put the field on its own line.

FIG. 13.17
The layout of the preformatted text is organized and easy to follow.


TROUBLESHOOTING: When I set up the preformatted text, it doesn't come out aligned in my HTML document! Why doesn't it match up? In some text editors, the width of each letter on the screen isn't the same. If you're creating HTML documents with a text editor or word processor, make sure you use a monospaced font such as Courier New (each character, including spaces, takes up exactly the same amount of space). That should solve the problem.

Using HTML Tables to Line Up Forms  Another way to line up form fields is to place them in an HTML table. This can produce an effect similar to using preformatted text but, because you are using regular HTML rather than preformatted text, you can also include other HTML constructs within the form. So, by using a table rather than preformatted text to align your form, you're also able to include images, hypertext links, or other HTML elements as part of the form. Listing 13.17 is an example of the entry form shown in Figures 13.16 and 13.17, formatted using an HTML table. The result of this code is displayed in Figure 13.18.

Listing 13.17  TABLE.HTM--Aligning Form Fields with Tables

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Using HTML Tables</H1>
<FORM>
      <TABLE>
            <TR><TD>Name:</TD><TD><INPUT TYPE="text"
            NAME="name" SIZE="50"></TD></TR>
            <TR><TD>E-Mail:</TD><TD><INPUT TYPE="text"
            NAME="email" SIZE="50"></TD></TR>
            <TR><TD>Street Address:</TD><TD><INPUT TYPE="text"
            NAME="street1" SIZE="30"></TD></TR>
            <TR><TD></TD><TD><INPUT TYPE="text" NAME="street2"
            SIZE="30"></TD></TR>
            <TR><TD>City:</TD><TD><INPUT TYPE="text" NAME="city"
            SIZE="50"></TD></TR>
            <TR><TD>State:</TD><TD><INPUT TYPE="text" NAME="state"
            SIZE="2"></TD></TR>
            <TR><TD>Zip:</TD><TD><INPUT TYPE="text" NAME="zip"
            SIZE="10"></TD></TR>
      </TABLE>
</FORM>
</BODY>
</HTML>


TIP: Some people use browsers, particularly text-only ones, that don't support tables. If you use tables with your forms, consider including an alternate page without tables for these folks. See Chapter 11, "Formatting Content with Tables," for alternatives for browsers that don't support tables.

Using Paragraph Marks to Separate Form Sections  If you have a large form with different sections, it's handy to separate those sections. The paragraph container tag, <P>...</P>, provides a way of adding some space without making the delineation so hard that it appears to be another form. Note that Web browsers also allow you to use the <P> opening tag without the </P> closing tag to give identical results.

FIG. 13.18
HTML tables text can be combined with forms to enable the alignment of different form fields.

For example, a simple comment form might have places for a name and an e-mail address, but these might not be a required part of the form. In this case, separate the comment part of the form from the area that's optional. It's also possible to make it more obvious by simply making some comments in the form, such as a small heading titled Optional. A simple comment form with optional Name and E-Mail fields can have the code shown in Listing 13.18.

Listing 13.18  P.HTM--Using Paragraphs to Improve Spacing

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Using &lt;P&gt; tags</H1>
<FORM>
      <PRE>
      <I><B>Optional:</B></I>
      Name:   <INPUT TYPE="text" NAME="name" SIZE="50">
      E-Mail: <INPUT TYPE="text" NAME="email" SIZE="50">
      </PRE>
      <P>
      Your comments:<BR>
      <TEXTAREA ROWS="6" COLS="70"></TEXTAREA>
</FORM>
</BODY>
</HTML>

Listing 13.18, using both <PRE> tags and line break tags, produces the layout shown in Figure 13.19. A similar effect can be achieved by using a table instead of preformatted text.

FIG. 13.19
Combining preformatted and wrapped areas can make your form very easy to use.

Using List Tags

There are a few occasions when line breaks and paragraph tags can't set up the form exactly as you'd like. At these times, list tags can provide just the right look! The best use of list tags is for indenting and numbering text.

Indenting Form Entries with Descriptive Lists  On the WWW, it's common to see order forms for merchandise. Finding the method of payment is a perfect use for descriptive list tags to lay out the choices. Indenting some items more than others makes the options obvious and easy to read.


NOTE: When you lay out lists, consider indenting the areas in your HTML documents that will be indented on-screen. This makes it easier to remember to finish with the descriptive list tag, </DL>.

For example, Listing 13.19 shows how to separate a section of credit cards from the rest of the payment methods. The result of this code is shown in Figure 13.20.

Listing 13.19  LIST1.HTM--Organizing Forms Using a Descriptive List

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Descriptive List Tags</H1>
<FORM>
      <DL>
      <DT>How would you like to pay for this?
      <DD><INPUT NAME="pay" TYPE="radio" VALUE="cash" CHECKED>Cash
      <DD><INPUT NAME="pay" TYPE="radio" VALUE="check">Check
      <DD><INPUT NAME="pay" TYPE="radio" VALUE="debit">Debit Card
           <DL>
           <DT>Credit Card
           <DD><INPUT NAME="pay" TYPE="radio" VALUE="mc">Mastercard
           <DD><INPUT NAME="pay" TYPE="radio" VALUE="visa">Visa
           <DD><INPUT NAME="pay" TYPE="radio" VALUE="disc">Discover
           <DD><INPUT NAME="pay" TYPE="radio" VALUE="ae">American Express
           </DL>
      </DL>
</FORM>
</BODY>
</HTML>

FIG. 13.20
Descriptive lists make the breakdown of choices obvious.

Using Ordered Lists to Number Fields  It's easy to display a numbered list if you use the ordered list tag, <OL>. Listing 13.20 uses the <OL> tag to automatically number the fields. The result of this code is shown in Figure 13.21.

Listing 13.20  LIST2.HTM--Organizing Forms by Using an Ordered List

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Ordered List Tags</H1>
<FORM>
      What are your three favorite books?
      <OL>
      <LI><INPUT NAME="1st" SIZE="20">
      <LI><INPUT NAME="2nd" SIZE="20">
      <LI><INPUT NAME="3rd" SIZE="20">
      </OL>
</FORM>
</BODY>
</HTML>

FIG. 13.21
Using ordered lists, you can reorder fields without retyping all those numbers!

Check Box and Radio Button Layouts

Check boxes and radio buttons can provide a great deal of simple yes or no input. They can also be some of the hardest parts of a form to understand if they're not laid out correctly. There are three straightforward methods of layout: setting up the check boxes and radio buttons in a line horizontally, using a list to order them vertically, or setting them up in a grid pattern.

Setting Up Check Boxes or Radio Buttons in a Line  Probably the easiest method of layout is listing the check boxes in a line horizontally (see Listing 13.21). It has the benefits of being very simple to set up, relatively compact on the browser, and easy to understand. The only caution is to make sure there aren't too many items for one line. The intent of the form might not be obvious if you let check boxes wrap unintentionally. The result of Listing 13.21, which specifies a horizontal line of radio buttons, is shown in Figure 13.22.

Listing 13.21  BUTTON1.HTM--Organizing Forms, Check Boxes, and Radio Buttons

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Checkboxes and Radio Buttons</H1>
<FORM>
      What size would you like?<BR>
      <INPUT NAME="size" TYPE="radio" VALUE="sm">Small
      <INPUT NAME="size" TYPE="radio" VALUE="md">Medium
      <INPUT NAME="size" TYPE="radio" VALUE="lg">Large
      <INPUT NAME="size" TYPE="radio" VALUE="x">X-Large
      <INPUT NAME="size" TYPE="radio" VALUE="xx">XX-Large
</FORM>
</BODY>
</HTML>

FIG. 13.22
This method works well for check boxes too!


TIP: When creating a Web page with a line of buttons, check it with your Web browser set to the width of a 640x480 screen to make sure your line doesn't wrap.

Lists of Check Boxes  When the choices get more complex than a simple line selection, it's best to forgo compactness and spread out the choices in a list, as specified in Listing 13.22. The result of using a descriptive list in this code is shown in Figure 13.23.

Listing 13.22  BUTTON2.HTM--Organizing Forms Buttons by Using Lists

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Checkboxes and Radio Buttons</H1>
<FORM>
      <DL>
      <DT>What machines do you work on?
      <DD><INPUT NAME="mac" TYPE="checkbox">Macintosh
      <DD><INPUT NAME="pc" TYPE="checkbox">IBM Compatible PC
           <DL>
           <DT>UNIX Workstation
           <DD><INPUT NAME="sun" TYPE="checkbox">Sun
           <DD><INPUT NAME="sgi" TYPE="checkbox">SGI
           <DD><INPUT NAME="next" TYPE="checkbox">NeXT
           <DD><INPUT NAME="aix" TYPE="checkbox">AIX
           <DD><INPUT NAME="lin" TYPE="checkbox">Linux
           <DD><INPUT NAME="other" TYPE="checkbox">Other...
           </DL>
      </DL>
</FORM>
</BODY>
</HTML>

Making a Grid  The most complex method for displaying check boxes is in a grid. Using tables, you can space out the display to create a grid effect (see Listing 13.23). You can also create a grid of radio buttons by substituting radio for checkbox in the <INPUT> tags. The result of setting up the grid in Listing 13.23 is shown in Figure 13.24.

Listing 13.23  GRID.HTM--Creating a Grid of Buttons by Using Tables

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Checkboxes and Radio Buttons</H1>
<FORM>
      What combinations?
      <TABLE>
            <TR><TD></TD><TD>Red</TD><TD>Blue</TD></TR>
            <TR><TD>Small</TD><TD><INPUT NAME="sr" TYPE="checkbox"></TD>
                              <TD><INPUT NAME="sb" TYPE="checkbox"></TD></TR>
            <TR><TD>Medium</TD><TD><INPUT NAME="mr" TYPE="checkbox"></TD>
                               <TD><INPUT NAME="mb" TYPE="checkbox"></TD></TR>
            <TR><TD>Large</TD><TD><INPUT NAME="lr" TYPE="checkbox"></TD>
                              <TD><INPUT NAME="lb" TYPE="checkbox"></TD></TR>
      </TABLE>
</FORM>
</BODY>
</HTML>

FIG. 13.23
Complex choices are often easier to understand in a list format.

Multiple Forms in a Document

It's quite possible to put multiple forms in a single document; it often makes the document more concise and easier to understand. An example of using multiple forms is a document with a number of different methods for searching. From one form, you can choose to do a search from any of a number of locations by having each <FORM> point to a different search method.


TIP: Also consider using multiple forms when your form is too large to fit on one or two screens; this makes it easier for your readers to use the form.

When including multiple forms in a document, visibly separate them to make them easier to understand. A common way to break up a form is to use the horizontal rule tag, <HR>, or a wide image that looks like a horizontal rule in an <IMG> tag. Put line breaks before and after the tags. For example, Listing 13.24 shows how to separate three forms by using <HR> tags to break them up. The result of this code is shown in Figure 13.25.

FIG. 13.24
Grids provide a very intuitive method of making a choice.

Listing 13.24  MULTIPLE.HTM--Using Multiple Forms in a Single HTML Document

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Multiple Forms in a Document</H1>
<FORM>
      What size would you like?<BR>
      <INPUT NAME="size" TYPE="radio" VALUE="sm">:Small
      <INPUT NAME="size" TYPE="radio" VALUE="md">:Medium
      <INPUT NAME="size" TYPE="radio" VALUE="lg">:Large
      <INPUT NAME="size" TYPE="radio" VALUE="x">:X-Large
      <INPUT NAME="size" TYPE="radio" VALUE="xx">:XX-Large
      <P>
      <INPUT TYPE="submit">
</FORM>
<HR>
<FORM>
      <TABLE>
            <TR><TD>Name:</TD><TD><INPUT TYPE="text" NAME="name"
            SIZE="50"></TD></TR>
            <TR><TD>E-Mail:</TD><TD><INPUT TYPE="text" NAME="email"
            SIZE="50"></TD></TR>
            <TR><TD>Street Address:</TD><TD><INPUT TYPE="text"
            NAME="street1" SIZE="30"></TD></TR>
            <TR><TD></TD><TD><INPUT TYPE="text" NAME="street2"
            SIZE="30"></TD></TR>
            <TR><TD>City:</TD><TD><INPUT TYPE="text" NAME="city"
            SIZE="50"></TD></TR>
            <TR><TD>State:</TD><TD><INPUT TYPE="text" NAME="state"
            SIZE="2"></TD></TR>
            <TR><TD>Zip:</TD><TD><INPUT TYPE="text" NAME="zip"
            SIZE="10"></TD></TR>
      </TABLE>
<P>
<INPUT TYPE="submit">
</FORM>
<HR>
<FORM>
      <DL>
      <DT>How would you like to pay for this?
      <DD><INPUT NAME="pay" TYPE="radio" VALUE="cash" CHECKED>Cash
      <DD><INPUT NAME="pay" TYPE="radio" VALUE="check">Check
      <DD><INPUT NAME="pay" TYPE="radio" VALUE="debit">Debit Card
           <DL>
           <DT>Credit Card
           <DD><INPUT NAME="pay" TYPE="radio" VALUE="mc">Mastercard
           <DD><INPUT NAME="pay" TYPE="radio" VALUE="visa">Visa
           <DD><INPUT NAME="pay" TYPE="radio" VALUE="disc">Discover
           <DD><INPUT NAME="pay" TYPE="radio" VALUE="ae">American Express
           </DL>
      </DL>
      <P>
      <INPUT TYPE="submit">
</FORM>
</BODY>
</HTML>

FIG. 13.25
By using horizontal rules to break up the multiple forms in this document, the intent of the form is easily apparent.


TROUBLESHOOTING: I put two forms in one document, but I only see one. Why aren't both showing up? Check to make sure you finished one form before beginning another. If you didn't include the </FORM> tag to stop the first form, the second <FORM> tag is just ignored.

Combining Forms with Tables

As discussed earlier in this section, forms can be used very effectively with HTML tables, allowing more control of the positioning of different fields. Listing 13.25 shows an address entry form that uses a table to align the different fields. The resulting Web page is shown in Figure 13.26.

Listing 13.25  TABLE2.HTM--Combining Forms and Tables

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>More HTML Tables and Forms</H1>
<FORM>
      <TABLE>
            <TR><TD ALIGN=RIGHT>Name:</TD>
               <TD COLSPAN=4><INPUT TYPE="text" NAME="name" SIZE="40">
            </TD></TR>
            <TR><TD ALIGN=RIGHT>Street Address:</TD>
               <TD COLSPAN=4><INPUT TYPE="text" NAME="street1" SIZE="40">
            </TD></TR>
            <TR><TD ALIGN=RIGHT>City, State, Zip:</TD>
               <TD><INPUT TYPE="text" NAME="city" SIZE="30"></TD><TD>,</TD>
               <TD><INPUT TYPE="text" NAME="state" SIZE="2"></TD>
               <TD><INPUT TYPE="text" NAME="zip" SIZE="15"></TD></TR>
      </TABLE>
</FORM>
</BODY>
</HTML>

This idea can be taken even further, including other form elements such as check boxes or radio buttons, to allow the user more input options. A further refinement of the address entry form, allowing the user to input both a home and business address and specify which is preferred, is shown in Listing 13.26--the corresponding Web page is shown in Figure 13.26.

FIG. 13.26
The capability of tables to position items side by side and align them in many different ways makes them a natural for use with forms.

Listing 13.26  TABLE3.HTM--More on Combining Forms and Tables

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>More HTML Tables and Forms</H1>
<FORM>
      <TABLE>
            <TR><TH ALIGN=LEFT COLSPAN=5>HOME ADDRESS</TH><TD><EM>Preferred? 	     </EM></TR>
            <TR><TD ALIGN=RIGHT>Name:</TD>
               <TD COLSPAN=4><INPUT TYPE="text" NAME="name" SIZE="40"></TD>
               <TD ALIGN=CENTER><INPUT TYPE="radio" NAME="pref" VALUE="home"> 	       </TD></TR>
            <TR><TD ALIGN=RIGHT>Street Address:</TD>
               <TD COLSPAN=4><INPUT TYPE="text" NAME="street1" SIZE="40"></TD> 	     </TR>
            <TR><TD ALIGN=RIGHT>City, State, Zip:</TD>
               <TD><INPUT TYPE="text" NAME="city" SIZE="25"></TD><TD>,</TD>
               <TD><INPUT TYPE="text" NAME="state" SIZE="2"></TD>
               <TD><INPUT TYPE="text" NAME="zip" SIZE="15"></TD></TR>
            <TR><TD COLSPAN=6><HR></TD></TR>
            <TR><TH ALIGN=LEFT COLSPAN=5>BUSINESS ADDRESS</     TH><TD><EM>Preferred?</EM></TR>
            <TR><TD ALIGN=RIGHT>Name:</TD>
               <TD COLSPAN=4><INPUT TYPE="text" NAME="name" SIZE="40"></TD>
               <TD ALIGN=CENTER><INPUT TYPE="radio" NAME="pref" VALUE="bus"></TD></TR>
            <TR><TD ALIGN=RIGHT>Street Address:</TD>
               <TD COLSPAN=4><INPUT TYPE="text" NAME="street1" SIZE="40"></TD> </TR>
            <TR><TD ALIGN=RIGHT>City, State, Zip:</TD>
               <TD><INPUT TYPE="text" NAME="city" SIZE="25"></TD><TD>,</TD>
               <TD><INPUT TYPE="text" NAME="state" SIZE="2"></TD>
               <TD><INPUT TYPE="text" NAME="zip" SIZE="15"></TD></TR>
      </TABLE>
</FORM>
</BODY>
</HTML>

FIG. 13.27
HTML tables allow you to combine many different form fields and position them logically.

One final refinement of the address entry form (see Figure 13.28) substitutes different submit buttons for the radio buttons, shown in Figures 13.26 and 13.27. This allows the user to enter the information on the form and then specify which is the preferred address by his choice of submit button. Specifying a NAME attribute for the submit button enables the choice of button to be determined, as shown in Listing 13.27.

Listing 13.27  TABLE4.HTM--Another Example of Forms and Tables

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>More HTML Tables and Forms</H1>
<FORM>
      <TABLE>
            <TR><TH ALIGN=LEFT COLSPAN=5>HOME ADDRESS</TH>
                <TD ALIGN=CENTER><EM>Preferred?</EM></TR>
            <TR><TD ALIGN=RIGHT>Name:</TD>
               <TD COLSPAN=4><INPUT TYPE="text" NAME="name" SIZE="40"></TD>
               <TD ALIGN=CENTER><INPUT TYPE="submit" NAME="home" VALUE="Home">
            </TD></TR>
            <TR><TD ALIGN=RIGHT>Street Address:</TD>
               <TD COLSPAN=4><INPUT TYPE="text" NAME="street1" SIZE="40">
            </TD></TR>
            <TR><TD ALIGN=RIGHT>City, State, Zip:</TD>
               <TD><INPUT TYPE="text" NAME="city" SIZE="25"></TD><TD>,</TD>
               <TD><INPUT TYPE="text" NAME="state" SIZE="2"></TD>
               <TD><INPUT TYPE="text" NAME="zip" SIZE="15"></TD></TR>
            <TR><TD COLSPAN=6><HR></TD></TR>
            <TR><TH ALIGN=LEFT COLSPAN=5>BUSINESS ADDRESS</TH>
               <TD ALIGN=CENTER><EM>Preferred?</EM></TR>
            <TR><TD ALIGN=RIGHT>Name:</TD>
               <TD COLSPAN=4><INPUT TYPE="text" NAME="name" SIZE="40"></TD>
               <TD ALIGN=CENTER><INPUT TYPE="submit" NAME="bus"
            VALUE="Business"></TD></TR>
            <TR><TD ALIGN=RIGHT>Street Address:</TD>
               <TD COLSPAN=4><INPUT TYPE="text" NAME="street1" SIZE="40">
            </TD></TR>
            <TR><TD ALIGN=RIGHT>City, State, Zip:</TD>
               <TD><INPUT TYPE="text" NAME="city" SIZE="25"></TD><TD>,
            </TD>
               <TD><INPUT TYPE="text" NAME="state" SIZE="2"></TD>
               <TD><INPUT TYPE="text" NAME="zip" SIZE="15"></TD></TR>
      </TABLE>
</FORM>
</BODY>
</HTML>

Final Notes on Form Layouts

When you're creating forms, it's always a good idea to keep the form on a single page. Further, because you can't control what browser someone uses to look at your pages, you need to observe some general guidelines, as follows:

FIG. 13.28
The options available for using forms with HTML tables are limited only by your imagination.

HTML 4.0 Forms Additions

As useful as HTML forms have been, they have suffered from a variety of shortcomings and limitations, ranging from a lack of hotkey support to their reliance on only two control buttons. With the release of the HTML 4.0 specification, all that has changed. Just about every feature requested by a feature-hungry public has been added to HTML 4.0 forms.


NOTE: As of this writing, the HTML 4.0 specification is brand new and neither Netscape Communicator nor Microsoft Internet Explorer support the all-new forms tags or attributes discussed in this section. So not only can't we show you example screens, we're also passing along a caution not to use these new tags and attributes until these browser programs add support for them.

New Tag Attributes

ACCESSKEY is a new attribute for use with the LABEL, A, and CAPTION tags. With it, you can define a single case-insensitive hotkey for activating a forms element. For example,

<LABEL ACCESSKEY="N">Name<INPUT TYPE="TEXT" NAME=USER></LABEL>

would create a text input field for inputting a name. When the page containing this form element is displayed, pressing the Alt+N key combination on the keyboard (Cmd+N on the Macintosh) would change the focus immediately to this field. The user could input her name without having to first select the field by clicking it with the mouse or stepping to it using the Tab key. As an indicator to the user, the "N" in the label "Name" is underlined.

The new DISABLED attribute for INPUT, TEXTAREA, SELECT, OPTION, OBJECT, LABEL, and BUTTON turns off an element and grays it out on the screen. (The element is also skipped when tabbing between elements.) It should be used when a form element is currently inappropriate or if you want to skip a field for some reason. Once DISABLED, the only way to turn an element back on is by using an associated script, such as JavaScript.


NOTE: It is not immediately clear in the HTML 4.0 specification just exactly what you need to do to make such changes dynamically via a script. Hopefully this will become known as HTML 4.0 is implemented in the major browsers.

The TEXTAREA tag and the INPUT tag's TEXT and PASSWORD types have a new READONLY attribute that can be used to prohibit user input in those fields. If you want to pass back some data that you've preset for a user, this is one way to do it. At the same time, you're making sure that data is known to the end user but is not modifiable by him. Again, you can use a script to change this state dynamically if you wish.

ONCLICK, ONFOCUS, ONBLUR, ONSELECT, and ONCHANGE are new attributes that function as placeholders for scripts that run when each of the indicated events occurs. The ONCLICK script runs when a mouse click occurs over an element, ONFOCUS when it becomes the input focus, ONBLUR when the focus moves away from the element, ONSELECT when chosen, and ONCHANGE when data in the field has changed. These exciting new attributes open up a world of new possibilities. Again, the specifics of their implementation await browsers that can interpret these new attributes.

Ever wanted to add those nifty pop-up ToolTips to your online forms? Now you'll be able to, thanks to the new TITLE attribute, which is available for use with all form input elements. Just specify TITLE="ToolTip Here" for any element.

Under HTML 3.2, there was no specified order for tabbing through elements. You hit the Tab key and the form's input focus advanced to whatever element was next in line by virtue of where it appeared in the HTML source. Unfortunately, that didn't always correspond to how those elements were arranged on the page. Now, thanks to the new HTML 4.0 TABINDEX attribute, that's going to change. It's easy to add--just add TABINDEX=n to each element, where n is equal to its place in the tabbing sequence. n must be an integer, but it can also have a negative value, which indicates that the element should be left out of the tabbing sequence. If two elements have the same TABINDEX value, they are assigned a tabbing sequence based on their order in the HTML source. Likewise, elements without a TABINDEX value are inserted into the sequence based on their source positions. As with HTML 3.2 forms, Shift+Tab moves the focus backwards through the order. Also, the Enter key is still used to activate an element that has the current focus.

New HTML 4.0 Forms Tags

In addition to the new attributes discussed in the previous section, HTML 4.0 also adds several new forms-related tags.

The new LABEL tag is used to associate a label with a form element. It is useful for creating a user interface for selecting a form control. For example,

<LABEL FOR=NAME>Name</LABEL>
Lots of stuff goes here...
<INPUT TYPE=TEXT NAME=YOURNAME ID=NAME>

Clicking the NAME link in the LABEL will jump the end user to the text input field with the ID of NAME, as indicated by the FOR=NAME attribute of the LABEL tag, and will shift the focus to that field.

The LABEL element supports the use of the ID, CLASS, LANG, and DIR attributes for internationalization and access for those with disabilities, and also makes use of the STYLE attribute for accessing style sheets. The new TITLE, DISABLED, ACCESSKEY, ONCLICK, ONFOCUS, and ONBLUR attributes discussed in the previous section are also all supported by LABEL.

HTML 3.2 forms supported only the Submit and Reset buttons. HTML 4.0 forms improve on this with a user-definable BUTTON element. The BUTTON tag works in conjunction with the new ONCLICK attribute, which associates clicking the button with executing a script. The DISABLED, TABINDEX, ONFOCUS, and ONBLUR attributes are also supported by BUTTON. <BUTTON> is a container, so it must be used with an associated </BUTTON> tag. In between, you can include any HTML to define the button contents, as in this example:

<BUTTON ONCLICK="script.scp">
<IMG SRC="ButtonImage.gif">
Click this button to do something great!
</BUTTON>

Finally, the new FIELDSET container is used in conjunction with a new CAPTION container to group form elements, as in this example:

<FIELDSET>
  <CAPTION ACCESSKEY=N TABINDEX=1>Name Fields</CAPTION>
  <LABEL ACCESSKEY=F><INPUT TYPE=TEXT NAME=FirstName>First Name</LABEL><BR>
  <LABEL ACCESSKEY=L><INPUT TYPE=TEXT NAME=LastName>Last Name</LABEL>
</FIELDSET>

Note that the CAPTION container is used to define a tab order (via the TABINDEX attribute) for the entire FIELDSET group. Likewise, the FIELDSET gets a separate ACCESSKEY than that given to each of the individual elements.

FIELDSET containers are nestable, but each should contain only a single CAPTION field.

FIELDSET also supports use of the new TITLE attribute.


Previous chapterNext chapterContents


© Copyright, Macmillan Computer Publishing. All rights reserved.