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:

blank search field

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.

search field with information text

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=”s” id=”s” />

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

  • Mayankjain111990

    thank you 

  • Thanks for the support!

  • dhirendra

    hello

    • dhirendra

      hiii