Fordie’s Form System – a POSH way to mark up forms

Form layout is one area where designers have struggled to find a sensible way to replace tables with nice clean semantic xhtml + CSS.

In 2005 Andy Clarke demonstrated his approach to form layout at CSS for designers, He wraps the label around the input field, then put the actual label text in a span.

<label> label text<input type="text" /></label>

In the CSS he then sets the label to “display:block” and puts width on the spans. The list items effectively create rows spans columns.

This approach is fine when you only have two elements you want to appear on a line, however, when you start throwing other things into the mix (like required field markers or “help” links) you need a system that can handle more than two elements. This got me thinking…

In late 2005 I came up with a solution I call Fordie’s Form System (FFS).

FFS is based on the premise that a form is essentially a list of questions to which we need an answer, with label being the question and the input being the place for the user to answer it. That being the case, the obvious way to mark up the form (in my mind) is with lists.

I believe that as well as well as providing the structure to hold the form together, the lists add meaning to the markup – making FFS a POSH way to markup forms.