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.
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:
This can be typed into the browser address bar directly putting any word required after the equals sign:
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):
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:
|Provider||Protocol||Site Search URL|
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:
This is the basic form dropped into a simple HTML page:
<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
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.
Author:Daniel S. Fowler Published: Updated: