Label your form controls properly

In Label - the secret element, Robert Nyman points out how annoying it can be to use a site that does not make proper use of the label element to associate form controls with their labels.

I second that. Placing the cursor on a tiny radio button or checkbox can be tricky. However, if the corresponding text has been associated with the radio button or checkbox you can also click the text. Much easier, wouldn’t you say? Unfortunately that is one area where my favourite browser, Safari, falls short of the competition.

Oh, how I would love to have clickable form labels in Safari. Pretty please, give us clickable form labels soon!

On the subject of clickable labels: in the comments to Robert’s post the idea of using CSS to indicate that the label is clickable by turning the cursor into a pointer is discussed. While the intention is a good one, I’m not so sure I like the idea: it is very confusing in browsers like Safari and OmniWeb that don’t support clickable labels. The cursor changes to a pointer, but nothing happens when you click.

I think that in most cases, styling and behaviour of forms are best left to the browser and operating system defaults.

Posted on December 21, 2005 in Accessibility, Quicklinks, Usability

Comments

  1. December 21, 2005 by Kenneth

    I’m building a web app myself right now, and doing all of my testing in Safari. I completely agree that it would be awesome to have clickable form labels. I’m sure something could be hacked together in JavaScript if you feel that you simply must have that feature.

  2. December 21, 2005 by andr3

    I was just thinking about that, using Javascript to put focus on the associated form field. It’s a bit of overhead and I agree with Roger. It should be the browsers to implement these basic UI patterns.

  3. December 21, 2005 by Johan Boström

    I don’t know if it’s appropriate to post code here, but here’s a quickfix for the Safari browser. Tested only in Safari 2.02, but I’d be surprised if it won’t work in Safari 1.x.

    function activateFormControl ( controlId ) {
    document.getElementById( controlId ).focus();
}
function activateLabels () {
    labels = document.getElementsByTagName( "label" );
    for ( labelIndex = 0; labelIndex < labels.length; labelIndex++ ) {
        labels[ labelIndex ].onclick = function () {
            activateFormControl( this.getAttribute( "for" ) );
        }
    }
}
window.onload = activateLabels;

    html:

    <label for="input1">Input 1:
<input name="input1" id="input1" type="input" value="" />
</label>

    Ofcourse, this require that you use the for attribute inside the label element.

  4. December 21, 2005 by gerben

    what about checkboxes and the like. shouldn’t it be something like this (UNTESTED):

    function activateFormControl ( controlId ) {
  var control = document.getElementById( controlId );
  if ( control.getAttribute('type') == 'checkbox' || control.getAttribute('type') == 'radio' ) )
    control.checked = !control.checked;
  else
    control.focus();
}

    By now however browserdetection is needed since this code would ‘break’ none safari browsers.

  5. December 21, 2005 by Roger Johansson (Author comment)

    I think maybe we should spend more time and energy on convincing Apple to make labels clickable than on writing JavaScripts to emulate it. But that’s just me ;-).

  6. December 21, 2005 by FataL

    I have one more thought. In my opinion it’s bad idea to use pointer cursor type when mouse over a label. It really messed up with links behaviour.

  7. December 22, 2005 by Douglas Clifton

    I did not know that Safari doesn’t support clickable labels! Wow, that needs fixing for sure. I also, when appropriate, like to change the cursor to indicate an element has some action/behavior property.

  8. December 22, 2005 by zcorpan

    Don’t change my cursor! In fact, I’ve written style rules in my user style sheet to keep the default cursor for elements like LABEL, ABBR, etc.

    Also see bug 3244.

  9. December 22, 2005 by Andy

    Internet Explorer will choke on getAttribute(‘for’) however something like this should work

    activateFormControl(this.getAttribute(‘htmlfor’) || this.getAttribute(‘for’));

    Tested in IE 5.01+ and recent versions of Opera and Firefox, but not in safari ;-)

  10. December 22, 2005 by zcorpan

    Andy, just use .htmlFor.

  11. December 22, 2005 by Andy

    Neat. For some reason I thought htmlFor only existed in IE. I guess it’s time for me to remove some needless hackery from a couple of scripts :-)

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.