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 22 Creating 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.

In this chapter, you learn how to do the following:

Use line breaks to make a form easier to read
Mix forms and lists
Mix forms and tables
Create logical layouts for check boxes and radio buttons
Put multiple forms in one HTML document

Using Line Break Tags

When you mark up 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 22.1.

Listing 22.1 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 fig. 22.1).

Fig. 22.1

Without some types 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 22.2.

Listing 22.2 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 22.2 is shown in figure 22.2.

Fig. 22.2

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

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 popup menu on the screen is directly related to the words in the options to be selected. If you keep it all small, you can provide a relatively large number of choices in a small area.

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 22.3 is an example of this sort of design. The result of this code is shown in figure 22.3.

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

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

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 that 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 very common sight on many forms are 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.

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 22.4 is an example of an entry form that only uses line breaks. The result of this code is displayed in figure 22.4.

Listing 22.4 PRE1.HTM-Form Fields are 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. 22.4

These fields were organized only with line breaks, 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 22.5 is an example of aligning fields using the <PRE> tag, which produces the layout shown in figure 22.5.

Listing 22.5 PRE2.HTM-Aligning Forms 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>

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

Fig. 22.5

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 (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 it 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 22.6 is an example of the entry form shown in figure 22.4 and figure 22.5, formatted using an HTML table. The result of this code is displayed in figure 22.6.

Listing 22.6 TABLE.HTM-Aligning Forms 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>

Fig. 22.6

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

Some people use browsers, particularly text-only ones, do not support tables. If you use tables with your forms, consider including an alternate page without tables for these folks.

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.

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 22.7.

Listing 22.7 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 22.7, using both <PRE> tags and line break tags, produces the layout shown in figure 22.7. A similar effect can be achieved using a table instead of preformatted text.

Fig. 22.7

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 the indenting and numbering of text.

Indenting Form Entries with Descriptive Lists

On the WWW, it's common to see order forms for merchandise. Finding out 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.

When I lay out lists, I indent the areas in my 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 22.8 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 22.8.

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

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 22.9 uses the <OL> tag to automatically number the fields. The result of this code is shown in figure 22.9.

Listing 22.9 LIST2.HTM-Organizing Forms 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="3nd" SIZE="20">
</OL>
</FORM>
</BODY>
</HTML>

Fig. 22.9

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 is listing the check boxes in a line horizontally (see Listing 22.10). 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 22.10, which specifies a horizontal line of radio buttons, is shown in figure 22.10.

Listing 22.10 BUTTON1.HTM-Organizing Forms Checkboxes 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. 22.10

This method works well for check boxes too!

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 won't be wrapped.

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 22.11. The result of using a descriptive list in this code is shown in figure 22.11.

Listing 22.11 BUTTON2.HTM-Organizing Forms Buttons 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>

Fig. 22.11

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

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 22.12). You can also create a grid of radio buttons by substituting radio for check box in the <INPUT> tags. The result of setting up the grid in Listing 22.12 is shown in figure 22.12.

Listing 22.12 GRID.HTM-Creating a Grid of Buttons 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. 22.12

Grids provide a very intuitive method of making a choice.

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.

Also consider using multiple forms when your form would be too large to fit on one or two screens, to make 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 in an <IMG> tag. Put line breaks before and after the tags. For example, Listing 22.13 shows how to separate three forms by using <HR> tags to break them up. The result of this code is shown in figure 22.13.

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

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

Troubleshooting

I put multiple 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 will just be 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 22.14 shows an address entry form that uses a table to align the different fields. The resulting web page is shown in figure 22.14.

Listing 22.14 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>

Fig. 22.14

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

This idea can be taken even further, including other form elements such as checkboxes 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 to specify which is preferred, is shown in listing 22.15-the corresponding web page is shown in figure 22.15.

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

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

One final refinement of the address entry form substitutes different submit buttons for the radio buttons shown in figures 22.14 and 22.15. This allows the user to enter the information on the form, and then specify which is the preferred address by their choice of submit button. Specifying a NAME attribute for the submit button enables the choice of button to be determined.

Listing 22.16 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>

Fig. 22.16

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

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:

If your form is very short, keep it under 14 lines. This ensures that it will fit on one page in most browsers. It won't always work, but it does create a compact page that's easy for most people to see. A good trick for keeping the pages compact is using <SELECT> tags with the size set to one (to show a popup menu) or set to three or four (for a small scrolling window for multiple choices) instead of large numbers of check boxes and radio buttons.
If your form is large (more than two pages on any browser), don't put the <SUBMIT> or <RESET> buttons in the middle of the form. If you do, someone reading the form might not continue beyond those buttons and might miss an important part of the form.
Put the fields on your form in a logical order. This sounds obvious, but it's easy to forget.
Think about your forms well before you start creating them. If you know what choices you want to provide, it'll make your final layout much easier.