Today we will talk about advanced practices in designing a search box to make your blog a better place for your readers. Designing search box with onfocus or placeholder attribute or property is not a complex thing. Choosing any attribute is your choice. These attributes make your search box live, attractive and more educating. These attributes are able to show text inside search box and this text disappears as you place cursor or start typing inside it.

Advance Search Box for Blogger

Custom Advanced Search Box for Blogger blogs

Onfocus Attribute:

This attribute is able to show text inside search box and text disappears as you place cursor inside it.

onfocus="if (this.value == "Type keyword here") {this.value = ""}" onblur="if (this.value == "") {this.value = "Type keyword here";}"

Placeholder Attribute:

This attribute is able to show text inside search box and text disappears as you start typing inside it.

placeholder="Type keyword here"

Simple search box in action

Simple search box code for Blogger

<form id="techprevue" action="/search" method="get"> <input search name="q" /> <input id="searchbutton" value="Search" type="submit" /></form>

Search Box using Onfocus Attribute

Search box using onfocus attribute in action

Search box code for onfocus attribute

<form id="techprevue" action="/search" method="get"> <input onfocus="if (this.value == &quot;Type keyword here&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Type keyword here&quot;;}" value="Type keyword here" name="q" /> <input id="searchbutton" value="Search" type="submit" /></form>

Search Box using Placeholder Attribute

Search box using placeholder attribute in action

Search box code for place attribute

<form id="techprevue" action="/search" method="get"> <input placeholder="Type keyword here" name="q" /> <input id="searchbutton" value="Search" type="submit" /></form>

I believe this tutorial will help you choose you wisely as per your design requirement.