form label inside using jquery, outside without

[I originally posted this on the jquery forum, but I realize that I'll have to figure out the right syntax for form_for anyway, so it makes sense to cross-post here...]

I'd like to be able to render forms, augmented by unobtrusive javascript that behave as follows:

When javascript is enabled, the label appears inside the text field and vanishes on focus. The JQuery infield plugin by Doug Neiner (http://fuelyourcoding.com/scripts/infield/) is a good example of this.

But when javascript is NOT enabled, the label appears on the outside, and not cleverly repositioned on the inside where it looks terrible. (Perhaps that's just a matter of different CSS styling?)

Pointers welcome TIA.

- ff

There's a great article on AListApart about this, from a few years back. Has a great Kevin Cornell illustration, too.

Basically, you want to make your page in (rendered) HTML precisely the way non-scripted clients will see it. Then, when you load the page in a scripted browser, you do all the following changes in the DOM to support your effect. That way, you're using JavaScript to set up the effect that only JavaScript can appreciate. It's a neat way to avoid presenting a page that a person (or bot) cannot enjoy.

In a nutshell, you rewrite the DOM to wrap each empty input field with a DIV position:relative, and move the label inside that DIV as a position:absolute child with sufficient z-index to appear above the input. Any non-empty fields get the same structural change, but their labels are hidden at page load so they don't cover the filled input. Next, you observe a click on the label to hide the label itself (and the natural browser behavior will bubble through to focus the input). Finally, you observe a blur on the input, and if the value is different than the default (nothing) you restore the label. Otherwise, it just remains hidden.

Walter