fordie’s Blog

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.

FFS Structure

Each group of label, input and related controls (for example help and validation) within the form is referred to as a “question”.

1. The Form tag goes around the whole form
2. Related questions are grouped using fieldsets
3. Lists hold the questions within the fieldset (you can use ordered on unordered lists)
4. Each question is contained in a list item (li) containing:
   • A label
   • An input
   • Usually one or more of the following:
     • A required field marker
     • A “help” link
     • Validation Errors indicator

Basic FFS mark-up

Here is an example of a form marked up in FFS

		<form action="/" method="post" name="ffsExample" id="ffsExample">
			<fieldset>
				<legend>Your Details</legend>
				<ul>
					<li class="alt">
						<label for="title">Title</label>
						<select name="title" id="title">
							<option value="1">Mr</option>
							<option value="2">Mrs</option>
							<option value="3">Miss</option>
							<option value="4">Ms</option>
						</select>
					</li>
					<li>
						<label for="firstName">First name</label>
						<input name="firstName" id="firstName" type="text" />
						<a href="/help/" class="help">help</a>
					</li>
					<li>
						<label for="surName">Surname</label>
						<input name="surName" id="surName" type="text" />
					</li>
					<li>
						<label for="contactTel">Contact Telephone Number</label>
						<input name="contactTel" id="contactTel" type="text" />
						<a href="/help/" class="help">help</a>
					</li>
					<li>
						<label for="eMailAddress">Email Address</label>
						<input name="eMailAddress" id="eMailAddress" type="text" />
					</li>
				</ul>
			</fieldset>
		</form>

And here’s the CSS for the layout

I’ve added comments to the CSS the explain what each rule does

		fieldset
		{	/* contains a list of related questions, you can have multiple fieldsets in a form */
			border:0;
			margin:0;
			width:100%;
			padding:0;
			clear:both;
		}
		fieldset ul
		{
			display:block;
			border:0;
			margin:0;
			padding:0;
		}
		fieldset li
		{	/* removes the bullet from & adds vertical space in between list items  */
			display:block;
			list-style-type:none;
			clear:both;
			margin:0.2em 0 0.2em 0;
			line-height:2em;
		}
		fieldset li label
		{	/* Sets the width of the labels */
			display:block;
			width:33%;
			padding:0.2em 0 0.2em 0;
			float:left;
		}
		fieldset li input, fieldset li select
		{	/* floats the inputs left to sit next to the labels */
			float:left;
		}
		fieldset li a.help
		{	/* positions your "help" links, you may also have required field markers or
			   validation messages that you need position within the li*/
			float:right;
		}

Variations on a theme

There are a couple of input types that need special treatment: radio & check boxes tend to have their labels wrapped round them. This means that we need to introduce a new element to contain “question text” and change the width of the labels. By adding a class to the li we can change the attributes off all the elements contained within

		<li class="radio">
			<span>Gender</span>
			<label><input name="gender" type="radio" value="Male" />Male</label>
			<label><input name="gender" type="radio" value="Female" />Female</label>
		</li>

The CSS for the radio class looks like this

		li.radio span
			{
			/* This span is only required if you want to put additional descriptive text in the first column*/
				display:block;
				width:33%;
				float:left;
			}
		li.radio label
		{
			width:auto;
		}

FFS is flexible and can handle many elements with in a list item. It can also display the form in a number of different ways simply by changing the CSS, for example:

• One question per row (using the CSS above will give this result)
• Two questions per row (set the width of the li to 50% and float left)
• One question per row, question above the input (set the label to 100% of the width of the li)

You can see implementations of FFS here*:

• Moreth>n
• Yorkshire Building Society

*These are not particularly clean implementations, they need a lot of extra classes thrown at them to accommodate the asp.net generated html that the application produced.

---

I have been planning this article for a long time, I’ve had it in draft form for over a year but I’ve only recently discovered a way to get it into the blog with the markup intact.I hope you find it useful.