Henrik speaking at a conference

Hi, I’m Henrik Joreteg

Mobile web consultant, developer, and speaker

posts | twitter | email | hire | book | my startup: Xchart.com

Using Form Labels as Input Values with jQuery


I recently modified the comment forms on this site. Rather than having a separate label and input field, I used jQuery to put the contents of the label tags inside the inputs themselves.

This gives me the desired effect without impacting accessibility, since the label elements are still there. It simply means that if there is no Javascript support it still functions as expected. Another example of progressive enhancement at work.

Why waste space with labels? I think it gives a nice clean look. I’m thinking about refining this idea and bundling it into a jQuery plugin.

What do you think? Do you like it? Does it cause usability problems? I’m open to feedback. If you want to see the source code, you can check out the project on GitHub. Just be advised, I’m relatively new to jQuery and JavaScript, there may be better ways to do this… I’m all ears.

Update 3/6/2009: I revisited it to make it more generic. Also, it’s minified so it’s harder to review. But feel free to download it and test it. All you have to do to use it is to add it to is add the script and jQuery to your page and call “initMagicLabels();” it takes a jQuery selector to identify which form(s) you want it to apply to.

If you want it to apply to every form on the page, just pass it “form” as an argument. You can also do the id of the form for example:

initMagicLabels("#myForm"); 

or a class:

initMagicLabels(".myFormClass");

Enjoy!