Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

Simple tricks for more usable forms

My second article for SitePoint has been published: Simple tricks for more usable forms. It examines a whole bunch of CSS and Javascript tricks for improving the usability of web based forms without impairing their accessibility to clients that don’t support those technologies. The article has already had some useful feedback on the forums, including the valuable observation that auto-selecting the contents of a form field when it receives the focus can have a negative effect on the usability of Unix browsers, where mouse buttons are frequently used for coping and pasting.

Posted 23rd January 2004 at 12:46 am

This is Simple tricks for more usable forms by Simon Willison, posted on 23rd January 2004.

View blog reactions

Next: Solving comment spam

Previous: Defending web applications against dictionary attacks

9 comments

  1. Simon, Unfortunately the example layout breaks in IE5 Mac, and in Safari it looks nice but the label focus code doesn't work. In Opera neither the label focus nor the "you haven't filled in this field" trick works, and the fields have an odd border to them. Where does this leave us? (Mozilla works nicely!) http://www.sitepoint.com/examples/simpletricks/for m-demo.html

    Hugh Todd - 23rd January 2004 07:23 - #

  2. There are browsers in which textbox.select() modifies the X primary selection? Someone better report that security hole to the authors of those browsers before someone gets 0wned by a page doing setTimeout(function(){textbox.select()}, 100) while they're working in a terminal window.

    Jesse Ruderman - 24th January 2004 11:41 - #

  3. Small typo there mate. for coping and pasting. Respectfully.

    webdroid - 25th January 2004 07:24 - #

  4. cursor: hand; is not allowed as per CSS2 specs http://www.w3.org/TR/REC-CSS2/ui.html#propdef-curs or

    Srijith - 26th January 2004 02:18 - #

  5. Nice article.

    Harry Fuecks - 27th January 2004 22:53 - #

  6. How do you properly set a label on a radio button so that clicking the label sets focus? Wrapping the label around the element doesn't work...

    Jemal - 27th January 2004 23:19 - #

  7. Jemal, the same way you always use a label when you're not using wrap-around: id and for. For example: <label for="myradio">Radio Button:</label><input type="radio" name="myradio" id="myradio" />

    Lach - 28th January 2004 01:09 - #

  8. What I should have mentioned is that according to the spec, each radio button shares the same "control name" (name or id). This means that a label for a specific radio button can only refer to the entire group. Your example with more than one button would be more like this:

    <label for="myradio">First Button:</label><input type="radio" name="myradio" id="myradio" value="1" />

    <label for="myradio">SecondButton:</label><input type="radio" name="myradio" id="myradio" value="2" />

    Which myradio is each label supposed to be assigned to? So what's to be done? Wrapping the labels like so:

    <label>First Button:<input type="radio" name="myradio" id="myradio" value="1" /></label>

    <label>SecondButton:<input type="radio" name="myradio" id="myradio" value="2" /></label>

    ...makes the click to focus trick work in Mozilla but not IE. Any ideas?

    Jemaleddin - 28th January 2004 15:50 - #

  9. fdsaf

    dfsa - 11th January 2006 23:46 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2004/01/23/moreUsableForms

A django site