Hello Everybody:

I own the Website ..., and am trying to implement the
"Site Search" component in it. I stripped all of the coding from it, except for
that necessary to make an attempt to add the "Site Search" component, plus the following simple
statement: "I also did some styling on the user input element."

I could not get it to work. My goal is to type in "styling" into the SEARCH box, and click
on "GO" and then have "styling" highlighted by the Browser. However, this does not work.
I get an error message in the lower left of the Computer Screen.
I use GoDaddy as a Hosting service.

I am basically trying to use the appropriate coding to implement the "Site Search" component
without having to go through a third party. I was told that you have to go through a
third party and pay them money, such as ... (i.e. the Zoom Search Engine).

Is there anybody out there that knows what coding to use to accomplish this goal?
I would appreciate the help.




I used the following coding from the book, "Stylin' with CSS:A Designer's Guide,"
by Charles Wyke-Smith. More specifically, I used the coding from pages 217 through
219 of his book.




Pages 217, 218, and 219 of his book cite the following:

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

The markup (i.e. html) 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:




div#searcharea {

height:44px; /* container height */

width:220px; /* container width */

margin:30px 0 0 30px; /*TEMP moves the div away from the edge of the browser */

} /* */
div>#searcharea {padding-top:6px;} /* re-set this value for SCBs */

div#searcharea h3 {

font-size:.8em; /* SEARCH text size */
color:#546DAF; /* SEARCH text color*/

}

div#searcharea form input {

border-top: 2px solid #546DAF; /* some border styling on the INPUT field */

border-right: 1px solid #546DAF;

border-bottom: 1px solid #546DAF;

border-left: 2px solid #546DAF;

font-size:.9em; /* size of text typed by user */

background-color:#E0E0E0; /*background of INPUT field */

}
div
#searcharea a {

font-size:.75em; /* GO link styles */

font-weight:bold;

color:#546DAF;

}


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()">G O</a>