This is as days pass by, by Stuart Langridge

And this is labelify: a jQuery plugin to add labels to your textboxes, written , and concerning JavaScript and the DOM, Howtos

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.

Comments

Olly

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.

MindstormsKid

Hi, I tried this on http://teamterastorm.googlepages.com/contactus_form_test.html , but it won't work. Do you know why?

sil

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

MindstormsKid

Thanks, it works now!

Krijn Hoetmer

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!

sil

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.

Krijn Hoetmer

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

sil

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!

Krijn Hoetmer

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! :)

Garrett LeSage

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!

Nick

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 :(

sil

Nick: it's not meant to do that. Can you show me an example?

Nick

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?

Pip

Thanks for the plug-in Stuart. Just what the doctor ordered!

sil

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

Krijn Hoetmer

Of course with a question mark at the end :)

sil

Krijn: I don't think it should be so used; placeholder is for examples, not instructions, and labelify puts instructions in the field...

Krijn Hoetmer

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.

sil

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");

}

});

Glenn

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.

manuel

your pluuugin is sooo awesome thanks a lot seriously, it saved my day...

Trip

I love your plugin and have been using it a fair bit recently, however, I'm having a slight problem.

When I use it with the jquery form validation plugin and the validation fails, the labels don't repopulate so they're all left blank. How would I make them repopulate?

sil

Trip: I don't know without taking a detailed look at it and some custom work to fix it. Drop me an email and we can talk about rates and so on.

Daniel

Great Plugin! Many thanks!

@Trip: I'm stuck with the same problem... Have you found a working sollution to this?

This website belongs to Stuart Langridge. Contact details are available. Don't eat yellow snow. Valid HTML5, at least in theory, except for the bits that aren't because I'm that futuristic that I'm ahead of the spec, oh yes. HTML5 help from Bruce Lawson, among others. Fonts from the superb FontSquirrel. End.