Web Forms
(Page 1 of 9 )
There are many ways to mark up a form, including using a table or the label tag. Take a look at these methods and tips to ensure your forms are structured so they benefit the user and the site owner. Also covered are some CSS techniques to customize the forms. (From the book
Web Standards Solutions: The Markup and Style Handbook, by Dan Cederholm, from Apress, 2004, ISBN: 1590593812.)
Interactivity has always been an integral part of the Web, letting the user and site communicate 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 structured 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, etc. Relying solely on CSS to control the layout of complex forms can be frustrating, and often involve adding extraneous <span> and <div> tags, with more code bloat than that of a table.
Figure 5-1. Method A as rendered in a browser
You can see that by using a table, the labels and form elements line up nicely. For such a simple form, though, I would probably opt to avoid the table altogether, in favor of something that requires less markup. Unless this particular layout is crucial to the visual design of the form, using a table here isn’t necessary. There are also a few accessibility concerns we could address—and we will, while looking over the next two methods.
 This chapter is from Web Standards Solutions: The Markup and Style Handbook, by Dan Cederholm (Apress, 2004, ISBN: 1590593812). Check it out at your favorite bookstore today.
Buy this book now. |
/ 41 
