Interactivity has always been an integral part of the Web, letting the user and site com-
municate through the exchange of information. Forms allow us to collect input from users
in an organized, predetermined fashion, and have always been sort of an “anything goes”
area when building websites. For instance, we’ll discover that marking up a form can be
handled in approximately 10,000 different ways. OK, perhaps not that many, but there are
several options to consider as well as steps that we can take to ensure our forms are struc-
tured in a way that’ll benefit both the user and site owner.
What are our options when marking up
a form?
Let’s take a look at four different ways to mark up the same, simple form—all of which
achieve similar results. We’ll go over each method and talk about the pros and cons that
are involved.
Method A: Using a table
<form action="/path/to/script" method="post">
<table>
<tr>
<th>Name:</th>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<th>Email:</th>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<th> </th>
<td><input type="submit" value="submit" /></td>
</tr>
</table>
</form>
Tables have long been used to mark up forms, and because of that frequent use, seeing
forms laid out in this particular way has become familiar to us: right- aligned text labels in
the left column, left- aligned form controls in the right column. Using a simple, two- column
table is one of the easiest ways to achieve a usable form layout.
Some could argue that a table isn’t necessary, while others believe that forms could be
considered tabular data. We’re not going to argue either side, but instead state that using
a table is sometimes the best way to achieve certain form layouts—especially complex
forms that involve multiple controls like radio buttons, select boxes, and so forth. Relying
solely on CSS to control the layout of complex forms can be frustrating, and often involves
adding extraneous <span> and <div> elements, with more code bloat than that of a
table.