Creating Search Form

Web forms are the way a Web visitor can send information to a Web site through the Internet. This tutorial gives you an example how to add a form to web page. We will create a simple search form (example pictured below), which allows visitor to type a search phrase and get a search result. Our form contains a text field to type a search query, and the Search button, which sends the search query to a web server. This form uses search script from the mp3.com web site.

Step 1: Adding form rectangle

To add the form rectangle

1. Click Form or Form Object from the Insert menu and select Form.
2. Draw a rectangle in the page window to specify form position and size.
3. Set the Form properties in the Form tab of the Layer Properties panel:
4. Set the form Action: http://search.mp3.com/bin/search/
5. Set the form Method: Post

The form will send query to the mp3.com server, using the Post method.

Step 2: Adding form objects

Now we need to add form objects to the form. We will create a paragraph text layer and insert a Text Field and a Push Button.

Note: make sure the paragraph text rectangle intersects with form rectangle, otherwise the form objects will not belong to the form and search will not work.

Rectangle of Paragraph TextForm Rectangle

To add Paragraph Text

1. On the Insert menu, click Paragraph Text.
2. Click anywhere in the Document Window and drag away (in any direction) from this point to size the text frame. The frame is created when you release the mouse button. The text cursor appears at the top left corner of the frame.

To add Text Field

1. Click Form or Form Object from the Insert menu and select One Line Text Field.
2. In the Main tab of the Layer Properties panel set the text field Name: query. This name is defined in the search server at the mp3.com site.
3. In the Form tab of the Layer Properties panel set the text field Width: 10.

To add Push Button

1. Click Form or Form Object from the Insert menu and select Push Button.
2. In the Main tab of the Layer Properties panel set the Button Name: submit. This name is defined in the search server at the mp3.com site.
3. Set the button Caption: Search.
4. Set button Action: Submit Form.