Add a Bing Search Box to my Web Site?

More people who aren’t fans of Google. Interesting. I like Bing too, fortunately, and there are some things that they’re doing with their search results that are pretty slick, including how they integrate social media connections into the results. Like Google, they also split out your search by content category, offering Web search, image search, video search, news, maps, etc.
Sure I can give you that general Bing search box, but let’s actually do the reverse engineering on Bing Image Search, to make it a bit more interesting. At the very end I’ll show you the tiny tweak needed to turn an image search into a generic Web search too. We’ll delve into some HTML but don’t panic, you can just copy and paste my last code example and it’ll work just fine.
First off, as with most search boxes, it turns out you can reverse engineer Bing search by doing a search and seeing what it produces.
This is easy. Go to Bing Search — aka www.bing.com — and here’s what you see:

To work backwards on the needed variable or variables for the search form, we need simply actually perform a search. We’ll look for the cute children’s book series “frog and toad”. Just because.
If you then look in the address bar on the browser, you’ll see this long, complex URL:

Fortunately, that can all be boiled down to the search term and nothing else. All the other variables are extraneous. The result:

That’s not too bad, is it? What you can see here is the method of the HTML form (by implication: it has to be get), the action of the form — “http://www.bing.com/images/search” — and the name of the search pattern variable — “q” — which is assigned the value of the search.
That’s all we need. Now, poof, an HTML form:

That’s the most minimal form possible and you can see where all three of those data points are utilized to make it work. it’s not much to view, though:

Not even a submit button! You can try it, though: enter a search term, then press Enter or Return on your keyboard.
Let’s make it a bit more interesting, shall we?
First off, a submit button is easily added, as is a preface that explains what the search is:

Look for: on Bing Image Search.

Now let’s add a box around the entire search, and change the background color just a little bit to make it stand out:

  Look for: on Bing Image Search.

That looks good! Here’s the code I used to create that search box:

I made one additional tweak by adding the   character entity: it’s a non-breaking space and forces the Web browser to have a bit of blank space before the words “Look for” so that it’s not too close to the left margin. Easily removed if you’d prefer.
Anyway, that’s the code you’d need for a simple Bing Image Search box on your site, and it even looks rather pretty.
To make it a generic Web search is incredibly easy. Simply remove “/images” from the ‘action’ element of the form. Like this:

That’s it. Want to switch to video search? Replace “/images” with “/videos”. Search for news articles? Use “/news”. Boy, that’s easy.
Hope that helps you out!