Multi-Search Form With Thumbnails

This page shows how to make a multi-search form using radio buttons with thumbails or logos as per the example below. This is a variation of the standard radio button version, which in turn is a variation on our original multi-search form. We also have a slightly different version that doesn't use the radio buttons.


To create a similar search form, use the code below and customize it to your needs.

Javascript & CSS

Place this code in the page head:

<script type="text/javascript">
function selectSearch(se) {
  document.getElementById(se).checked = true;
function dosearch() {
 var sf=document.searchform;
 for (i=sf.sengines.length-1; i > -1; i--) {
  if (sf.sengines[i].checked) {
   var submitto = sf.sengines[i].value + escape(sf.searchterms.value);
 //window.location.href = submitto; // Opens in same window, "resultsWindow", "height=500,width=740"); // Opens in a new window
 return false;
<style type="text/css">
input[type="radio"], input[type="radio"]+label img {
 vertical-align: middle;

Form Code

This is the code for the form (customize as required):

<form name="searchform" onSubmit="return dosearch();">
<input name="searchterms" type="text" style="width:200px;">
<input type="submit" name="SearchSubmit" value="Search">
<div style="margin-top:20px;">
<input name="sengines" type="radio" id="asda" value="" checked="checked">
<label for="asda"><img src="img/asda.png" width="75" height="24" alt="" onclick="selectSearch('asda');" /></label> &nbsp;
<input name="sengines" type="radio" id="tesco" value="">
<label for="tesco"><img src="img/tesco.png" width="87" height="24" alt="" onclick="selectSearch('tesco');" /></label> &nbsp;
<input name="sengines" type="radio" id="sainsburys" value="">
<label for="sainsburys"><img src="img/sainsburys.png" width="124" height="24" alt="" onclick="selectSearch('sainsburys');" /></label>