How to add a Google search box to your Web site

I know some keep seeing these cool search boxes that let you either search their entire site or search the entire Google database, all without leaving that page! I know you must be wondering how is done and  want to have something like that. Well , you are not alone, I was once like you, I got it fixed and decided to post it here for who ever that will need it.

This is a question that's going to result in some HTML listings. You know that, so there's no reason to panic!

First off, the good news. Google itself actually has a nice page offering you HTML code you can just cut and paste onto your own Web pages to produce the search box you seek, and some variants beside. Just check outGoogle Free.

Instead of relying on the bright sparks at Google, though, let's go through the steps of building our own search box instead, so you'll be able to seehow it works.

Also, not to pick on Google because I think the world of those folk, but their HTML samples could be cleaned up a bit, usually, so I've also recast it as proper XHTML rather than somewhat sloppy HTML. Just Google programmers, okay?

The basic technique involved here is to be able to manipulate one of the variables handed to the Google search engine, a variable called sitesearch. Set it to a null value and you're searching the entire World Wide Web, but set it to a specific domain and it's constrained exactly as if you had typed in the Google special notation site:domain.

In addition to that, you need an input field and a submit button. Put them all together and here's the minimalist Google search form that lets the user alternate between just your site (well, in this case just my site) or the entire Web:

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

<input type="text"   name="q" size="31"
 maxlength="255" value="" />
<input type="submit" value="Google Search" />
<input type="radio"  name="sitesearch" value="" />
 The Web
<input type="radio"  name="sitesearch"
 value="webgurusng.com" checked /> Ask Chinex<br />

</form>

There are some additional tweaks we can apply to make it a bit more fancy, including changing the radio buttons to a single check box, and aligning things a bit more nicely using a table and some simple CSS:

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

<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" 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="checkbox"  name="sitesearch"
 value="webgurusng.com" checked /> only search Ask chinex<br />
</td></tr></table>
</div>

</form>

Here's how that renders when included on an HTML page:

only search chinex

If you'd like to use this on your own site, simply change the occurrences of webgurusng.com as appropriate.Not too hard at all!