Visual InterDev

Article
07/12/2006

A common way to prompt users for information is to put a form on a page. Users can enter information or select choices using text boxes, option buttons, drop-down lists, and checkboxes. They then submit the form by clicking a button, and the information becomes available to your application.

You can define forms in these ways:

Use Microsoft^® Visual InterDev™ design-time controls and then write handlers for their events. This method allows you to work visually with your form's controls and use object-oriented techniques for scripting. It also makes it easy to bind form controls to a database.
Create an HTML form. This is the traditional HTML way of creating forms. You might use this method if you thought that the page might be edited using tools outside of Visual InterDev.

Using design-time controls is easier and more powerful, because it allows you to use the scripting object model for designing forms. For information about using design-time controls and the scripting object model, see Creating Forms with Design-Time Controls.

The sections below describe how to create and work with HTML forms in the traditional HTML manner.

Defining HTML Forms

You create an HTML form on a page with the <FORM> tag.

****Note ****Do not add an HTML form to a page that contains Visual InterDev design-time controls, because the page already contains a form used to manage the controls. For details, see Creating Forms with Design-Time Controls.

To create an HTML form

Select the text that you want to enclose in a form, and then from the HTML menu choose Form.

The editor puts <FORM> and </FORM> tags around your selection. The form's ID and NAME attributes are automatically assigned unique values, which you can change if you want.

Note If you enclose existing HTML controls in a form, they appear inside the form's node in the window.
Specify the name of an .asp file that will be used to process the form by assigning it to the ACTION attribute:
```
<FORM NAME="FormName" ACTION="ASPFileName.asp">
```
Specify how the form information will be sent to the server using the METHOD attribute:
```
<FORM NAME="FormName" ACTION="ASPFileName.asp" METHOD="method">
```
To send the information as part of the HTTP header (so it can be extracted using the Forms collection of the server's Request object), set METHOD to "POST".

To send the information as a search string to the .asp file (so it can be extracted using the Request object's QueryString collection), set METHOD to "GET".

After defining the form, you can define controls such as text boxes, buttons, and so on.

Note You can use design-time controls to create the user interface for your application. For details, see Creating Forms with Design-Time Controls.

To create controls in the form

Drag controls from the HTML tab of the Toolbox onto the form.

The control's ID and NAME attributes are automatically assigned unique values. You can change these values if you want.

Note When you drag HTML controls into an HTML form, they appear inside the form's node in the window.

For example, a form that contains a text box and a Submit button might look like this after you dragged the controls from the Toolbox and edited them:

<FORM NAME="Form1" NAME="frmMyForm" ACTION="process.asp" METHOD="post">
   Enter your name:
   <INPUT TYPE=text NAME=text1 ID=Text1>
   <INPUT TYPE="submit" VALUE="Submit" ID=Submit1 NAME=Submit1>
</FORM>

Processing Form Information Before Submitting

In simple forms, no processing is required on the client: the user clicks the Submit button, and the browser handles the tasks of gathering the data and sending it to the server. However, you can process forms by writing client scripts to handle button clicks and so on.

A typical example is to write a script that validates user input before the form is posted. But in client script you can have access to the events fired for all the form's controls, so you can write handlers for any purpose you need, including replacing server processing altogether.

Note The scripting object model allows you to script design-time controls easily. For details, see Writing Script for Script Objects.

To process forms in a client script

Write an event handler for the form's onsubmit event or for the events associated with individual controls, such as a button's onclick event or a text box's onblur event.

To determine the value of a specific control, you reference it using an object hierarchy that goes from document to form to control to property.

The following illustrates a simple validation routine in a form's onsubmit event handler:

<SCRIPT LANGUAGE="VBScript">
Function form1_onsubmit()
   If Len(document.form1.text1) < 1 then
      MsgBox("You must enter a name!")
      form1_onsubmit = False   ' This cancels the submission
   Else
      ' Information automatically sent to server
   End If
End Function
</SCRIPT>

To write handlers for other events, you can use the window. For more information about writing scripts for the events associated with HTML form controls, see Handling Events with HTML Elements.

Processing Forms on the Server

In Visual InterDev, forms are usually handled by an .asp file on the server.

To process a form in server script

On the target ASP page, use the Forms collection of the server Request object to extract values from the form.

The Forms collection is like an array that holds the values of all the controls in the form. You can extract the values of individual controls by referencing them by name in the Forms collection.

For example, the following script gets the values of several fields on the form using the names assigned in the form to the <INPUT> tags, and puts them into Session object variables to be used elsewhere in the application:

<%
Session("LastName") = Request.Form("LastName")
Session("BirthDate") = Request.Form("Birthdate")
%>

Creating Dynamic Information in a Hidden Field

If you want to pass information that is not directly entered by a user, you can use a hidden field.

Note If you use the scripting object model and design-time controls, information is automatically available in server scripts. For details, see Creating Forms with Design-Time Controls.

To create information in a hidden field

In a form, create an <INPUT> tag and set its TYPE attribute to HIDDEN, as in the following example:

<FORM NAME=frmEmployee METHOD=POST ACTION=process.asp>
   [...]
   <INPUT TYPE="Hidden" NAME="ExtraInfo">
</FORM>

Put information into the hidden field using a client script.

For example, you can load the hidden field just before the form is submitted by writing a handler for the form's onsubmit event. The following simple example puts the current time into the hidden field:
```
<SCRIPT Language="VBScript>
Function frmEmployee_onsubmit
   document.frmEmployee.ExtraInfo = time
End Function
</SCRIPT>
```

When the form is submitted, you can get the information out of the hidden field using server script exactly the way you get information out of any other form element, as in the following example:

<%Session("UpdateTime") = Request.Form("ExtraInfo")

Posting Information to the Same File

Instead of always creating a separate .asp file to process the contents of a form on an .htm file, you can put both on the same ASP page: the form and the script that processes the form. This can simplify your application and make it easier for users.

For example, it is typical to have three or more pages associated with a form: the page with the form, another with the script that processes the form, and a third with an error message. However, if the form is posted to the file it appears on, you can send informational messages along with the context of the form and you only have to create one page.

To post information to the same file

Create the form in an .asp file.
In the ACTION attribute of the form, specify the name of the file as the target URL.
In the server script at the top of the .asp file, use the Request object to check whether information is being passed to the file. If so, the form has been submitted, and you can process it. Otherwise, assume the form is being displayed for the first time.

The GetEmail.asp file below is an example of this. The script determines whether the user has entered an e-mail address, and if so, whether it is valid. In each case, the script produces an appropriate message, which then appears beneath the form as feedback to the user.

<HTML>
<BODY>
<!-- GetEmail.asp -->

<%
   If IsEmpty(Request("Email")) Then
      Msg = "Please enter your email address."
   ElseIf InStr(Request("Email"), "@") = 0 Then
      Msg = "Please enter an email address" & _
      " in the form username@location."
   Else
      ' In a real application, the following message
      ' would be replaced by actual processing.
      Msg = "This script could process the " & _
      "valid Email address now."
   End If
%>
<FORM METHOD="POST" ACTION="GetEmail.asp">
<PRE>
Email: <INPUT TYPE="TEXT" NAME="Email" SIZE=30
   VALUE="<%= Request("Email")%>">
<%= Msg %><P>
<INPUT TYPE="Submit" VALUE="Submit">
</PRE>
</FORM>
</BODY>
</HTML>

Share via