HTML and CSS Reference
In-Depth Information
9.11.5. Good Form, Old Chap
At first glance, the basic rule of HTML and XHTMLcontent, not style-
seems in direct opposition to the basic rule of good interface designpre-
cise, consistent layout. Even so, it is possible to use some elements to
greatly improve the layout and readability of most forms.
Traditional page layout uses a grid of columns to align common ele-
ments within a page. The resulting implied vertical and horizontal
"edges" of adjacent elements give a sense of order and organization to
the page and make it easy for the eye to scan and follow.
HTML and XHTML make it hard, but you can accomplish the same sort
of layout for your forms. For example, you can group related elements
and separate groups with empty paragraphs or horizontal rules.
Vertical alignment is more difficult, but not impossible. In general, forms
are easier to use if you arrange the input elements vertically and aligned
to a common margin. One popular form layout keeps the left edge of
the input elements aligned, with the element labels immediately to the
left of the elements. This is done by using tables to place and align each
form element and its label. Here is our previous HTML form example,
with the labels placed in the first column and the corresponding ele-
ments in the second:
<form method=POST action="http://www.kumquat.com/demo">
<table border=0>
<tr valign=top>
<td align=right>Name:</td>
<td align=left><input type=text name=name size=32 maxlength=80>
</td>
</tr>
<tr valign=top >
<td align=right>Sex:</td>
<td align=left>
<input type=radio name=sex value="M"> Male <br>
<input type=radio name=sex value="F"> Female
</td>
</tr>
