This in an interesting concept from Jeremy Boles on using Javascript to enhance and improve form labels.
The concept is that you’ll see form inputs display into text in the input. Look to the right, in the Search box here. You’ll see I have “Search Here” pretyped in the field for you. Now this text will disappear when you click in the box so you can type, allowing for a type of “ghost” labeling to occur.
I use the input’s value attribute to get that text in the field, and some javascript to clear the field when the user focuses on the input ONLY IF the value matches “Search Here”.
Jeremy thinks that we can be more semantic. And I think he might be right, to a degree and in certain circumstances. He thinks that using the label tag for the input. By using unobtrusive javascript (that’s well commented) and placing special classes on the labels, he has acheived a very nice effect.
Now I’m a big advocate of labels. I think labels are a huge accessibility boon. I also think that once text is inside an input, it’s importance is lessened to the user. That they’re less likely to pay attention as to what it says.
I also don’t like that on his example when I focus on, say, website, I can forget what the field is requesting. I could tab through, leave a space, and not know what was required. This could be more of a problem with error messaging.
But on the other hand, knowing about these pitfalls gives you the ability to plan for and solve them if/when you use this effect. I do like this script, and do like the semantic nature of the solution. Defintely something to file away and keep in the bag o’tricks.
Tagged As Coding, Development, HTML, Javascript
Comments are Open (0)
Posted at 08:09 AM