Forms - Styling forms
(Page 5 of 6 )
Now that we have a nicely structured form, let’s uncover a few CSS techniques we can use to customize it visually.
Setting the width of text inputs Form controls can be tricky to deal with in their varying widths and heights that are dependent on browser type. In our form example, we haven’t specified a size for the text inputs and have left the width of these up to the browser’s defaults. Typically, a designer might specify a width using the size attribute, adding it to the <input> tag like this:
<input type="text" id="name" name="name" tabindex="1" size="20" />
Setting a size of "20" specifies the width of the text input box at 20 characters (and not pixels). Depending on the browser’s default font for form controls, the actual pixel width of the box could vary. This makes fitting forms into precise layouts a tad difficult.
Using CSS, we can control the width of input boxes (and other form controls) by the pixel if we wish. For instance, let’s assign a width of 200 pixels to all <input> elements in our form example. We’ll take advantage of the id that is assigned to the form, in this case thisform.
#thisform input {
width: 200px;
}
Now, all <input> elements within #thisform will be 200 pixels wide. Figure 5-9 shows the results in a visual browser.
Figure 5-9. Our example form with 200 pixel width applied to all <input> elements
Oops. The check box and submit button are also an <input> element, and therefore receive that same value. So instead of applying the width to all <input> elements, let’s use the IDs that we set for the “Name” and “Email” controls only.
#name, #email {
width: 200px;
}
Figure 5-10 shows the corrected results in a browser, with only the two text input boxes being 200 pixels wide.
Figure 5-10. Our form example with only text inputs at 200 pixels wide
Using <label> to customize fonts 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;
}
The results of this styling can be seen in Figure 5-11.
Figure 5-11. Our example form with styled <labels>
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;
}
 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. |
Next: No need to be redundant >>
More Web Standards Articles
More By Apress Publishing
/ 14 
