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 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”
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;"/>
Browse all articles on the Blog Design category or check the recommended articles for you below:
23 Responses to “How to put text inside search forms”
Thanks, a much simpler explanation than I’ve seen elsewhere! Thanks also to Jennifer for the link to the List Apart article. Both approaches are useful, cheers.
Daily Good Tips
To earn money I think bloggers should use adsense for search
Good tutorial !!
such a good tutorial! thanks!
Thank you very much!
I seriously wanted it.
I want to know some more!
Could you please tell me the changes to me made if a text area is used instead of text box for this?
Thank you! Sheesh! I thought I’d never find out how to do this. May I ask a question: How do I style the text inside the box (i.e. make it a softer gray rather than the harsh black, as your example suggests).
Again, thank you for this simple direction.
How can i do the same thing but now with password field? and see the text?
Thanks and good work!
Wow…that was easy…im dancing around…thanks
der blaue reiter
This was exactly what I was looking for. Thank for for posting this great information.
Thanks, Daniel. It helped!
I’m so glad you took the time to put this up. I was messing around with functions before this, and it was getting confusing.
Good tip. I always wanted to know how to make the text disappear when the user clicks in the search input box.
I wonder can I put this in Google search bar or not? heheh.. nice tips!
thanks for pointing this out jennifer, i will read about it!
Great tip, Dan!
glad you liked it, thanks for the digg!
Thanks for plainly laying this out. I always thought it was more difficult than that to add that feature.
I dugg your story:
Comments are closed.