Web Forms - Using label

[ganeshbala]

Using label

We have a few different options for customizing the size, face, and color of text that's contained within our form. And in another example of "using the markup you've been given," we'll utilize the <label> element to dress up the text.

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

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.