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

Poor Best

Rating:

/ 56

August 23, 2004

TABLE OF CONTENTS:

· Defining Style

· tabindex Attribute

· Styling Forms

· Using label

· Use fieldset to Group Form Sections

· Three-dimensional legend

I like the idea of using the <label> element to specifically style form text, primarily for one reason. I can see scenarios where we’d like the label to be called out differently from other text that may be included within the <form> tag. For instance, alternatively we could add styles to all paragraph tags that fall within our form with a unique style.

#thisform p {
font-family: Verdana, sans-serif;
font-size: 12px;
font-weight: bold; color: #66000;
}

This would style all text contained in paragraphs within our form with a bold, burgundy, Verdana 12-pixel font. But the same results can be achieved by applying those same rules to just <label> elements within our form like this:

#thisform label {
font-family: Verdana, sans-serif;
font-size: 12px;
font-weight: bold;
color: #66000;
}

The results of this styling can be seen in Figure 5-11.

cederholm

Figure 5-11. Our example form with styled

Why do I like this better? Let’s say that aside from labels, the form has additional instructions or text that is also contained within <p> tags. This additional text would inherit the same styles if we applied them to <p> tags within our form.

We could instead apply a generic style to all text within our form, and then use the label styling specifically for customizing form controls uniquely.

The CSS would go something like this:

#thisform {
font-family: Georgia, serif;
font-size: 12px;
color: #999;
}

#thisform label {
font-family: Verdana, sans-serif;
font-weight: bold;
color: #660000;
}

No need to be redundant

You’ll notice that we don’t have to repeat the font-size: 12px; rule in the #thisform label declaration. Since 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 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.

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.