What is it?
Called clear on focus, watermark text, or hint text, this function in essence combines labels with field values. Hint text appears directly inside an input element. Clicking on the text clears it out, allowing the user to enter their data.
When to use it?
Most commonly this technique saves space, allowing you to identify a control using the same space that is available for input.
This technique can also be used along with labels to provide hints, additional instructions, or examples.
When not to use it?
The key quality of this function is that user input replaces the field label or description, consequently once a user enters data they will no longer be able to see the hint or watermark. Therefore this is not suitable for forms that pre-populate any information, or forms more than 1 or 2 fields long where labels are not also used.
HTML5 includes a new placeholder tag that performs this same function, but don’t expect it to work in Internet Explorer. Consequently this works well for the hint type application, but should not be used as a substitute for labels without a fallback.
<input placeholder="text" />
Notice that this works a little different, the text doesn’t actually vanish until you start typing.
If you’re using a lot of watermarks, or developing a template, you might want to incorporate a jQuery plugin that allows for a more standardized, modular and feature laden approach. A plugin called jQuery Watermark does the job nicely.