Show and hide text in a form field using onclick and onblur

A great way to reduce the need for a field heading/title is to include the informative text within the text field. This is most commonly used in search fields, where there’s often no further available room to include a heading alongside or above.

So from having a black search field like this:

You can have one with some explanatory text contained. This will disappear as the user clicks in the box and should they not enter any text will reappear again when they click elsewhere on the page.

To recreate this version use the following code:

<input type=”text” value=”search the site…” onclick=”value=”” onblur=”if(this.value==”) this.value=’search the site…’;”  name=”search” id=”search” />

You can then style your form field by using background images, removing the field border, adding an image instead of the standard submit button and make your very own lovely search field.