CSS Forms Sample

Main layout created using ___layouts. Font sizes normalized using Yahoo's YUI Fonts CSS.

Instructions:

• Include the CSS shown at the end of this document. A min-width is highly recommended, as is the appropriate IE 6 hacks.
• Use a fieldset tag around your form elements.
• The legend tag is optionat (but recommended).
• Wrap each "row" in your form in a <div class="row">. Set any background colors on this class.
• Wrap each label in a <div class="label">. Set the width to the label class as appropriate (25% in this example). Note that padding-top:0.1em in this class ensures the labels line up nicely with the fields.
• Give labels of required fields the required class (bolds the label by default).
• Wrap each form field in a <div class="field">. Set the width to 100% less the width of your div.label (75% in this example).
• Put a <span class="related"> around the label and input tags of your check box and radio controls. This set white-space:nowrap, ensuring boxes stay with labels.
• If you have a field for which you don't want a label on the left, add the class nolabel to its div tag. This will make it align with the left side of the fieldset.
• If you have changed the font size (such as by specifying body { font-size:80%; }, you will need to adjust the size of radio controls and checkboxes. Failing to do this could result in labels being misaligned with the controls. Simply adjust the with and height of the input[type="radio"] and input[type="radio"] selectors to a size relative to the font size change. For example, specifying font-size:80%; would require a width and height of 0.8em.