You may have noticed a small change in the Form Builder this week. You can now use 11 different styles for your web forms. A new stylesheet was kindly contributed by Patrick McNeil from Design Meltdown. The other additions are simple variations on the existing styles.

Here are some examples:

• “Black” theme with left aligned labels.
• “Black (alt)” theme with labels on top.
• “Bureaucrat (tooltip)” theme. To see the tooltip, click on the email field.

This update is a transition step toward a more flexible tool to manage the look&feel of your web forms. This tool will be available in the next release of the Form Builder later this year.

Feel free to leave a comment if you have any suggestions or problems with the look of your web forms. If you would like to contribute a stylesheet, please visit 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

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

Technorati Tags: CSS, Web Form