How To Add Placeholder Text Inside Any Search Box

So you want to add text inside your boring, old search form (a.k.a. search box). This javacsript will let you add a few words inside the search form. Those words are called “placeholder text.” The words will appear in the input field of the search form. When the input field of the search form is clicked because someone is going to begin typing in it, your placeholder text will disappear.

Some examples of useful placeholder text:

• Search here

• Type question here

• Search for help

• Search recipes

• Search articles

• Search poems

This task is done in two steps

Step 1

Add the following attributes to the text-type input field of your search form:

value="Search"  
onblur="if(this.value=='') this.value='Search';"
onfocus="if(this.value=='Search') this.value='';"

Notice the word “Search” is in that code 3 times. Change those 3 instances to whatever text you choose to display as your own placeholder text for your search form. But make sure the 3 instances match exactly. Don’t mess with the single or double quotation marks. Make sure you don’t have another value attribute conflicting with this new one.

Step 2

Add the following attribute to the submit button of your search form. The submit button is actually a submit-type input field. It will being with an input tag, but of type="submit" rather than type="text". Once you find your submit button, add the following attribute, as is, inside your input tag.

onclick="this.form.searchword.focus();"

Don’t modify the code in step 2. That’s it.