Add a Simple Google, Yahoo! or Bing Search Box to Your Website

Aug 20, 2012
HTML JavaScript
By

‘Search’ is the web’s most utilized and essential function. The major search engines process billions of keyword requests daily, but there are still some websites and blogs that have yet to incorporate the vital feature.

While customized search box solutions are offered by various business entities, I prefer to use only the results from major engines: Google, Yahoo!, or Bing. Many of the commercial packages employ a free trial period to entice buyers, which tends to include very prominently placed ads, a possible turn off for some of your site visitors.

Basic Google Search Box

If space is an issue on your website or blog, you can easily fit in a small Google search box that will suit your needs. The coding solution involves a combination of HTML and Javascript:

 

<form method="get" action="http://www.google.com/search">

<div style="border:2px dotted black;padding:4px;width:15em;">
<table border="0" align="center" cellpadding="0">
<tr><td>
<input type="text"   name="q" size="25" style="color:#808080;"
maxlength="255" value="Google site search"
onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color='black';" onblur="if(this.value=='')this.value=this.defaultValue; "/>
<input type="submit" value="Go!" />
<input type="hidden" name="sitesearch" value="yoursite.com" /></td></tr>
</table>
</div>

</form>

 

When the above coding lines are uploaded, the resulting search box will look like this:

As shown in the graphic, there are different border options that can change the cosmetic appearance of the search box. The “dotted” style appears in the second line of the above code. You can easily adjust it to: dashed, solid, or double.

This search box is ready to work almost immediately. Just change “yoursite.com” in the third-to-last line to your own domain. Other adjustments, such as to the width of the box, the amount of cell padding, and the initial message that appears in the box, can quickly be made before the final upload of the script to your site.

Google Search Box with Radio Buttons

The above search box only allows for locating content within the designated website. However, some site owners might want to give visitors the option of looking for a keyword on the wider web, as well.

In that case, the simplest solution is to provide a search box with two radio buttons; one for the web, and the other for the site, as shown below:

The coding for the search box is as follows:

 

<form method="get" action="http://www.google.com/search">

<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" align="center" cellpadding="0">
<tr><td>
<input type="text"   name="q" size="25"
maxlength="255" value="" />
<input type="submit" value="Google Search" /></td></tr>
<tr><td align="center" style="font-size:75%">
<input type="radio"  name="sitesearch" value="" />The Web
<input type="radio"  name="sitesearch"
value="yoursite.com" checked /> Only Your Site<br />
</td></tr></table>
</div>

</form>

 

As in the previous example, just change “yoursite.com” to the correct domain name, and the search box will be ready to perform. Note that the option to search within your site is selected by default.

Bing Search Box with Radio Buttons

To incorporate an identical search box as above, but one that utilizes Bing as the search engine, utilize the following coding lines:

 

<form method="get" action="http://www.bing.com/search">

<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" align="center" cellpadding="0">
<tr><td>
<input type="text"   name="q" size="25"
maxlength="255" value="" />
<input type="submit" value="Bing Search" /></td></tr>
<tr><td align="center" style="font-size:75%">
<input type="radio"  name="q1" value="" />The Web
<input type="radio"  name="q1"
value="site:yoursite.com" /> Only Your Site<br />
</td></tr></table>
</div>

</form>

 

In this instance, neither radio button option is selected by default. If a site visitor enters a word or phrase into the search box, the default results will be from the wider web.

Yahoo Search Box with a Checkbox

The last simple search box contains a bit of a twist, as it only includes one checkbox, rather than two radio buttons, as shown below:

The relevant coding lines are:

 

<form method="get" action="http://search.yahoo.com/search">

<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" align="center" cellpadding="0">
<tr><td>
<input type="text"   name="p" size="25"
maxlength="255" value="" />
<input type="submit" value="Search Yahoo!" /></td></tr>
<tr><td align="center" style="font-size:75%">
<input type="checkbox"  name="p"
value="site:yoursite.com" checked /> Only Search Your Site<br />
</td></tr></table>
</div>

</form>

 

The option to search within the designated domain is selected by default. When a user de-selects the checkbox, he or she can search the wider web for the desired keyword or phrase.

Conclusion

‘Search’ is one of the most important elements for a website to incorporate. Even if a web designer has done an outstanding job of linking all of the major subject areas from the home page, ample opportunity still exists for information to be overlooked.

Given the ubiquitousness of search, users will expect to see the feature prominently displayed on your site, and are likely to be disappointed if it isn’t there. Adding search also engenders ‘stickiness’, in that visitors will tend to stay around longer if they can find more items to occupy their attention.

All in all, the simple search box solutions outlined in this article are ready to use and easy to incorporate into just about any site. Given the slight differences in features, you can feel free to take what is desired from one style, and apply it to another.

Author: David Elliot
David is a long-time journalist and editor, who also has over 10 years of experience as a freelance Web developer, specializing in online newspaper design and maintenance.
  • http://www.facebook.com/Ionut07Alexandru Ionut Alexandru

    Thx a lot. I need something like that. I put second code on my site

  • N Livingstone

    Why not style everything with css, instead of using inline styling?

  • steven denger

    All this information that is intended to be helpful is fine except for one minor detail: it does not work! The desired tabs appear an undesirable 2- ugly brown patches that you type on but does not work or doesn’t link or anything else! I have an automatic html box to add code to my site. Other things have worked fine but these search box codes that you people list to ” help people” is of no value. Check your coding before you show these things because they must only work under certain wierd circumstances but do not help.

  • starfall zone

    this is so simple and so good. i’ll try it. hope the result on search will provide the best result on a certain engine search and website search itself. nice. good job for you admin.

  • gottasay2u

    This is exactly what I was looking for. A lot of people know how to do things but they haven’t a clue how to “make it simple enough to understand” You’re the best!

  • Wande

    Please, how can I get the search result to show within the layout of my website.
    Thanks.

  • http://www.wirabumicomputer.com/ wira bumi computer

    wouuh… finally, I find the article to solve my problem. Thanks David

  • Wesright

    The HTML code worked great for me! All I had to change was the default radio button and I was off to the races. Thanks siteop!

  • noura

    Thank you very much!!! but I have a Q … How can i align it to the center or right??

  • Rajeshkumar

    Thx u so much…………….

  • nikhil shende

    i have make website . where i used carousel for use social website hyperlink . there are no. of social sites screen shot images , like facebook gmail orkut linkedin rediff and more , when we click that image new tab goes to that appropriate site , that is when we click on facebook image, then new tab will goes to facebook ,
    any one can tell me such type of using hyperlink is legal or not?
    please help me
    thanks

  • Emily

    How can I have the search results display within my website? An iframe??

  • http://blog.technicalsupporttoday.com/ Karan Rawat

    I want to add google search box with my own website name is that possible..?