How to put text inside search forms

Most blog templates come with search forms that have no text inside the input area. While this standard solution is fine, you might want to personalize your search form by adding a default text to it.

The text can help readers to identify the search area more easily, encourage them to use the search function or even clarify the searching process for non-experienced users. Here are some examples of texts that you can include on your box:

• Search
• Search here
• Search this blog
• To search, type and hit enter

Now lets clarify how to place the text inside the search form. The first thing you need to locate is the the search form code. WordPress users should be able to find it within the header.php or sidebar.php files, depending on where your search box is located. Once you find the code look for the a line similar to this one:

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

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 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. The 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;"/>