Search Engine - Example Form

...Building a Basic Web Page and More......

Search Engine Example

To utilize the searchable database script, you will need to add a simple form to the same page. Within this form you will 'call' the search function described in the database script. A simple form containing a text box and two buttons will suffice. Here's an example: (the Search button is inactive!)

To begin, a form lives between the <FORM> and </FORM> tags. In this case the form requires a NAME, this can be whatever you wish to call it. So far then, we have this:

<FORM NAME = "whatever"></FORM>

Now we need a simple text box to allow the user to enter the words to search. Here's the basic format:

<INPUT TYPE = "text" NAME = "FIELD NAME">

"FIELD NAME" is a name that you assign to the field that defines it from the other fields in the form.

For clarity, you will also precede the text box with a label that tells the user what kind of information is required. Like so:

Search Keywords:<INPUT TYPE = "text" NAME = "FIELD NAME">

Now we need to set the physical length of the text box by using the SIZE attribute, so:

Search Keywords:<INPUT TYPE = "text" SIZE = "15" NAME = "FIELD NAME">

To prevent the user typing away "'til the cows come home", we can use the MAXLENGTH attribute to restrict the length of the entry, so:

Search Keywords:<INPUT TYPE = "text" SIZE = "15" MAXLENGTH = "30" NAME = "FIELD NAME">

That's it for the text box. The form now looks like this:


	<FORM NAME = "whatever">
	Keywords:<INPUT TYPE = "text" SIZE = "15" MAXLENGTH = "30" NAME = "FIELD NAME">
	</FORM>

And produces this:

Now all that's left is to add the button that controls the whole affair. Forms have command buttons - two varieties - SUBMIT and RESET.
For this form we shall create our own SUBMIT button, give it a field name, label it and give it a specific ACTION - to call the search function and start the search!
Again we need the <INPUT TYPE> tag and the type is, you've guessed - BUTTON!
Here we are:

<INPUT TYPE = "button" NAME = "go" VALUE = "Start Search" onClick = "search()">

This is what it produces: If you click the button now, you will receive an error - we have given it the action, but haven't yet tied the form to the database containing the function search( )!! However that is a simple task.
This is the completed form, including SUBMIT and RESET buttons, ready to add to the database:


	<FORM NAME = "searchengine">
	Keywords:<INPUT TYPE = "text" SIZE = "15" MAXLENGTH = "30" NAME = "keywords">
	<INPUT TYPE = "button" NAME = "go" VALUE = "Start Search" onClick = "search()"> 
	<INPUT TYPE = "reset" VALUE = "Clear Search">
	</FORM>

Placing the Form
Add the form to your page containing the database script. The form can be placed anywhere within the <BODY> and </BODY> tags - in fact wherever you want the text box and search button to be.

Java Script

Top of Page