Many free themes or blog templates out there comes with default search forms that has empty field without any text in its input area. We believe this is fine, but you can see that many themes also have already started to put default text inside the search form field.It has already become a web 2.0 trends and not just being used in search forms but in other form fields also.
Why text inside search forms?
The text can actually help readers to identify the search area more easily, encouraging them to use it and even clarify the search process for non-experience users. Some examples of texts that you can include in the search box:
- search here
- To search, type and hit enter
- search this blog
How to do it
Simply locate where is search form code. It can be in sidebar.php, header.php depending on where it is located. Just find this line of code:
<input type="text" name="s" id="s" size="20"/>
Then replace the whole code above with this bunch of code:
<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;"/>
With a simple code above will give you a clickable, and then dissapearing text inside the search box, and replaced by the texts you typed. When you click on other side than the search box without typing any text, it will reappear again the default search text.
Then you can customize the looks of the font and its color by modifying or adding the suitable css stylesheet.
To get a nice search result, you can go to our previous post: