Breadcrumb {international nav OR 10x10 spacer gif}
Create the search page

A search page on the web typically contains form menus or fields in which the user selects or enters search parameters. When the user clicks the form's Search button, the search parameters are sent to a results page on the server. The results page on the server, not the search page on the browser, is responsible for retrieving records from the database.

You'll begin creating the search application for The Wildlife Project by building the search page. The index.cfm page that you've created by completing the previous tutorials in this series will serve as the search page. Currently, there are no interactive elements on the page. You need to add an HTML form, a pop-up menu, and a Submit button (or Search button) to make the page a search page.

1 In Dreamweaver, open the index.cfm file and delete the placeholder text ("Search Application") in the third cell of the bottom table.
2 In the Property inspector (Window > Properties) do the following:
Make sure the text color is set to white (#FFFFFF)
Select a font combination from the Font pop-up menu. For this tutorial, we selected Georgia, Times New Roman, Times, serif.
Select a font size from the Font size pop-up menu. For this tutorial, we selected 2.
Click the Bold button
Click the Center Align button

3 Make sure the insertion point is centered inside the third cell of the bottom table and type the text LOOK FOR A WILDLIFE PROJECT BRANCH IN YOUR AREA. End the line with a colon (:).
Tip: If necessary, press Shift-Return (Windows) or Shift-Enter (Macintosh) to enter a line break for the second line of text (instead of a full return).
4 With the insertion point at the end of the second line of text (after the colon), select Insert > Form.
An empty form is created on the page. You may have to turn on Invisible Elements (View > Visual Aids > Invisible Elements) to see the form's boundaries, which are represented by thin red lines.

5 Select Insert > Form Objects > List/Menu.
A pop-up menu appears inside the form.
6 In the Property inspector, type US_STATE in the List/Menu text box. This is the name of the pop-up menu form object. Remember it. It will be important when you build the results page.
7 With the pop-up menu selected, click the List Values button in the Property inspector.

The List Values dialog box appears.
8 In the Item Label field, type Alaska (AK), and press the Tab key.
9 In the Value field, type AK, and press the Tab key.
10 Repeat steps seven and eight until you have entered the 50 states of the United States, and Washington D.C. You can view the full list of states along with their abbreviations from The Wildlife Project sample site.
For now, you do not actually need to enter all 50 states of the United States. You can enter only a few states (California (CA), Delaware (DE), and Pennsylvania (PA) for example), and fill in the rest later when you have more time. The sample database that you downloaded when you completed Wildlife Project 2: Determining data requirements and creating a database contains contact information for Wildlife Project branches in California, Delaware, and Pennsylvania, so if you enter these states in the List Value dialog box now, you'll be sure to retrieve matching records when you test your search application later.
You should also enter at least one state that does not have a matching record in the database. For now, enter Texas (TX).
Note: The order in which you enter values in the List Value box is the order in which they'll appear in the pop-up menu.
11 In the Property inspector, select Alaska (AK) in the Initially selected text box.
Alaska (AK) appears as the default value in the pop-up menu.

Notice that the pop-up menu does not actually give you the option of selecting values on your Dreamweaver page. The pop-up menu will only display the full list of values when you test the page in a browser.
12 Click inside the form boundary and place the insertion point to the right of the pop-up menu.
13 Select Insert > Special Characters > Non-Breaking Space.
A non-breaking space appears.
14 Select Insert > Form Objects > Button.
A Submit button appears beside the pop-up menu.
15 (Optional) Change the label of the Submit button by selecting the button, and entering a new value in the Label box of the Property inspector.

16 Select the form by selecting the <form> tag in the tag selector at the bottom of the Document window, as shown:

17 Enter results.cfm in the Action text box of the Property inspector. This is the filename of the results page that will process the database search.
18 Select GET from the Method pop-up menu of the Property inspector. Selecting GET sends the form data by appending it to the URL as a query string. For more information on the POST and Default methods, see Dreamweaver Help (Help > Using Dreamweaver > Developing Applications Rapidly > Building Pages that Search Databases > Creating the search page).
The search page is finished. Next you'll build the results page.

To Table of Contents Back to Previous document Forward to next document