Dave, I keep visiting sites and 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 want to have something like this and would appreciate your helping me figure out the code needed.
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 out Google 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 see how 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 don’t tell Larry and Sergey, 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="askdavetaylor.com" checked /> Ask Dave Taylor<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="askdavetaylor.com" checked /> only search Ask Dave Taylor<br /> </td></tr></table> </div> </form>
Here’s how that renders when included on an HTML page:
If you’d like to use this on your own site, simply change the occurrences of askdavetaylor.com as appropriate.
Not too hard at all!
How do I get a regular search box to work on imcreator.com?
I am having 0 luck with this and I need html code for a search bar and shopping cart that actually work by Wednesday! D;
there is an option that when you type on the search box you don’t leave your website?
The “destination” window of a search is controlled by the TARGET= attribute of the FORM tag, Meine. So if you don’t want the search to pop up a new page but instead replace the current page with the search results, simply omit any TARGET attribute at all.
Hi Dave. I really thought I found the answer with your great looking search box. But it disappears after I try it out. I used your second example, looked great on the page. But when I type in the search term the box goes away, no new pages open, nada. Any thoughts?
That’s strange. Can you email me the code snippet you’re using or point me to your page? I’m on Gmail as “d1taylor”
Thanks Dave, the search box works great — used second example. Enjoy your cuppa chai!
Awesome man, this was really helpful..
I already had a search bar made, so I just found a way to use some of your code to make it work with Google..
Good read, Dave.
I came across it when I was trying to show tell someone that the search input could be easily styled with a bit of CSS wizardry. Your post was perfect for this!
Google Custom Search Engine is a nice little product. A bonus is that it can be hooked into Adsense and you can earn a few coins when someone searches your website.
It’s just a shame that few seems to know how to style the input field so that it’s integrated into their site better, so they end up with the default, ugly search input. 🙁
When I originally left a comment I appear to have clicked the -Notify me when new comments are added-
checkbox and from now on every time a comment is added
I get 4 emails with the exact same comment. There has to be an easy method you
are able to remove me from that service? Appreciate it!
How do I make the search results open in a new tab?
add the attribute target=”_blank” to the FORM HTML tag. 🙂
[…] How can I add a Google search box to … – 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 … […]
Hi Darren. In the FORM tag if you add target=”_blank” or target=”new” then it should work fine. Just make sure it’s surrounded by spaces and within the angle brackets 🙂
Hello.
I have a page design which already includes a search button. I like this design.
I would simply like to add google search functionality to it, in html, without losing the size and color of the existing search box, and without adding the google name to my site:
http://brightpathway.net/
Is there any quick and easy way to do that?
Thanks, if anyone has an idea.
Thank you for codes. I want to keep search option only for my own website not both (google and mysite). Plz help me to code for it.
I am glad I found this site.
I have very similar coding in my web page:
Only search this website
It works only if the input is English, but I have a Chinese website, when I input Chinese character, it takes the input as junk and come back with error message such as “Your search – ¤ß²z¾Ç site:xxxxxxxxxxxxx.net – did not match any documents. .”
I already specify the “lang” as “zh.”
Can you please tell me what to do?
Thanks you very much in advance.
Sorry Lois, but I don’t allow people to post HTML source for security reasons. Perhaps you can email me the code and I can experiment with it?
Hi Taylor
I want to open the search link in a alert box. so please help me for that as it is opening a google.com link .
thanks and regards
Thanks for the code Dave! Quick question … how do I make the search box come up with predictive text as I type something in it (similar to the current Google search box)?
Thanks if advance!
Wayne
Getting the predictive suggestions is darn complicated, not sure you can easily embed that on your own page, Wayne!
Thank.
Dear Dave
I put your below codes in HTML Frame, but it doesn’t work. I need Google search box, please help me. If its possible send codes need to my email. Thank you.
Nasser, when you say it doesn’t work, what exactly happens upon requesting a search?
Thanks for your response dear Dave.
When I write a text and enter, just very fast refresh on browser refresh icon appears, nothing else.
Dear Dave,
I test your codes in http://www.onlinehtmleditor.net/ but it doesn’t work.
in above your renders when included on an HTML page works good, but in my test its there in no action.
please help me, I need exactly your sample action.
Thanks.
did you resolve this Nasser? This code doesn’t work on my site eaither
When you say it doesn’t work, Daniel, what exactly do you mean? Does it not render properly on the page? Or does the search not go to Google? Or does it not return results?
and where does ot supposed to be put? I tried and saw no results.
I’m having the same problem as denger. First I tried Google’s free site search box and the picture of the search box appeared on my site, but the results always found nothing. I just tried your code for the search box and it works to search Google, but not to search my site. I don’t know if this is because it’s a new site (still working on it), or if Bravenet, my site builder somehow blocks it from working, or what. Bravenet’s site serach feature is really bad; you have to enter each page in a form, and then key words.
Any tips – I really want a search box, as I’m planning on putting the entire Bible on my site.
Also, I want the search to pop-up in a new page, so it doesn’t make people lose where they are on my site. And I want it to highlight the words they searched on my pages. I’ve actually accomplished this before on another site I built in HTML, but it was 15-years-ago and now I forget how.
Yvonne, the first thing to try is to go to Google directly and search for “site:yourdomain.com” (replacing the ‘yourdomain.com’ as appropriate and making sure NOT to have any spaces before or after the colon). Then check to see how many pages Google has actually indexed on your site.
I found this post really helpful, it was really specific,but i am stuck in another problem i wanted my search box to me aligned to center(like google’s search box), i have tried using but nothing is happening, it actually aligns the text i enter in the box to the center. so can you please tell me how do i Align the Search box
I’m a novice, but this is what I’ve learnt.
Use CSS in a separate file and link to that file within the head of your HTML code;
and within the CSS file write this code;
div.google {
display: block;
width: 400px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Next, enclose your google search code within a div element with the class attribute of google;
your code here
hopefully this code is posted so you can see what I typed and not rendered as if it’s html here.
This should give you the centering you desire.
Credit where credit is due, this is where I learn to code, http://html.net/
Can someone explain to me how I can change the search button to a magnifying glass or any other image?
Wow!
It works beautifully.
Thank you so much, Dave.
thnks a lot sir
Hey Dave,
Thank you for a great website. This article was particularly valuable.
Keep up the great work!
I am very new to coding! I wish to have this code open to a new window – target_blank is not working – this is not my own site but a designed site for our district – when I put the code in – it shows as it should; however, if one enters a search term and clicks search – the footer of the page appears — help! Thanks!
Make sure that you have exactly this: target=”_blank” within the angle brackets, Phyllis!
thanks for the code
foe my website its working
i’m happy
sir, at first I say thank you very much for nice tutorial.
but would you please tell me, how can I insert exactly the google logo where you inserted the text “google search” in value attribute. is it possibe to insert an image and save as an image the google logo can insert it ?
second thing is how can i crop an iframe from specially top side to insert a link of a newspaper logo into website because I want to insert particular part of a website so trim or crop it with programming code?
thank you so much
I need google search in Iframe
Where can i found?
According to Google, they don’t support that anymore.
https://support.google.com/customsearch/answer/1351747?hl=en
Hi Dave ,
This is awesome code! , thank you very much .
Can I ask the same question that “Ian Robson March 24, 2013 at 5:25 pm” asked before .
How can I show the result of a search on a custom webpage on my site??
Thanks
Regards
You can do a custom search page on your site with an iframe, Abdel, but I think Google automatically forces its search results to break out of frames, so it’d end up on its own page. If you really want a custom search, look into Google’s Custom Search Engine instead. 🙂
Hey Dave, thanks for this but is there any way to make the search predictive, like on the Google homepage? Am I asking too much?
Is this legal? Because if I want a custom search from Google I need to pay for it when I want to search the entire web: https://www.google.com/cse/
Googe has made a change: In the Form > ACTION field
“http://www.google.com/search” no longer works.
You need to enter: “http://www.google.com/cse”
http://www.bing.com/search also works
Good tip, thanks!
Funny, works fine for me. Try rechecking your code again.
THANK YOU oh so much. I was at the end of my rope!
Thanks a million.
Thank you Dave. Quick, simple, and EFFECTIVE. Just added it to my website and works like a charm. Added 3 more radio buttons for industry specific sources. Very much obliged.
Nice one Dave really helped me out.
Woooh! There are lots of comment on this article. Nice stuff you have in here Dave. At least you have provided much information for all the webmasters out there especially those beginners who does not know so much yet on designing a site. I am not using google custom search or any google product for my own site search tool but I do appreciate this article.
Hi Dave
Just love your article “How can I add a Google search box to my Web site?”
My question: How can I show the result of a search on a custom webpage on my site?
Works well, thanks. This is the minimum code to have Google Search into your website and its very easy to customize using CSS. Simply great.
thanks a lots for your helpfull code.
sir,
I get add different company/product but how i can get.
please tell me ‘
Thank you.
How do i save this, because everytime i add it it appears and then doesn’t stay!
Hi Dave,
We have a page that has many publications listed, so I added the Google search box to the page using the specific URL to just that page. I thought I was being smart until I realized that when you click on a search result it’s just going to take you back to the page and not to the specific spot on the page that was searched for. EX) If my name is far down on the page, I search for my name, click on the link, it just takes me back to the top of the page instead of where you can find my name on the page. It’s probably wishful thinking, but do you know if there is any way to set up a search like this, where when you click on the link in results it takes you to a specific spot on the page?
Thanks,
Nathan
Dave you’re the man 🙂
Looks awesome and works like a charm, and i was not expecting the box to have a transparent border, a added plus.
You have to register to be able to view my sites layout but if you want to check it out here is the link: http://www.lawrenceshimer.com
PS don’t worry , no junk on my site and I run Nuke Sentinel and Cloud Flare.
Its just a place a few of my friends and I hang out at (were old school gamers)lol
That’s confusing, Steven, because lots of people have used this exactly code snippet and had it work just fine. Are you sure you copied it into the “source” or “html” view of your page editor?
The code you gave does not work. Neither did googles free one. Why do they offer free stuff that does not work? Goddle’s made the picture but did not work. Yours came out all scrambled and with no power. How does one get a search box on one’s site that freakin works!
Hi,
I want an html code wherein on my site i type a word in a text box and then say submit.When i click submit it should show me an image of that searched word.And later i have to store that image with a user in the database..Can u help?
Hi,
It all works fine for me when hosted on a web based server but now I have set up a Linux based web server at home and nothing happens. I’ve tried searching for a solution but can’t find anything. Any suggestions?
Edd
Does it take time for the search bar to work, Dave? Because I’ve added it to my friends website but as i search for something, the search results with nothing.
Regards,
Nut
Thanks for the code.very happy…..
Man, you should be a prof. your techniques are quite simple and so so easy to deploy. Thanks a lot.
Is there any way to point the search to my own PC, as well as the internet?
Thanks.
but how to add symbol of search in that search box?????????????