HTML Form styling with Formall – part 1

One of the most painful jobs of front end development, I always found to be styling forms across different browsers. The CSS rules on how forms should be styled leave much to the imagination of browser vendors. So I’ve attempted to put together a style sheet that can take some of the work out of our hands. It is literally saving me hours of work every form I have to create.

How to style a good form

There are a lot of things to consider when designing a form. They must work well in different browsers. They must be clear and easy to understand, they must be accessible, etc. To deal with all of these different problems I decided to create a style sheet that will do the heavy lifting for us, leaving us to focus on the things that matter.

Form design starts at the HTML level, not the CSS level. There are many ways in which this can be done. Common approaches are to use div elements, lists or even tables. Because there are so many different ways of doing HTML in forms, it is often difficult if not impossible to reuse CSS written in other projects.

At it’s core, Formall is a standardised way of writing forms in HTML. With more standardised HTML you can express what a form should be like, and have Formall render it for you with minimal effort. This means that whatever this standardised mark-up looks like, it has to be very expressive, without becoming overly complicated. So I’ve set the following goals for the project:

1. Forms must be accessible
2. Their designs must work across browsers
3. Common design patterns should be enabled
4. Forms must be user friendly
5. HTML must be semantic and human readable
6. New technologies should be encouraged

Structure of Formall

There are two main classes in Formall: formall and formlist. The formall class should be given to a container in which input elements are kept which need to be styled. I tend to just use the form element for this as this makes the most sense to me. The second class formlist, is used for styling double column or single column forms. A single column uses the ul (unordered list) element, where the double column formlist uses the dl (definition list) element.

Example one: Single column form list:

<form class="formall">
  <ul class="formlist">
    <li><label for="l1"><input id="l1" type="checkbox" />
      Label 1
    </label></li>
    <li><label for="l2"><input id="l2" type="checkbox" />
      Label 2
    </label></li>
  </ul>
</form>

Example two: Two column form list:

<form class="formall">
  <dl class="formlist">
    <dt> <label for="l1">Label 1</label>
    <dd> <input id="l2" type="text" /> </dd>
    </dt><dt> <label for="l2">Label 2</label>
    <dd> <input id="l2" type="text" /> </dd>
  </dt></dl>
</form>

Obviously this is very basic stuff. But that’s kind of the point. The above examples work without me having to worry about how things will align in different browsers (and trust me, those checkboxes can go very wonky). Simply by writing HTML in a more standardized way we can avoid having to even touch the CSS and get a form that works well.

Formall works well in all the important browsers:

• Firefox 2 and later
• Internet Explorer 6 and later
• Opera 9 and later
• Safari 5
• Google Chrome 9

In next article we’ll have a closer look at some common design patterns in forms, and how these are done with Formall and plain old semantic HTML.

Download Formall