24 ways

to impress your friends

Revealing Relationships Can Be Good Form by Ian Lloyd

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:

  1. label {
  2. cursor: pointer;
  3. }
  4. Source: /code/revealing-relationships-can-be-good-form/1.txt

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:

  1. function addEvent(elm, evType, fn, useCapture)
  2. {
  3. if(elm.addEventListener)
  4. {
  5. elm.addEventListener(evType, fn, useCapture);
  6. return true;
  7. }
  8. else if (elm.attachEvent)
  9. {
  10. var r = elm.attachEvent('on' + evType, fn);
  11. return r;
  12. }
  13. else
  14. {
  15. elm['on' + evType] = fn;
  16. }
  17. }
  18. Source: /code/revealing-relationships-can-be-good-form/2.txt

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:

Here’s the technobabble version of the steps above:

  1. function findLabels()
  2. {
  3. var el = document.getElementsByTagName("label");
  4. for (i=0;i&lt;el.length;i++)
  5. {
  6. var thisId = el[i].getAttribute("for");
  7. if ((thisId)==null)
  8. {
  9. thisId = el[i].htmlFor;
  10. }
  11. if(thisId!="")
  12. {
  13. //apply these behaviours to the label
  14. el[i].onmouseover = highlightRelationship;
  15. el[i].onmouseout = hideRelationship;
  16. }
  17. }
  18. }
  19.  
  20. function highlightRelationship()
  21. {
  22. var thisId = this.getAttribute("for");
  23. if ((thisId)==null)
  24. {
  25. thisId = this.htmlFor;
  26. }
  27. this.className="showRel";
  28. document.getElementById(thisId).className="showRel";
  29. //if (document.getElementById(thisId).type=="text") document.getElementById(thisId).select();
  30. }
  31.  
  32. function hideRelationship()
  33. {
  34. var thisId = this.getAttribute("for");
  35. if ((thisId)==null)
  36. {
  37. thisId = this.htmlFor;
  38. }
  39. this.className="";
  40. document.getElementById(thisId).className="";
  41. }
  42.  
  43. addEvent(window, 'load', findLabels, false);
  44.  
  45. Source: /code/revealing-relationships-can-be-good-form/3.txt

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.

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!

About the author

Ian Lloyd Ian Lloyd founded Accessify.com, a web accessibility site, back in 2002 and has been a member of the Web Standards Project since 2003, where he is part of the Accessibility Task Force. He has written or co-authored a number of books on the topic of standards-based web design/development, most recently co-authoring on Pro CSS for Apress. He lives in Swindon, UK, a place best known for its 'Magic Roundabout' and Doctor Who's Billie Piper. (It's not all bad, though.)

Your comments

  1. § Daniel:

    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.

  2. § Nathan de Vries:

    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.

  3. § pauldwaite:

    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).

  4. § Richard Rutter:

    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.

  5. § Adam Hopkinson:

    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.

  6. § letimati:

    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.

  7. § Drew McLellan:

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

  8. § Ian Lloyd:

    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.

  9. § James Gollan:

    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.

  10. § Jeff L:

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

  11. § Goulven Champenois:

    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

  12. § Rob Lewis:

    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.

Commenting is closed for this article.

24 ways: day 13