Enhancing Forms - HTML5 - page 168

usinG TabLes For ForM LayouT

For many years, web designers relied on the natural fit between forms and tables. A common layout
placed labels in one column of a table and their associated form controls in the next. Frequently, the
labels were right-aligned so that their connection to the adjacent controls were obvious. It's a very
tried-and-true technique, and one that works well even today.

The basic table structure is to provide a row for each label/form control pair and a final row for the
submit button. The key code aspect to remember is to place the entire table (or tables) within the
form, like this:
<form method=”post” action=”“>
<table>
<tr>
<td><label for=”Name”> Name:</label></td>
<td><input type=”text” name=”name” id=”Name” /></td>
</tr>
<tr>
<td><label for=”Email”>Email:</label></td>
<td><input type=”text” name=”email” id=”Email” /></td>
</tr>
<tr>
<td><label for=”Tel”>Telephone:</label></td>
<td><input type=”text” name=”tel” id=”Tel” /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type=”submit” value=”Submit” /></td>
</tr>
</table>
</form>

This approach, even without CSS styling, offers a very
neat form appearance, as shown in Figure 20-3. If
desired, you can add additional rows for a caption, sum-
mary, and details. Should you want to integrate a fieldset
and legend, it is recommended that multiple tables be
used.

Right-aligning the label text is a two-stage process. First,
you need to declare a custom CSS rule:
.labelText {
text-align: right;
padding-right: 3px;
}

FiGure 20-3

Next, you need to apply the .labelText class to the <td> tag for each of the cells that contain a
<label> tag. Here's the code with the appropriate classes applied:
<form method=”post” action=”“>
<table>
<tr>
<td class=”labelText”><label for=”Name”> Name:</label></td>