How can I implement Stack Overflow-like watermarks in forms?

Question

I remember seeing a tutorial somewhere that talks of how to style your input forms in a more “usable” way.

Essentially, you have a placeholder value and when you ent

Answer 1

You may want to start from this:

You should probably tweak the above to use JavaScript functions in such a way not to repeat your hint string three times, but I hope this can get you going in the right direction.

I also noticed that the "Join Now" forms at vark.com also set the cursor position to the start of the text box instead of leaving it at the end. This can be bit tricky to make it work cross-browser, but you may want to check the solution proposed in the following article by Josh Stodola:

• Setting Cursor Position in a Textbox or TextArea with Javascript