I don’t think this is the right approach.

Those who don’t know about labels will attempt to click on the form elements themselves. The label might increase the clickable area around the element, but that doesn’t mean you need to steer people towards using it. Labels should be an aid for reading forms & interacting with forms. By pushing their use for directly interacting with the form, you’re building up an expectancy for all forms to work the same across all websites and browsers. Obviously, this is not the case. On the other hand, clicking on form items can be expected to always work the same.

I guess I just don’t see any tangible benefits.

I believe Internet Explorer 7 does something similar to this out of the box. Hovering over form elements or their labels highlights the form element (although it doesn’t, I believe, highlight the label).

I don’t think IE7 does highlight the input control – at least not on the checkboxes i’ve just tried with.

I think this method has some very valid benefits for accessibility, especially for partially- or poorly-sighted users. From what i’ve read, screenreaders also often have problems visually locating labels with related controls, especially when the label doesn’t wrap the control.

It’s also worth noting that when resizing text using the browser, checkboxes and radio buttons don’t resize. Many people use this to make a site readable and an extra benefit is making links into bigger targets – labels then become a more important way of activating a control.

One unfortunate drawback is that Safari inexplicably doesn’t have selectable labels, though I recall hearing that it was coming. So, for Safari users you’re going to create visual feedback that is misleading. Otherwise some nice ideas here.

I’ll have to disagree with Nathan – I think this is a good approach. It terms of pushing people towards the label, or increasing expectancy for form function, these all depend on the choice of styling. Also highlighting the label when the form control has mouseover might help in this regard.

Garrett Dimon (www.garrettdimon.com) has the following to say on the subject of forms:

“There are many things worth investing time to develop and implement. Customising the look and feel of form fields is absolutely not one of them. This is especially true if the method involves JavaScript to change the appearance. Browser form fields may not be the prettiest things in the world, but people are used to and comfortable with them. It’s not surprising that the sites I come across with custom-designed forms often have significant usability problems.”

not my words!

ps. this site is great! I am still going through last years.

letimati: it seems like Garrett is talking about the customisation and styling of form fields, which is not the subject of this article.

Drew, like you said it’s not about changing the appearance of the form elements per se (for example, changing the style of a submit button so that it removes the bevels, the hover appearance etc, making it look less ‘buttony’). It’s more about making some kind of visual link between the two fields to make it clear that the text is ralted to a certain input and “hey look, it’s even clickable, see?”. That was the intention – to draw attention to the fact that if the form has a label, the text is clickable, not just the control itself.

However, I knew that this would have its detractors, just as people have issues with text resize widgets on a web page when it should really be the user agent itself that enables the user to do this.

I like the highlight function – I think it really enhances the relationship of the label and control.

I would, however, be concerned about the usability of the focus behaviour – really does seem to result in an unexpected user experience and takes one level of control (the click) out of the hands of the user. Those without great control of the mouse might find it difficult to select the correct control, accidentally selecting ajacent form fields.

But definitely an interesting approach to revealing functionality.

Regardless of the actual or perceived value to the idea, I like the out of the box thinking. Nice article.

With such markup as (see link below), label:hover allows easy highlighting of the relationship. Of course, it only works in modern browsers, but this little bonus is very easy to add and requires absolutely no javascript.

Actually, it even works when no for/id value pair is set, which is super-convenient for generated forms where no id-generating is done.

http://joeclark.org/book/sashay/serialization/Chapter12.html#li-2120

From the article: “…a preverbial shortcut…” Would that be a shortcut prior to the invention of verbs? ;-)