labelify: a jQuery plugin to add labels to your textboxes
A fairly common design pattern in web forms is to have some explanatory help text for a textfield appear inside the text field, and then remove it when the user clicks into that field. It has the benefit of putting the help precisely where the user’s looking.
Labelify is a jQuery plugin that does this for you, as simply as possible. It handles a number of corner cases, and it’s quite customisable if you need it to be, while still working as simply as possible out of the box.
Enjoy.
Thanks Stuart, this looks like a handy plugin.
I tried to implement something similar myself but ran into all sorts of issues with the various ways the browsers do their auto-complete thing.
2 hours later
Hi, I tried this on http://teamterastorm.googlepages.com/contactus_form_test.html , but it won’t work. Do you know why?
3 hours later
MindstormsKid: yep. You’re using $(”input[text]“) as a selector, which looks for input elements with an attribute named “text”. What you want is $(”:text”) or something similar — see http://docs.jquery.com/Selectors for details.
(This was wrong in my original writeup, and I’ve since changed it; thanks for the pointer!)
4 hours later
Thanks, it works now!
4 hours later
Nice! Just what I needed. Also very smart that it clears the label values on form submit. That should be reason number 4 in your ‘why use it’ list :)
And how about labelifying select elements like this as well? That’s a huge pita to do right now. Would it be easy to insert a temporary option, just like you do with a temporary value?
Thanks!
17 hours later
Krijn: labelifying select elements is easy from a code point of view but not from a UI point of view, because a selected entry in a dropdown has _two_ values: the text that’s shown in the dropdown and the value that’s sent to the server when the form is submitted. It’s certainly possible to imagine ways of getting two values from the title attribute or label or both, but the code you wrote would be annoying if it were generic enough to be used by everyone who might need it, so the library wouldn’t be very good.
17 hours later
Wouldn’t you only need one label value? The one that is shown in the dropdown when ‘nothing is selected’ (<option class=labelledClass>My label</option>), that’s removed on focus and put back when no option is selected? I’m probably missing something here :)
A quick try: http://krijnhoetmer.nl/zooi/js/labelify-select - only some bad UI in IE, but that’s to be expected..
18 hours later
Krijn: the problem is: what happens if someone submits the form without ever touching the select? You haven’t attached a value to the new option, so it’ll submit as blank…but that might not be what you want the default to be, and there’ll be no way of overriding that. I see your theory, though!
18 hours later
Ah, okay. I don’t think submitting a blank value is a problem, but you could throw in an extra setting, which holds the submitted value when nothing is selected (”" by default). I see you in September, though! :)
18 hours later
Hey Stuart!
I actually write my own jQuery plugin to do the exact same thing, and used almost exactly the same techniques as you used. It’s shockingly similar. After seeing yours via Planet GNOME, I decided to drop mine and switch to yours. (It works exactly the same a drop-in replacement, once I passed the option to use a different classname.)
My own git branch is at github now. I took the liberty to adapt your HTML page to text and include it as a README file (with a link at the top of the file)… and I also fixed a couple of minor semicolon bugs, too. If/when I find more bugs, I’ll commit them as well. (It’s better to work on a unified codebase than each having our own.)
My git branch is now located at:
http://github.com/garrett/jquery.labelify
Thanks for your version the plugin!
25 hours later