A few days ago, a colleague of mine – someone I have known for several years, who has been doing web design for several years and harks back from the early days of ZDNet – was running through a prototype I had put together for some user testing. As with a lot of prototypes, there was an element of ‘smoke and mirrors’ to make things look like they were working.
One part of the form included a yes/no radio button, and selecting the Yes option would, in the real and final version of the form, reveal some extra content. Rather than put too much JavaScript in the prototype, I took a preverbial shortcut and created a link which I wrapped around the text next to the radio button – clicking on that link would cause the form to mimic a change event on the radio button. But it wasn’t working for him.
Why was that? Because whereas I created the form using a <label> tag for each <input> and naturally went to click on the text rather than the form control itself, he was going straight for the control (and missing the sneaky little <a href> I’d placed around the text). Bah! There goes my time-saver.
So, what did I learn? That a web professional who has used the Internet for years had neither heard of the <label> tag, nor had he ever tried clicking on the text. It just goes to show that despite its obvious uses, the label element is not as well known as it rightfully deserves to be. So, what’s a web-standards-loving guy to do? Make a bit more bleedin’ obvious, that’s what!
The Mouse Pointer Trick
OK, this is the kind of thing that causes some people outrage. A dead simple way of indicating that the label does something is to use a snippet of CSS to change the default mouse cursor to a hand. It’s derided because the hand icon is usually used for links, and some would argue that using this technique is misleading:
label {
cursor: pointer;
}
This is not a new idea, though, and you didn’t come here for this. The point is that with something very simple, you’ve made the label element discoverable. But there are other ways that you can do this that are web standards friendly and won’t upset the purists quite so much as the hand/pointer trick. Time to wheel in the JavaScript trolley jack …
Our Old Friend AddEvent
First things, first, you’ll need to use the addEvent function (or your favourite variation thereof) that Scott Andrew devised and make that available to the document containing the form:
function addEvent(elm, evType, fn, useCapture)
{
if(elm.addEventListener)
{
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent)
{
var r = elm.attachEvent('on' + evType, fn);
return r;
}
else
{
elm['on' + evType] = fn;
}
}
Finding All Your Labels
Once you’ve linked to the addEvent function (or embedded it on the page), you can start to get your JavaScripting fingers a-flexing. Now, what I’m suggesting you do here is:
- Identify all the
labelelements on the page by working your way through the DOM - Find out the value of the
forattribute for eachlabelthat you uncover - Attach a behaviour or two to each of those
labelelements – and to theinputthat thelabelrelates to (identified with the for attribute)
Here’s the technobabble version of the steps above:
function findLabels()
{
var el = document.getElementsByTagName("label");
for (i=0;i<el.length;i++)
{
var thisId = el[i].getAttribute("for");
if ((thisId)==null)
{
thisId = el[i].htmlFor;
}
if(thisId!="")
{
//apply these behaviours to the label
el[i].onmouseover = highlightRelationship;
el[i].onmouseout = hideRelationship;
}
}
}
function highlightRelationship()
{
var thisId = this.getAttribute("for");
if ((thisId)==null)
{
thisId = this.htmlFor;
}
this.className="showRel";
document.getElementById(thisId).className="showRel";
//if (document.getElementById(thisId).type=="text") document.getElementById(thisId).select();
}
function hideRelationship()
{
var thisId = this.getAttribute("for");
if ((thisId)==null)
{
thisId = this.htmlFor;
}
this.className="";
document.getElementById(thisId).className="";
}
addEvent(window, 'load', findLabels, false);
Using the above script, you can apply a CSS class (I’ve called it showRel) to the elements when you hover over them. How you want it to look is up to you, of course. Here are a few examples of the idea. Note: the design is not exactly what you’d call ‘fancy’, and in the examples there is one input that looks broken but it is deliberately moved away from the label it relates to, just to demonstrate that you can show the relationship even from afar.
- Background colour changes on hover
- Background colour change + mouse pointer trick
- Background colour change + mouse pointer trick + text selection
Hopefully you’ll agree that using an unobtrusive piece of JavaScript you can make otherwise ‘shy’ elements like the label reveal their true colours. Although you might want to tone down the colours from the ones I’ve used in this demo!
Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
13/12/2006
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.
Vote Helpful or Unhelpful
13/12/2006
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.
Vote Helpful or Unhelpful
13/12/2006
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).
Vote Helpful or Unhelpful
13/12/2006
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.
Vote Helpful or Unhelpful
13/12/2006
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.
Vote Helpful or Unhelpful
13/12/2006
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.
Vote Helpful or Unhelpful
13/12/2006
letimati: it seems like Garrett is talking about the customisation and styling of form fields, which is not the subject of this article.
Vote Helpful or Unhelpful
13/12/2006
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.
Vote Helpful or Unhelpful
13/12/2006
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.
Vote Helpful or Unhelpful
14/12/2006
Regardless of the actual or perceived value to the idea, I like the out of the box thinking. Nice article.
Vote Helpful or Unhelpful
17/12/2006
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
Vote Helpful or Unhelpful
18/12/2006
Interesting article, been thinking about doing a similar thing for a while but you’ve now saved me the bother of trying to code it. I definitely think it could help with form accessibilty, and will have a play to see how it can be done in a good looking way…
Rob.
Vote Helpful or Unhelpful
13/04/2009
From the article: “…a preverbial shortcut…” Would that be a shortcut prior to the invention of verbs? ;-)
Vote Helpful or Unhelpful
Impress us