Forms (Page 1 of 6 )
Forms play an integral role on the Internet in allowing users to communicate and interact with websites. Forms are an important way for website owners to collect information from their visitors. There are many ways to handle forms markup -- but the best way is the one that will benefit both the user and the site owner. This article was excerpted from the book
Web Standards Solutions The Markup and Style Handbook, written by Dan Cederholm (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.
Let’s take a look at Figure 5-1 to see how Method A would appear in a typical visual browser.
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.
Method B: Tableless, but cramped <form action="/path/to/script" method="post">
<p>
Name: <input type="text" name="name" /><br />
Email: <input type="text" name="email" /><br />
<input type="submit" value="submit" />
</p>
</form>
Using a single paragraph and a few <br /> tags to separate the items is a passable solution—but could visually render a bit on the cramped side. Figure 5-2 shows how this would typically appear in a browser.
Figure 5-2. Method B as rendered in a browser
You can see that while we got away without using a table, it looks rather cramped and ugly. We also run into the problem of the form controls not lining up perfectly, as seen in Figure 5-2.
We could alleviate some of the crowdedness by adding some margins to the <input> elements using CSS like this:
input {
margin: 6px 0;
}
The preceding would add a 6-pixel margin to both the top and bottom of each <input> element (the name, e-mail, and submit controls), spacing out the elements as seen in Figure 5-3.
Figure 5-3. Method B with padding added to the input elements
While there’s nothing particularly wrong with Method B, there are a few adjustments we can make to build a better form. And those adjustments are evident in Method C. So let’s take a look.
 This article is excerpted 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. |
Next: Method C: Simple and more accessible >>
More Web Standards Articles
More By Apress Publishing
/ 14 
