Home arrow Web Standards arrow Page 2 - 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 - Method B: Tableless, but Cramped
(Page 2 of 9 )

Method B: Tableless, but Cramped

FONT face="courier new, courier, mono" size=2><form action="/path/to/script" method="post">
  Name: <input type="text" name="name" /><br />
  Email: <input type="text" name="email" /><br />
  <input type="submit" value="submit" />

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.

Method C: Simple and more accessible
<form action="/path/to/script" id="thisform" method="post">   <p><label for="name">Name:</label><br />
  <input type="text" id="name" name="name" /></p>
  <p><label for="email">Email:</label><br />
  <input type="text" id="email" name="email" /></p>
 <p><input type="submit" value="submit" /></p>

I like Method C for several reasons. First off, for a simple form like this example, I find it convenient to contain each label and control in its own paragraph. When viewed unstyled, the default spacing of a paragraph should be enough to set the items apart in a readable way. Later, we could control precise spacing with CSS on <P> tags that are contained within our form.

We’ve even gone a step further and have given this form a unique, but boring, id="thisform". So, that precise spacing I was just referring to could go something like this:

#thisform p {
  margin: 6px 0;

Essentially, we’re saying that all <P> tags within this particular form should have top and bottom margins of 6 pixels—overriding the default margins that the browser imposes on paragraphs in the absence of any styling.

Another difference that Method C has over the previous two is that while each group (label and field) are wrapped in <P> tags, a <br/>
puts each on its own line. Using a <br/> to separate the items gets around the issue of fields not lining up perfectly due to text labels of different lengths.

Figure 5-4 shows how Method C would appear in a visual browser, with the CSS applied to each <P> tag as mentioned earlier.


Figure 5-4. Method C as viewed in a browser, with CSS applied to <P> tags

Aside from the visual aspects of Method C, let’s take a look at the most important advantages it has: in particular, an accessibility improvement.

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

- 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