How To Control Text Inside Search Forms

Top Tip: Click here to run a free scan for common PC errors

I discovered a new site today that has a very similar to approach to www.onetipady.com. Daily Blog Tips does what it says on the tin. Everyday a useful tip is given for bloggers.

I found the site while I was looking for a solution to something on this site that has been bothering me. I wanted to customise my search entry forms so that text would be displayed giving helpful instructions to users, that would disappear when they clicked in the box, without them having to delete it.

Luckily Daniel has given some very clear instructions on how to do this.

First off you need to find the code that controls your searchform. It should look something like this:

< input name="s" id="s" size="20" type="text" />

Now you will need to add three new arguments inside that line:

* value=”Text to be displayed here”
* onfocus=”if(this.value==this.defaultValue)this.value=’’;”
* onblur=”if(this.value==’’)this.value=this.defaultValue;”

The last two arguments are the two magical ones that make sure that the text you inserted will disappear once the user clicks on the input area, and also that it will reappear if the user clicks somewhere else.

By adding these two lines of code to your search form you will get the desired result, and your final line of code will look like this:

< input type="text" name="s" id="s" value="Text to be displayed here" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>

Read Related Posts

1. Reduce WordPress Spam By Creating Fake Comment Forms For Spam Bots
2. Search Inside YouTube Videos With PodZinger
3. Add NicEdit WYSWYG Text Editor To Your Site
4. Control Which Areas Of Your Site Are Indexed With A Robots.txt File

Subscribe To RSS Feed Updates (What is RSS??)