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.

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.

4 replies on “Show and hide text in a form field using onclick and onblur

  1. Avatar for dhirendra dhirendra says:

    hello

    1. Avatar for dhirendra dhirendra says:

      hiii

  2. Avatar for DESIGN IDEAS DESIGN IDEAS says:

    Thanks for the support!

  3. Avatar for Mayankjain111990 Mayankjain111990 says:

    thank you 

Leave a Reply

Your email address will not be published. Required fields are marked *