Add Search to Website Quickly and Easily for Free

Once a website has more than a few pages and images then adding a search function can help a site's visitors. Every page on a website should be accessible from links within the site. For example the CMS used for this website (↓markdown↓ CMS) automatically generates a comprehensive alpabetical index to help that aim. However, visitors will sometimes be looking for specific items or text within a website. This is where a website search feature is useful. A site search box, or search bar, is traditionally added to the top of every page on a website. As for most tasks in the world of the web this can be done in several different ways.

For CMS based websites there are various tools and plugins available. For hand coded websites free PHP or JavaScript code is a search away. There are commercial packages and Google provides an API to build a Custom Search Engine, other APIs from other search providers also exist. This is all good but one of the easiest ways to add search to websites is to tap into the power of the existing providers search URLs. Once a website is up and running the major search providers (like Google, Bing, Yahoo, DuckDuckGo, etc.) will start to index it within a few weeks. A website can use this indexing to search its own site, it is called site search. This tutorial shows how to add a site search box to a website quickly, easily and for free.

The Search Providers Site Search URLs

When a search term is entered at a search engine the URL generated when the search is submitted is easy to understand. For example when searching for the term example on Bing:

Here the important part of the submitted URL is:

http://www.bing.com/search?q=example

This can be typed into the browser address bar directly putting any word required after the equals sign:

http://www.bing.com/search?q=test

To get search results for a specific web site the search providers support a site specific search option. The option is added by using the site: indicator. To search for the word example on this website use example site:tekeye.uk:

This modifies the search URL to look like this (where %3a is the value of the colon character):

http://www.bing.com/search?q=example+site%3atekeye.uk

Knowing this a simple search form can be added to any site to provide a website specific search. Here are some more website specific search URLs for some search providers. Here text is the item being searched for and example.com would be replaced with the site to search:

In this list the generic .com search provider addresses are used. Swap for a country specific URL if required (e.g. google.co.uk for google.com for a UK based website. (Notice that Yandex encodes spaces, %20, to separate search terms but plus signs also work.)

Adding Site Search Form for a Search Provider

To add a search box to a website a HTML form element is used. Inside the form are text and submit input elements. These provide the search box and search button. Here is the basic structure using the DuckDuckGo provider:

<form action="https://duckduckgo.com/?">
    <input type="text" name="q"/>
    <input type="submit" value="Search"/>
</form>

Notice how the action is all of the search provider's URL, upto the question mark (?). The rest of the URL is constructed when the form submits. Don't forget to add the protocol and :// to make a valid web address. So for an Ask search the value of action would be:

http://www.ask.com/web?

This is the basic form dropped into a simple HTML page:

The problem here is the site: specifier needs to be typed in with the search term. However, adding a hidden input and a small line of JavaScript code solves the problem. Here's the final example using the DuckDuckGo search provider:

<form action="https://duckduckgo.com/?"
  oninput="q.value=document.getElementById('search').value +' site:example.com'">
    <input type="text" id="search" required=""/>
    <input type="hidden" name="q"/>
    <input type="submit" value="Search"/>
</form>

At the same time the required attribute is added to prevent needless submissions if nothing was entered into the search box:

How the Site Search Form Works

The action attribute of the form is the base URL used when the submit input is clicked. In the example above the action is the URL for the DuckDuckGo search provider. It is important to note that a form will only submit a value (add it to the URL) from an input that has a name attribute. For most search providers the search data is set using q=. (The table above shows that Yahoo uses p and Yandex uses text.) Therefore a text input has the name q so that q=value gets added to the URL. To add the site: part a simple code trick is used. The q input is hidden and another input takes the visitor's typed search string. To identify the search string input the id attribute is used (here set to search). Because id is used and not name its value is not added to the URL. Instead when the user types their search text the JavaScript code in the form's oninput attribute runs. This sets the value of the q input to the string typed by the user plus the required site: setting. Therefore when the form is submitted the correct search URL is constructed by the form and called.

Changing HTML Default Input Width Using Character Size Attribute

The HTML input element's default width is set to 20 characters. The width can be controlled by the size attribute, in which case the width matches the number of characters specified, or by the normal Cascading Style Sheets (CSS) width property in which case it can be based on pixels, percentage etc. There is an example further on.

Limiting HTML Input Number of Characters to a Maximum

The HTML input maxlength attribute is useful in preventing users abusing the search feature. Setting the maxlength attribute is sensible to prevent a malicious user trying to send very large amounts of text through the search form. See the example in the next section.

Using the Simple Site Search Code

To use the site search code take the final example above and add it to the HTML code in a web page. It can be wrapped in a div element and dropped into most CMS or hand coded sites. Use the table if a different search provider to DuckDuckGo is required. (Remember to change the input named q to p or text if using Yahoo or Yandex.) Here is an example simple site search HTML webpage using the above code plus a size attribute of 30 and maxlength attribute of 200:

<!DOCTYPE html>
<html>
    <head>
        <title>Search Demo</title>
    </head>
    <body>
        <p>Search this web site (tekeye.uk).</p>
        <form action="https://duckduckgo.com/?"
           oninput="q.value=document.getElementById('search').value +' site:tekeye.uk'">
            <input type="text" id="search" size="30" maxlength="200" required="" />
            <input type="hidden" name="q"/>
            <input type="submit" value="Search"/>
        </form>
    </body>
</html>

This demo site search HTML page is available here:

Disadvantages of Using Site Search

There are a couple of downsides to using a search engines site search ability. Depending upon the search provider used the site search results will be displayed alongside (or after) some advertisements. Plus the results are not displayed within the searched website but on a search providers web page. However if you add search to a website it is a useful feature to visitors and this tutorial showed how it can be done quickly and easily using a search engine's site search feature.

See Also

• Mozilla HTML forms guide