Implementing Search

Implementing Search

A search component, such as the one in Figure 7.40, can be found on virtually every site.

The markup for such a component looks like this

<div id="searcharea">
    <h3>SEARCH</h3>
    <form name="search" action="search.htm">
       <input name="search" size="20" />
       <a href="javascript:document.search.submit()">GO</a>
    </form>
  </div><!--end searcharea-->

Here's the CSS:

#searcharea {
   height:44px;        <-- a
   width:220px;        <-- b
   margin:30px 0 0 30px;        <-- c
   }
div>#searcharea {padding-top:6px;}        <-- d
#searcharea h3 {
   font-size:.8em;        <-- e
   color:#546DAF;        <-- f
   }
#searcharea form input {
   border-top: 2px solid #546DAF;        <-- g
   border-right: 1px solid #546DAF;
   border-bottom: 1px solid #546DAF;
   border-left: 2px solid #546DAF;
   font-size:.9em;        <-- h
   background-color:#E0E0E0;        <-- i
   }
#searcharea a {
   font-size:.75em;        <-- j
   font-weight:bold;
   color:#546DAF;
   }

(a)Container height

(b)Container width

(c)Temporarily moves the div away from the edge of the browser

(d)Resets this value for modern browsers

(e)SEARCH text size

(f)SEARCH text size

(g)some border styling on the INPUT field

(h)Size of text typed by user

(i)background of INPUT field

(j)GO link styles

The same principle applies here as for the larger form in the previous example; the input field and the Submit button are within a form element and when the form is submitted, the data is sent to the URL defined in the form's action attribute. In the previous example, we used a button to submit the form. Here we use a text link instead, using the following JavaScript in the href of the Go link

<a href="javascript:document.search.submit()">GO</a>

The submit function is built into JavaScript, so it just works with this small amount of code. To use this construction on another form, just change the word search to the name of your form; if your form is named shoppingList, then you would write

<a href="javascript:document.shoppingList.submit()">GO</a>

I also did some styling on the user input element. Most designers don't style input elements, but as long as you don't overdo it, you can give forms a unique look quite easily. I also set the font-size for the field, something many designers don't know is possible. Because this makes the size of the field itself smaller, this is a useful trick if you need to pack a form into a small area, such as a sidebar.