Home arrow Web Standards arrow Page 6 - Forms


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

Author Info:
By: Apress Publishing
Rating: 4 stars4 stars4 stars4 stars4 stars / 19
March 09, 2005
  1. · Forms
  2. · Method C: Simple and more accessible
  3. · Method D: Defining a form
  4. · Summary
  5. · Styling forms
  6. · No need to be redundant

print this article

Forms - No need to be redundant
(Page 6 of 6 )

You’ll notice that we don’t have to repeat the font-size: 12px; rule in the #thisform label declaration. Since <label> elements are contained within #thisform, they will inherit that property. It’s always good practice to set shared rules at a high level, then override only those that are unique and necessary further down the element tree. This will save bytes of code, which, besides being a good thing, also makes for easier updates later on. If you wish to change the font-family for the entire form, you need only update one rule, rather than each place that the rule is repeated.

Imagine you’ve built an entire site that uses the Georgia font face exclusively. You’ve added the identical rule, font-face: Georgia, serif;, to 20 different CSS declarations. Your boss comes to you a week later and says, “The CEO hates serif fonts now. Change the site to Verdana.” Now you have to dig through all 20 rules and make your updates.

Alternatively, you could set the rule at a high level, say the <body> element—once. The entire document would inherit the Georgia font face, unless otherwise specified. Now, when your boss asks you to make the change, you can say, “No problem, it’ll be done in 2 minutes.” Or, you could keep the simplicity to yourself, tell him it’ll take you 2 hours, and then spend the extra time bidding on eBay items.

OK, of course, you should tell your boss the truth—they should know how valuable you are, saving their company time and code with your newly found solutions.

Use <fieldset> to group form sections

Using the <fieldset> element is a handy way of grouping form controls into sections. Additionally, adding a descriptive <legend> will, in most browsers, add a stylish border around the form controls that you’re grouping. Did I say stylish? Well, I happen to like the border, and with a little CSS, we can make it even more attractive.

First though, let’s take a look at what the markup looks like when creating field sets. We’ll add one to our example form:

  <form action="/path/to/script" id="thisform" method="post">
      <legend>Sign In</legend>
      <p><label for="name" accesskey="9" >Name:</label><br />
      <input type="text" id="name" name="name" tabindex="1" /></p>
      <p><label for="email">Email:</label><br />
      <input type="text" id="email" name="email" tabindex="2" /></p>
      <p><input type="checkbox" id="remember" name="remember"
tabindex="3" />
      <label for="remember">Remember this info?</label></p>
      <p><input type="submit" value="submit" tabindex="4" /></p>

Figure 5-12 shows us how our form appears in a typical browser with the <fieldset> and <legend> tags added, along with the CSS that we’re applying to the <label> elements. You’ll notice the stylish border that surrounds the form controls that fall within the <fieldset> tags, with the <legend> breaking the border at the top left of the box.

Figure 5-12.  Our form example with <fieldset> and <legend> added

The reason I call it “stylish” is because, for a default rendering, with no CSS added at all, it’s rather impressive. And it can get even more interesting when we choose to add a bit more customization, which we’ll do next.

You may also begin to see how useful <fieldset> could be for grouping different sections of a form together. For instance, if our example form was the first part of a larger form that had other groups contained in it, using <fieldset> to visually box those sections off is a semantically rich way to make our forms more organized and readable.

Adding style to <fieldset> and <legend>

We can customize the appearance of the default <fieldset> border and <legend> text with CSS just as easily as with any other element. First, let’s change the border’s color and width, and then we’ll modify the text itself.

To stylize <fieldset>’s border, making it a bit more subtle, we’ll use the following CSS:

  #thisform {
    font-family: Georgia, serif;
    font-size: 12px;
    color: #999;
  #thisform label {
    font-family: Verdana, sans-serif;
    font-weight: bold;
    color: #660000;
  #thisform fieldset{
    border: 1px solid #ccc;
    padding: 0 20px;

We also specify a 20-pixel margin on both the right and left, with zero margins on both top and bottom. Why zero margins? Because our form labels and controls are wrapped in <p> tags, there’s already enough padding at both the top and bottom.

Figure 5-13.  Our form example with <fieldset> styled

Three-dimensional <legend>

Finally, let’s apply some CSS to the <legend> tag, creating a three-dimensional box effect that appears connected to the border created by the <fieldset> element.

    font-family: Georgia, serif;
    font-size: 12px;
    color: #999;
  #thisform label {
    font-family: Verdana, sans-serif;
    font-weight: bold;
    color: #660000;
  #thisform fieldset {
    border: 1px solid #ccc;
    padding: 0 20px;
  #thisform legend{
    font-family: arial, sans-serif;
    font-weight: bold;
    font-size: 90%;
    color: #666;
    background: #eee;
    border: 1px solid #ccc;
    border-bottom-color: #999;
    border-right-color: #999;
    padding: 4px 8px;

As you can see, we’re doing several things here. First, we’re customizing the font, weight, and size of the <legend>. Second, for the 3-D effect, we’ve set the background to a light gray, and then we’ve added a single-pixel border around the whole <legend> that matches the border that we’ve used for the <fieldset> element. For the shading effect, we’ve overridden the border’s color on the bottom and right sides only, with a slightly darker gray.

Font-size percentages: Since we’ve previously set font-size: 12px; for the entirety of #thisform, to make the <legend> text smaller, we’ll just use a percentage.
Setting a font size at a high level and then using percentages further down the hierarchy makes for easier maintenance later on. Need to bump up the whole site’s font size? Just make a single update, and the percentages will change accordingly. In fact, ideally we’d set that initial size on the <body> element, and use percentages everywhere else. For this example, though, we’ve chosen to set it at the <form> level.

Padding was also adjusted to give the text in the box some breathing room. That’s it! Figure 5-14 shows the finished results with all of the CSS we’ve been adding throughout the chapter—all the while using our lean, mean, marked-up form.

Figure 5-14.  Our completed form example, styled with CSS

Wrapping up

There are many different ways to mark up forms—whether you use a table, a definition list, or simple paragraph tags to structure your form labels and controls, keep in mind the accessibility features that can easily be applied to any of the methods we’ve looked at in this chapter.

Attributes such as tabindex and accesskey can improve your form’s navigation. <label> elements with corresponding id attributes can ensure those browsing with assistive software can still interact with your forms.

Small, simple additions. Improved results.

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.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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