# Constructing an Interactive Form

You can use IIS 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 section provides a procedure that 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, a scripting language, or a 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 IIS. 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 Web page that gathers the data

1. Open the file Sampform.asp in a text editor such as Notepad. Sampform.asp is located in your Winnt\Help\Iishelp\Iis\Htm\Core directory.
2. Replace the text between the opening and closing <title></title> tags and the opening and closing <h1></h1> tags with a title and a heading for the page. If you have trouble finding the text, search for the word Replace.
3. Preview the file in your browser by typing the path and file name in the Address bar. Because you are viewing the file directly with a file-open command rather than having the Web server process it, the script at the beginning of the file is visible. When the file is served as a document on your Web site, the server removes the script from the page before sending the page to the visitor’s browser.

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.

4. 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 elements such as text boxes, check boxes, and radio buttons. You can add these in any order. You are not required to use all the elements in your page, but each element can only be used once. For instance, the element called 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
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
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

1. It is a good idea to plan your form by using the list of available elements above and sketching the form on a piece of paper before creating the page online. That way you can experiment with different elements and how you might want to place them.
2. 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 <!-- ===Paste form elements below this line=== --> comment and before the <!-- ===Paste form elements above this line== --> 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=== -->

3. Replace the text labels accompanying each element with appropriate text. To find these quickly and easily, search for the word Replace.
4. Save the changes you have made to your file.
5. 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

1. Search for the text cm.commandtext= to find the insert statement.
2. 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.

3. 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 (?,?,?)
4. 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

5. Save your changes and preview your file by typing //Localhost/Sampform.asp in the Address bar of the browser.

Related Topics

- For more information on using interactive forms and databases, see Accessing a Data Source.
- To use a script to view your database, see Viewing a Database in a Browser.

© 1997-1999 Microsoft Corporation. All rights reserved.