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.
Posted by Olly on June 25th, 2008.
Hi, I tried this on http://teamterastorm.googlepages.com/contactus_form_test.html , but it won’t work. Do you know why?
Posted by MindstormsKid on June 25th, 2008.
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!)
Posted by sil on June 25th, 2008.
Thanks, it works now!
Posted by MindstormsKid on June 25th, 2008.
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!
Posted by Krijn Hoetmer on June 26th, 2008.
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.
Posted by sil on June 26th, 2008.
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..
Posted by Krijn Hoetmer on June 26th, 2008.
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!
Posted by sil on June 26th, 2008.
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! :)
Posted by Krijn Hoetmer on June 26th, 2008.
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!
Posted by Garrett LeSage on June 26th, 2008.
Great plugin. But if your page submits to itself and re-populates the form with the post data (when outputting the HTML), labelify still replaces populated fields with the label text.
Makes server-side validation a pain :(
Posted by Nick on April 1st, 2009.
Nick: it’s not meant to do that. Can you show me an example?
Posted by sil on April 1st, 2009.
Here’s a quick example of what I’m doing:
http://www.popcornwebdesign.co.uk/2009-04-02-labelify-test/
The page requires a valid postcode and valid email address. It submits to itself and performs the validation with server-side script, if the data is not valid, it redisplays the form with the fields populated – and in this situation it would be better if labelify didn’t replace the field contents with labels (unless the data is manually removed).
I realise I could avoid the issue by doing the validation on the client-side or with AJAX, but I’m retro-fitting the feature to an existing website, so thats not really an option.
Maybe you can see a way to solve this problem?
Posted by Nick on April 2nd, 2009.
Thanks for the plug-in Stuart. Just what the doctor ordered!
Posted by Pip on April 3rd, 2009.
Nick: the flaw with having labelify not replace after a submit, in your example, is that the user will have no idea what the fields mean; there’s no label. Clicking in the textfields does show the actual text they entered…
Posted by sil on April 15th, 2009.
Any ideas on how to use this together with the placeholder attribute.
Posted by Krijn Hoetmer on April 23rd, 2009.
Of course with a question mark at the end :)
Posted by Krijn Hoetmer on April 23rd, 2009.
Krijn: I don’t think it should be so used; placeholder is for examples, not instructions, and labelify puts instructions in the field…
Posted by sil on April 24th, 2009.
Huh, you mean like for your first example on http://www.kryogenix.org/code/browser/labelify/ ? :)
I think
placeholder=""is exactly what you’ve implemented with labelify. Safari and Chrome already support it that way, so in that case it doesn’t work too well together with labelify.Posted by Krijn Hoetmer on April 24th, 2009.
Krijn: true enough, heh. Labelify already can use the placeholder attribute by passing a custom function, though:
$(”input”).labelify({
text: function(input) {
return input.getAttribute(”placeholder”);
}
});
Posted by sil on April 24th, 2009.
If you also have the Prototype library loaded this fails. A simple find-replace of ‘$’ to ‘jQuery’ in jquery.labelify.js completely fixes the problem. It should still compress just as well, too.
Posted by Glenn on June 11th, 2009.