I had a phone conversation with Russ recently. He was surprised by a form on the Amnesty site. So I thought it might be worth an explanation.
Just so you know though, I am fundamentally a minimalist. I don’t like excessive design and excess mark up makes me quiver. I also think the mark up in these forms is a bit excessive.
Part one is about the markup of a form. I will base this on a rather complex example, that of Amnesty’s membership form. This is because this form has all my common building blocks in one form.
Basic controls
First of all, create your form and controls without any extraneous mark up. Text controls get wrapped in their labels, though I don’t do this with radios or checkboxen. I also place label text before the control except for radios and checkboxen where they go after the input.
Example 1: two fields with labels
<label for='nameField'>Label <input type='text' name='name' id='nameField' value=''></label>
<input type='checkbox' name='subscribe' id='subscribeField' value='1'> <label for='subscribeField'>Subscribe to our newsletter</label>
This is going to give you a form which is pretty much unusable as well as extremely ugly. The next step then is to break each control set (control and label) into separate lines. You could do this with CSS. However, this will result in a mangled mess for browsers withh CSS turned off. So here is my first bit of extraneous mark up. I wrap each control set in a div.
<div>
<label for='nameField'>Label <input type='text' name='name' id='nameField' value=''></label>
</div>
<div>
<input type='checkbox' name='subscribe' id='subscribeField' value='1'> <label for='subscribeField'>Subscribe to our newsletter</label>
</div>
The result of this is a long list of controls with no regularity of positioning of controls – still a bit of a mess but at least now a vaguely usable mess.
Joy of Sets
Each functional grouping in a form goes in a field set. There has to be a good reason to not use field sets, and forms which have more than one functional division really need them. What do I mean by functional division? A set of controls which map to a specific function or data set such as an addres set or credit card details. Grouped radio buttons or checkboxen also go in fieldsets. This breaks the form up into digestible chunks, provides a means for labelling parts of the form, and, with sets of radios/checkboxen, provides for a means of labelling the group as well as the individual items using the legend.
The fieldset should have a legend. I could rant for hours about legends. I really could. The legend is a cue to the purpose of that part of your form.
So we break the form up into sensible units and wrap each unit in a fieldset. I also use nested fieldsets where necessary. There are some issues with nested fieldsets and certain screen readers but they are more accessible than any other mechanism for labelling grouped radios.
What you have now is a more complex mess than before. Great if you can’t see but pretty horrible if you can. This is the final form, functionality wise, however, so it is where part one ends.
Another Hiatus
May 31st, 2009It seems irrelevent given the paucity of posts recently (and the removal of most of the old ones) but the entire bl1nk empire is on indefinite hiatus. Email probably won’t be responded to, though tweets probably possibly will.
Posted in Comment, News | Comments Off