What are some tips for making solid web forms?
Creating a form is arguably the most annoying pure (x)HTML task. This article provides resources for standards based accessibility then looks into some research into the less quantitative sides of formdom.
Meeting Accessibility Standards
For the basic nuts and bolts of making an accessible form, you can’t go wrong with checking out the relevant section of the W3C’s HTML Techniques for Web Content Accessibility Guidelines 1.0. A much more enjoyable read is the extremely informative Accessible HTML/XHTML Forms series over at the The Web Standards Project. A key step is to associate (alm)ost every input element with a label. In the example below the label is for the input type with the same id as it.
<label for="searchbox">Search this Site:</label><input type="text" id="searchbox" value="search" size="16" onblur="if (this.value == '') {this.value = 'search';}" onfocus="if (this.value == 'search') {this.value = '';}" />
The onblur/onfocus is a clean cross browser way to have the placeholder text (which is mandatory in AA / Priority 2 WCAG) remove itself when the field is selected, saving the user from having to delete the default value in the box.
Design tools are increasingly becoming accessibility friendly, as evidenced by this walkthrough for creating accessible web forms in Dreamweaver 8. HTML Tidy does it best to automatically restructure and optimize code, and it never hurts to occasionally validate your site (focusing on Section 508 which is roughly equivalent to W3C WCAG – A/Priority 1) compliance. Two convenient sites to do this are Watchfire WebXACT and Cynthia Says.
Subjective Usability
Brian Crescimanno’s A List Apart article, Sensible Forms: A Form Usability Checklist is a very user-centric article that raises a number of interesting points about form construction and behaviour. Something the article didn’t touch was the relationship of label text to their fields.
Whether to right or left align text labels for form inputs is probably a decision that depends on context. Swapnonil Mukherjee has a very compelling argument (presented in textual, pictorial, and algebriac formats) that right aligned forms require less eye movement than left aligned ones. Luke Wroblewski comes to the conclusion that (essentially) while right aligned forms save time in relation to eye movement, that is offset by the extra effort it takes to process and sort label data in them. He then gives examples of different grid structures to show how to make it easier to associate a left aligned form label with its respective field.
If you do have form labels that vary in length and rewording them would impact content, or just plain prefer right-aligned forms, quirksmode shows how to code a fairly universally rendered right-aligned form.