Search Boxes - Site Search Boxes

If you have a large site, you want to consider adding a search box to your site. There are a number of free ones available or if you are using paid hosting, there may be one available through the host. The free ones I have used are listed below. Each is customizable to reflect the "look" of your site.

How Google Search Works - Learn how Google discovers, crawls, and serves web pages

Add a Search Box

• FreeFind Here you sign up to "Add a search engine to your site." You will need to enter your page URL and your e-mail address.. Your password and setup instructions will be e-mailed to you.
• Google Free - With Google Custom Search, you can harness the power of Google to create a customized search experience for your own website.
• Zoom Search is a commercial product which does offer a free version for small sites of 50 pages or less. It will NOT work with any of the Rootweb servers. This site is now using Zoom Search.
• siteLevel - internal site search - DeWitt County IL GenWeb site uses this. The free search allows for 1000 pages.

Once you decide which of the search engines you want to use and have the code to paste into your page, where should it go? I would place the code for your search box on every page of your site in a conspicuous place near the top.

• Search box as part of the site masthead
• Search box as part of a sidebar Expression Web Tutorials and Templates  OR  House of Oak & Sofas

Validating your Search Box

You will probably find the search box will not validate without your "tweaking" the code.  Each of the boxes below has been tweaked so the code will validate as xhtml transitional. For html code, you will need to delete the closing /. xhtml coding requires an element to be self-closing or opened and then closed.

I prefer to place the search box at either the top of the page or as part of the left side navigation using a very simple box styled using css. Examples of the search box inserted into a left navigations <div>

Google Search Box

only search Genealogy Web Creations

<form method="get" action="http://www.google.com/search">
<div style="border:1px solid black;padding:4px;width:20em; margin: 0px auto 0px auto">
<table border="0" cellpadding="0" >
<tr><td class="center">
<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="genealogy-web-creations.com" checked="checked" /> only search Genealogy Web Creations<br />
</td></tr></table>
</div>

</form>

FreeFind Search Box

<p class="center"><strong>FreeFind Search Box</strong></p>
<div style="border: 1px solid black; padding: 4px; width: 20em; text-align: center; margin: 0px auto 0px auto">
<form action="http://search.freefind.com/find.html" method="get" target="_self">
<input name="id" type="hidden" value="39665208" />
<input name="pageid" type="hidden" value="r" />
<input name="mode" type="hidden" value="all" />
<input name="n" type="hidden" value="0" />
<input name="query" size="15" type="text" />
<input type="submit" value=" Search " /> <br /><span class="smalltext">powered
by <a href="http://www.freefind.com">FreeFind</a></span></form>
</div>

 

---

Styling the Search Box

Once you have added the code for your search box and validated it, you can then add some styling to it. This is more easily done if the search box is placed inside <div> tags as is the one at the top of the page  on https://huuweb.org/

<div id="logoright">Code for search box</div>

The id of logoright is then styled by the following style rules

#logoright { float: right; width: 150px; margin: 30px 20px 0px 0px; font: bold .85em Georgia, "Times New Roman", Times, serif; background-color: #FFF; color: #6295C6; text-align: right; }

The search button itself is styled by adding a class to the code class="search"

<input class="search" name="Action" type="submit" value="Go" />

and adding style rules for the class

.search { background-color: #3E719E; color: #FFFFFF; font-weight: bold; }

If you want the input box to have a background image (which appears as a solid color), create a small seamless image to use as the background. Then create a style rule to use.

.gwc { background-color: #BDC7C6; background-image: url('../images/form-background2.jpg'); background-repeat: repeat; }

Apply the style to the code <input class="gwc" maxlength="30" name="query" size="10" value="" />

A search box added to the left side navigation would be done basically the same way. The code for the search is placed inside a <div> with the id search

<div id="search">Code for Search box </div>

Style rules added to your style sheet

#search { text-align: center; margin: 3px auto 8px auto; font-size: .8em; }
#search p { margin-bottom: 0px; } This removes the bottom margin so the Search This Site sits just above the search box itself.

An image was created for the background of the input box and a style created

.cf { background-image: url('../images/form-bg.jpg'); background-repeat: repeat; }

and the class added to the code <input class="cf" maxlength="30" name="query" size="10" value="" />

No class was created for the button styling as I wanted the default color for this particular one.

Making the Search Box Accessible

To maintain accessibility, each form element should have an associated label that identifies that element’s purpose. Label your input elements with meaningful and descriptive text. This makes it clear to the user what information they should be providing.

• Search Form Layout from Simply Accessible
• Creating Accessible Forms
• Making accessible forms part 1
• Making accessible forms part 2

Updated and Revised May 2015