Home arrow Web Standards arrow Web Forms
WEB STANDARDS

Web Forms


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.)

Author Info:
By: Apress Publishing
Rating: 5 stars5 stars5 stars5 stars5 stars / 76
August 23, 2004
TABLE OF CONTENTS:
  1. · Web Forms
  2. · Method B: Tableless, but Cramped
  3. · The label E
  4. · Defining Style
  5. · tabindex Attribute
  6. · Styling Forms
  7. · Using label
  8. · Use fieldset to Group Form Sections
  9. · Three-dimensional legend

print this article
SEARCH DEVARTICLES

Web Forms
(Page 1 of 9 )

cederholmInteractivity 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>&nbsp;</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.

cederholm 

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.


blog comments powered by Disqus
WEB STANDARDS ARTICLES

- Mozilla Popcorn Maker 1.0 Makes Videos More...
- Completing a Configuration for Chrome and a ...
- Getting Connected with Firefox and Chrome
- Configuring Servers and Databases with Chrome
- Configuring Firefox for Chrome and a Server
- Designing the Elements of a Web Page
- Matching div heights with CSS and JavaScript
- Forms
- Get Down With Markup
- If I Said You Had a Beautiful Body...
- Web Standards in Dreamweaver Part 3
- Web Standards in Dreamweaver, Part 2
- Web Forms
- Making Lists Using XHTML
- Web Standards in Dreamweaver, Part 1

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials