bl1nk

Part two – labelling, messaging and moving those evil legends

At the end of part one we had a form which tasted a lot like 1994. It has controls with labels all inside fieldsets but looks pants. There are a few simple steps in tidying up.

Legends

Legends are notoriously difficult to style. So I don’t even try. I wrap each legend in a span and style the span. It really works. This is particulary important for legends which are eventually going to be the visual equivalents of labels. These are legends for mult control groups such as a set of radio buttons.

Label text and required markers.

If a field must be completed we should tell our users. This is often done using an asterisk. Why? I have an interesting alternative to the ubiquitous and meaningless asterisk. I use the word “required”. Weird I know, but hey, it works and is WYWIWYG (what you write is what you get). To get these required markers to work, and allow separate styles for the label, required marker and error messages, I wrap the label text in a span and the required marker in another span. I also use the label as the required marker for scripting the validation.

This is overkill but is based on a trick I picked up from The Man in Blue. We eventually have something that looks a bit like this:
<fieldset>
<legend><span>About you</span></legend>
<div>
<label for='firstnameField' class='required'>
<span class='labelText'>First name:
<span class='requiredmarker'>(required)</span>
</span>
<input type='text' name='firstname' id='firstnameField' value=''>
</label>
</div>
</fieldset>


So far all this has done is make a mess of the markup without improving the form. Bare with me – we will get there.

Design classes

We need to add a few classes to labels and controls to hang our CSS from. If every browser supported attribute selectors we could omit some of these, but we live in a less than perfect world.

I like to set all text controls to a common width. However, there are some times when this is inappropriate (date of birth fields for example). So we need a class to apply to inputs which will have this common width. We will be making labels display as blocks, so we will also need a class to put radio and checkbox labels back to inline.

So now I have a whole pile of excess markup but a form which is usable, accessible and very flexibly stylable. The CSS then becomes a lot of fun, but that is for another instalment

Example – for a more complete example see Amnesty’s membership form

<fieldset>
<legend><span>About you</span></legend>
<div class="controlSet">
<label for='firstnameField' class='required'>
<span class='labelText'>First name:
<span class='requiredmarker'>(required)</span>
</span>
<input type='text' name='firstname' id='firstnameField' class='input' value=''>
</label>
</div>
<fieldset>
<legend><span class="labelText required">Required grouping</span></legend>
<div class="controlSet">
<input type='checkbox' name='subscribe' id='subscribeField1' value='1'> <label for='subscribeField'>Label 1</label>
<input type='checkbox' name='subscribe' id='subscribeField2' value='1'> <label for='subscribeField'>Label 2</label>
<input type='checkbox' name='subscribe' id='subscribeField3' value='1'> <label for='subscribeField'>Label 3</label>
</div>
</fieldset>
</fieldset>