Web Forms - Styling Forms

(Page 6 of 9 )

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

 

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.

Next: Using label >>
 

More Web Standards Articles
More By Apress Publishing

Comments On: Web Forms

· It is a very good tutorial, very didactical. It is presented in intuitive and clear...   >>> Post your comment now!