Constructing an Interactive Form

PWS gives you the ability to get information from visitors to your Web site, and to respond to your visitors on the basis of the information they give you. This procedure is designed to help you customize a simple interactive form to meet your information-gathering needs. The procedure assumes that you do not know HTML, or a scripting or programming language, and it does not teach you these. Instead, you will use cut-and-paste and search-and-replace techniques to construct a working form that sends data to a sample database included with PWS. Because the database is created in Microsoft Access, you can view and edit the gathered data either by opening the database in Access, or by using another script, which is provided in Viewing A Database in a Browser.

To create the file

Open the file Sampform.asp in a text editor such as Notepad. Sampform.asp is located in your Windows\Help\Pws\Htm\Core directory.
Replace the text between the opening and closing <title></title> tags and the opening and closing <h1></h1> tags with a title and heading for the page. If you have trouble finding the text, search for the word Replace.
Preview the file in your browser by typing the path and file name in the Address bar. Because you are viewing the file with a file-open command rather than serving it, the script at the beginning of the file is visible. When the file is served as a document on your Web site, the script is not visible.

Tip If the heading seems too large for your page, reduce the height of the letters by changing the 1 in the opening and closing <h1></h1> tags to a 2.

Save the file to your home directory. (C:\Inetpub\Wwwroot is the default home directory used by setup). Save the file in text-only format with the name sampform.asp.

Tip To prevent Notepad from adding .txt to the file name, select All Files(*.*) as the Save as Type option.

Adding Elements

You are now ready to paste in the sections of script that display various text boxes, check boxes, and radio buttons. You can add the individual elements in any order you choose. You are not required to use all the elements in your page, but each element can only be used once. For instance, First Text Box can only be used once. If you need another text box, you must use either Second Text Box, or one of the memo boxes for the next text box on the page. The following is a list of the form elements available:

Element Name	Element	Description
First Text Box	Label:	These four text boxes can be used for input expected to be less that 255 characters. Use these for items such as names or e-mail addresses.
Second Text Box
Third Text Box
Fourth Text Box
First Memo Box	Label:	These two boxes have unlimited length and can be used when content may be large. Use these in places where visitors are invited to leave comments.
Second Memo Box	Label:
First Check Box	Label	These boxes return True if the item is checked and False if the item is not checked. Selecting one of these boxes has no effect on the other box.
Second Check Box	Label
Radio Buttons	Label: Label: Label:	This element give users a single, mutually exclusive choice of three options. If the user selects the first option, 1 is returned. If the user selects the second option, 2 is returned. If the user selects the third option, 3 is returned.

To add the fields to your form

It is a good idea to plan your form by using the list of available elements above and sketching them out on a piece of paper.
Copy and paste the following sections of code into your Web page by using the order you sketched out in step 1. Be sure that all your code is placed after the  comment and before the  comment.

Tip When you copy, if you include the starting and ending comments before and after each section of code, your finished page is much easier to read and edit at a later date. The comments are not displayed on the page when viewed in a browser.


<!-- ===Start First Text Box Element Section=== -->

<p> Replace this text with a label or caption for the first text box: </p>
<p><input type="Text" name="FirstTextBox"></p>

<!-- ===End First Text Box Element Section=== -->



<!-- ===Start Second Text Box Element Section=== -->

<p> Replace this text with a label or caption for the second text box: </p> 
<p><input type="Text" name="SecondTextBox"></p>

<!-- ===End Second Text Box Element Section=== -->



<!-- ===Start Third Text Box Element Section=== -->

<p> Replace this text with a label or caption for the third text box: </p>
<p><input type="Text" name="ThirdTextBox"></p>

<!-- ===End Third Text Box Element Section=== -->



<!-- ===Start Fourth Text Box Element Section=== -->

<p> Replace this text with a label or caption for the fourth box: </p>
<p><input type="Text" name="FourthTextBox"></p>

<!-- ===End Fourth Text Box Element Section=== -->



<!-- ===Start First Memo Box Element Section=== -->

<p> Replace this text with a label or caption for the first memo box: </p> 
<p><textarea name="FirstMemoBox" rows=6 cols=70></textarea></p>

<!-- ===End First Memo Box Element Section=== -->



<!-- ===Start Second Memo Box Element Section=== -->

<p> Replace this text with a label or caption for the second memo box: </p>
<p><textarea name="SecondMemoBox" rows=6 cols=70></textarea></p>

<!-- ===End Second Memo Box Element Section=== -->



<!-- ===Start First Check Box Element Section=== -->

<p><input type="CHECKBOX" name="FirstCheckBox" value="true" > Replace this text with a label or caption for the first check box: </p>

<!-- ===End First Check Box Element Section=== -->



<!-- ===Start Second Check Box Element Section=== -->

<p><input type="CHECKBOX" name="SecondCheckBox" value="true" > Replace this text with a label or caption for the second check box: </p>

<!-- ===End Second Check Box Element Section=== -->



<!-- ===Start Radio Buttons Element Section=== -->

<p><input name="RadioButtons" type="RADIO" value="1"> Replace this text with a label or caption for the first option. <br>
<input name="RadioButtons" type="RADIO" value="2"> Replace this text with a label or caption for the second option. <br>
<input name="RadioButtons" type="RADIO" value="3"> Replace this text with a label or caption for the third option. </p>

<!-- ===End Radio Buttons Element Section=== -->

Replace the text labels accompanying each element with appropriate text. To find these quickly and easily, search for the word Replace.
Save the changes you have made to your file.
Preview the file in your browser to be sure the elements are in the correct order and that the text labels are displaying correctly. Again, you can ignore the script that is visible at the top of the page above the heading. If you do not see the changes you have made, use the browser’s Refresh button.

Accessing the Database

Now that the form is complete, you must edit the statements that insert data into the database so they match the fields in your form. The Sampform.asp file contains references to all the available fields and the input they receive. You must remove the references for elements you did not include in your form. The following table displays the element name and the corresponding field name.

Element	Field Name
First Text Box	TB1
Second Text Box	TB2
Third Text Box	TB3
Fourth Text Box	TB4
First Memo Box	MB1
Second Memo Box	MB2
First Check Box	CB1
Second Check Box	CB2
Radio Buttons	RB

To edit the database field references

Search for the text cm.commandtext= to find the insert statement.
Inside the parentheses following the word SampleDb are all of the database field names separated by commas. Delete any field name you are not using, and the separating comma that follows that name. For example, if you used only the First Text Box, Second Text Box, and First Check Box, your field section would now appear as: SampleDb(TB1,TB2,CB1)

Note Regardless of the order of the elements on your page, do not change the order of the field names in the statement.

Inside the parentheses following the word VALUES are nine questions marks separated by commas. The number of question marks must equal the number of elements you used in your form. Delete extra question marks, and the separating comma that follows the question mark. For example, if you used only the First Text Box, Second Text Box,and First Check Box, your values section would now appear as: VALUES (?,?,?)
Following the the cm.commandtext= statement are the parameter statements. For any elements you did not use in your page, place an apostrophe before each of the two lines listed below the element parameter statement. For example, if you did not use the Second Text Box, the statement would now appear as:

'Second Text Box Parameter Statement
'set objparam=cm.createparameter(, 200, , 255, strTB2)
'cm.parameters.append objparam

Save your changes and preview your file by typing //localhost/sampform.asp in the Address bar of the browser.

To add a link to the form on your home page

Open the PWS Personal Web Manager and click the Web Site icon on the sidebar.
Click the Edit your home page link and use the wizard to add a link to the form on your home page.

Related Topics

For more information on using interactive forms and databases, see Accessing a Database.
For help linking your form to your home page, see Adding Links to the Home Page.
To use a script to view your database, see Viewing a Database in a Browser.