Home arrow Web Standards arrow Page 4 - Web Forms

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

Web Forms - Defining Style
(Page 4 of 9 )

The simplest style we could add would be to easily remove the default indenting of <dd> elements within our form:

form dd {
margin: 0;

The preceding snippet of CSS would render our Method D example as viewed in Figure 5-7.


Figure 5-7. Definition list form example with <dd> margins removed

The table-like format of Method A could also be achieved by floating <dt> elements within our form:

form dd {
margin: 0;

form dt {
float: left;
padding-right: 10px;

By floating the <dt> elements to the left, the form controls contained in <dd> tags will align themselves to the right, as seen in Figure 5-8. You’ll notice that the form controls don’t line up with each other perfectly—but at the very least this illustrates that while it’s possible to use a <dl> tag to lay out a form, the layout doesn’t have to put each element on its own line.

In fact, because of the presence of the <dl>, <dt>, and <dd> elements—which are in addition to the form <label>  


Figure 5-8. Form layout with floated elements


We’ve looked at four different ways to mark up the same simple form, noting the pros and cons of each. It’s important to point out that the accessibility features that we added to Methods C and D could, of course, be easily added to the first two methods as well—and those methods would be better because of those added features.

Neither one of the methods that we’ve looked at here are necessarily miles ahead of the others in terms of a “best solution.” But it’s valuable to know your options—and what you can combine from all four to create better forms in your own projects.

Let’s recap the differences between the methods presented.

Method A:

  • Visually, it’s a nice, neat way to organize form controls and labels—especially for larger complex forms.
  • However, using a table for such a simple form seems a bit unnecessary.

Method B:

  • Simple markup will degrade nicely in text browsers and small-screened devices.
  • Visually, just using <br /> tags results in a cramped layout.

Method C:

  • Simple markup will degrade nicely in text browsers and small-screened devices.
  • Allows for labels and controls of different lengths without any “lining up” issues.
  • Contains an important accessibility feature (that could also be applied to the previous methods).

- 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 

Developer Shed Affiliates


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