Search box with hiding text

While surfing through many blogging resource websites I found many tutorials that explained how to create a search box with default text inside the input but that text didn’t hid itself whenever the input was clicked for typing.

But recently I came across the website of one of our reader’s jdsans which had this tutorial to create a search option with text hiding capability on clicking. The widget works perfect in HTML/JavaScript widget option but it doesn’t work in the template code area. But I removed that bug so this widget is perfect to work on both the places.

Unfortunately there are two different codes for both the above purposes.

1. If you want to install the search box in HTML/JavaScript widget use this code

<form id="searchThis" action="/search" style="display:inline;" method="get"> 

<input id="searchBox" name="q" size="20" type="text" value="Search This Blog...." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/> <input id="searchButton" value="Search" type="submit"/> 

</form>

2. If you want to use the search box in the template code use this one:-

<form id="searchThis" action="/search" style="display:inline;" method="get"> 

&lt;input id=&quot;searchBox&quot; name=&quot;q&quot; size=&quot;20&quot; type=&quot;text&quot; value=&quot;Search This Blog....&quot; onfocus=&quot;if(this.value==this.defaultValue)this.value=&#039;&#039;;&quot; onblur=&quot;if(this.value==&#039;&#039;)this.value=this.defaultValue;&quot;/&gt;

<input id="searchButton" value="Search" type="submit"/> 

</form>

In both the codes above 20 represents the box size and “Search this Blog…” represents the default text that will be seen in the input area. You can change both these values as you like.