New CSS Stylesheets in the Form Garden

I added a couple more CSS stylesheets to the Form Garden.

• timetrack is based on the look & feel of the time-tracker application.
• black is, guess what, a black variation of the stylesheet above.

Usage Remarks

All stylesheets in the Form Garden are free and should work with any web form.

The stylesheets are designed for forms built with semantic HTML (using tags like <label>, <fieldset>, <legend>, etc…)

The CSS also styles wForms related elements :

• .field-hint (instructions showing after a field)
• .errFld (field with a validation error)
• .errMsg (message reporting the validation error)
• .duplicateLink, .removeLink (links generated by wForms’ Repeat behavior)
• etc..

If you don’t use wForms, you can remove these definitions from the stylesheet.

CSS Conventions

Additionally, here are some of the conventions I adopted to allow for better control over the styling of a form.

• The label position, relative to the field, is indicated by the classes .preField and .postField. For instance:
  Field Label
  <label class="preField" ... >Field Label</label> <input type='text' ... />
  
  
  Field Label
  <input type='checkbox' ... /> <label class="postField" ... >Field Label</label>
• The primary action of a form, usually the submit button, is differentiated from less important actions (like cancel) by the use of the .primaryAction and .secondaryAction classes. The style for the .primaryAction class usually has a stronger visual weight (bolder or larger font for instance).

One last tip…

Vertical alignment of several fields can be achieved by using the width and inline-block CSS properties:
.preField {
display: -moz-inline-box; /* inline-block for firefox */
display: inline-block;
width: expression('7em'); /* Min-width for IE6 */
min-width: 7em;
}

Note: The CSS shown accounts for browser discrepancies

example

Label 1
Other Label
More Label

That’s it for today. If you’d like to contribute to the Form Garden, email me your stylesheet and any associated images. Thanks!

CSS, Web Form