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 actionhref of the Go link

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

The submit 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 sidebar.