How to put text inside search forms


searchform.pngMost 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
  • 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”
  • onfocus=”if(this.value==this.defaultValue)this.value=”;”
  • onblur=”if(this.value==”)this.value=this.defaultValue;”

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

23 Responses to “How to put text inside search forms”

  • Carolyn King

    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

  • Bang Kritikus

    Good tutorial !!

  • megat

    such a good tutorial! thanks!

  • h

    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?

  • Kurt

    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.

  • JTA

    How can i do the same thing but now with password field? and see the text?
    Thanks and good work!

  • Hani Thabet

    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.

  • Shankar Ganesh

    Thanks, Daniel. It helped!

  • Julia

    THANK YOU!!!!

    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.

  • J David

    Good tip. I always wanted to know how to make the text disappear when the user clicks in the search input box.

  • menghua

    I wonder can I put this in Google search bar or not? heheh.. nice tips!

  • Daniel

    thanks for pointing this out jennifer, i will read about it!

  • Nick

    Great tip, Dan!

  • Jennifer Curtiss

    This is nicely delineated for the quick and dirty method. There’s a tutorial at A List Apart – “Making Compact Forms More Accessible” to accomplish the same effect with labels to increase accessibility. It features appending a CSS class to each label (to make the label appear inside the textbox), a few additional styles (to help with the label appearing inside the textbox, and to be used by the JavaScript), and then a couple javascript functions to add the functionality to the labels.

    This method is good because it increases accessibility for disabled users, it breaks down nicely for JavaScript disabled browsers, and it eliminates the inline JavaScript, which is as bad for standards as inline CSS.

  • Daniel

    glad you liked it, thanks for the digg!

  • rapture

    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.