Profit and Value from Information Technology
Ecommerce & Extranets : Client Systems : Enterprise Applications : Application Development

Search the site:
EXPERT SEARCH

| Programming Languages
| Databases
| Security
| Web Services
| Network Services
| Middleware
| Components
| Operating Systems
| User Interfaces
| Groupware & Collaboration
| Content Management
| Productivity Applications
| Hardware
| Fun & Games

EarthWeb sites
Crossnodes
Datamation
Developer.com
DICE
EarthWeb.com
EarthWeb Direct
ERP Hub
Gamelan
GoCertify.com
HTMLGoodies
Intranet Journal
IT Knowledge
IT Library
JavaGoodies
JARS
JavaScripts.com
open source IT
RoadCoders
Y2K Info

# Chapter 4

# Intrinsic Controls

by Brian Johnson

CONTENTS

- Introduction
- Events in VBScript
- Messages in a GUI Environment
- Placing Controls in HTML
- Intrinsic Controls
  - Button
- Checkbox
  - `Hidden`
  - `Text`
  - Textarea
- Select
- Using Controls in Your Documents
- Review

## Introduction

VBScript's intrinsic controls are the same ones that you are using if you're working with forms in HTML documents. I'll talk about each of these controls and how they can be used to create interactive Web pages using VBScript.

This chapter covers

- Controls and messages in VBScript
- Using intrinsic controls with VBScript
- Each of the intrinsic controls in detail
- Client-side validation

## Events in VBScript

So far, you've created active pages with code that runs when the user clicks a button. Clicking a button generates an event. Events in Windows generate messages. Messages in Windows tell the applications and the operating system what to do and what's going on.

Most of the objects that you place into your HTML documents will have events to which you can attach script code. The Button control you've been using so far has an `onClick` event. When this event occurs, code in the `onClick` procedure runs.

Visual Basic is an inherently graphical programming language. The way most information is retrieved and processed from the user is through graphical user interface (GUI) objects that you create for your user. Once the GUI is in place, the user causes the functions and procedures within your program to be initiated through keystrokes or mouse clicks. Table 4.1 defines these terms that I've just used.

Table 4.1. Interaction terms.

Term | Definition
Data | Information that is retrieved, manipulated, and returned to the user
GUI | Graphical User Interface-the buttons, boxes, labels, and other elements of your program that you use to interact with your user
Event | An action by the user, such as a mouse click or a keystroke
Messages | Sent back and forth from the operating system to the program in response to events

## Messages in a GUI Environment

Events generate messages in a GUI environment, but not all events are initiated by the actions of the user. There are a number of other ways that events are triggered.

Timers generate messages by default at the end of their timing cycles. These cycles are set by the programmer at design time but can be manipulated by the user at runtime.

Hardware can also generate messages. For example, a message is sent to the operating system when a CD is inserted in the CD-ROM. If the CD is built up for Windows 95, a program on the disk runs automatically. Likewise, if your machine is set up to receive faxes, a message is sent when your phone rings.

Multimedia generates its own types of messages. The multimedia system in the Windows operating system includes high-resolution timers that keep count of frames and time while a sound or video file is playing. During the start and completion of multimedia files, messages are also sent.

Depending on the types of control that you're using in your Web pages, you can write code that reacts to these types of messages. When dealing with the intrinsic controls though, the messages that you will deal with most often include mouse clicks, mouse movements, and keystrokes.

## Placing Controls in HTML

You can put these intrinsic controls on your page just as you would regular forms controls. The usual syntax is to place the `<INPUT>` tag into your HTML and use the appropriate `TYPE=` attribute for the control that you're creating. Placement of the controls on your page is entirely dependent on the HTML code. Listing 4.1 is an HTML page that contains a number of Internet Explorer's intrinsic controls. You can see the result in Figure 4.1.

Figure 4.1 : VBScript intrinsic controls in HTML.

> Listing 4.1. HTML document with controls.

>     <HTML>

>     <HEAD>

>     <TITLE>Tester Page</TITLE>

>     </HEAD>

>     <BODY>

>     <H1>Intrinsic Controls in VB Script</H1>

>     <HR COLOR="BLUE">

>     <CENTER>

>     <TABLE>

>     <TR>

>         <TD><FONT SIZE=5 FACE=ARIAL COLOR=BLUE>Controls...</FONT></TD>

>         <TD><INPUT TYPE="SUBMIT" NAME="Btn1" VALUE="This is button #1"></TD>

>         <TD><INPUT TYPE="TEXT" NAME="Txt1" VALUE="TEXT" ></TD>

>     </TR>

>     <TR>

>         <TD></TD>

>         <TD><INPUT TYPE="RADIO" NAME="Rad1">Radio Button</TD>

>         <TD><INPUT TYPE="TEXTAREA" NAME="TextArea1"

>              ROWS=50 COLS=25 VALUE="TEXTAREA"></TD>

>     </TR>

>     <TR>

>         <TD><INPUT TYPE="PASSWORD" NAME="Pass1" VALUE="PASS"></TD>

>         <TD><INPUT TYPE="RESET" NAME="Reset1" VALUE="Reset #1">

>         <TD><INPUT TYPE="CHECKBOX" NAME="Radio1" VALUE="Checkbox">Checkbox</TD>

>     </TR>

>     </TABLE>

>     </CENTER>

>     <SCRIPT LANGUAGE="VBS">

>     <!--

>     Sub Btn1_OnClick()

>     Dim Message

>     Message="Hello World!"

>     MsgBox Message, 0,"Tester Result"

>     End Sub

>     -->

>     </SCRIPT>

>     </BODY>

>     </HTML>

In the preceding example, controls are displayed in an HTML table. Tables offer fairly good control over where your controls are placed on a form, but it takes a little work to get the controls placed where you want them. Microsoft FrontPage allows you to create WYSIWYG (what you see is what you get) tables in Web pages. It's much easier to use a program like FrontPage to lay out a table visually, as shown in Figure 4.2.

Figure 4.2 : Laying out an HTML document with controls in Microsoft FrontPage.

## Intrinsic Controls

### Button

I've used the button input type, Submit, to test most of the code we've played with so far. It's an easy control to use because users know what to do with it automatically: see a button and click it. What could be easier? Table 4.2 shows the properties for a Button control.

Table 4.2. Button properties.

Property | Description
`enabled` | Control is enabled (1) or disabled (0)
`form` | Name of the form to which the control belongs
`name` | Name used to identify the button in code
`value` | Caption of the button

Most of the intrinsic controls are created as a parameter of the `<INPUT>` tag. To create an instance of a Button control in HTML, insert an `<INPUT>` tag with the type set to `BUTTON` or `SUBMIT`:

>     <INPUT TYPE=SUBMIT NAME=Button1 VALUE="Click Me">

The `SUBMIT` type can be used interchangeably with `BUTTON`. The `RESET` type works the same way but is used to clear all the values in a current page.

Properties for the Button control can be set at load time and changed at runtime. Take a look at how properties are set for an intrinsic control at load time in Listing 4.2. Clicking the button causes the runtime event to occur, changing the `value` of the button.

> Listing 4.2. Setting properties for the Submit control.

>     <HTML>

>     <HEAD>

>     <TITLE>Tester Page</TITLE>

>     </HEAD>

>     <BODY>

>     <H1>Tester Page for VBScript</H1>

>     <HR COLOR="BLUE">

>     <INPUT TYPE="SUBMIT" NAME="Btn1" VALUE="Click to test the code">

>     <SCRIPT LANGUAGE="VBScript">

>     <!--

>          Sub Btn1_OnClick

>          Btn1.Value = "Value is changed!"

>          End Sub

>     -->

>     </SCRIPT>

>     </BODY>

>     </HTML>

We've done this before. Here, we set the `type`, `name`, and `value` of the `<INPUT>` tag when a document is loaded into the browser. Notice how we can change the `value` property of `Btn1` in the `Btn1_onClick` event. This change takes place at runtime.

The Button control has two events: `onClick` takes place when the user clicks the button with the mouse, and `onFocus` occurs when the button receives focus. A button with focus will usually have a small line drawn around the perimeter of the control. A button with focus generates an `onClick` event when the user presses the Enter key.

## Checkbox

The Checkbox control allows you to give the user a choice to check on a page. The user is able to select any or all checkboxes on a page because their checked values are independent of other Checkbox controls. The Checkbox is very useful when you want to allow a user to choose multiple items. Table 4.3 lists the Checkbox properties.

Table 4.3. Checkbox properties.

Property | Description
`checked` | Checkbox is checked
`defaultChecked` | Checkbox is checked by default
`enabled` | Control is enabled (1) or disabled (0)
`form` | Name of the form to which the control belongs
`name` | Name of the checkbox
`value` | Checkbox value

The checkbox control has two events, `onClick` and `onFocus`, and two methods, `click` and `focus`. Listing 4.3 uses the `click` method and the `onClick` event to change the properties among various checkboxes.

> Listing 4.3. Checkboxes in HTML.

>     <HTML>

>     <HEAD>

>     <TITLE>Tester Page</TITLE>

>     </HEAD>

>     <BODY>

>     <H1>Tester Page for VBScript</H1>

>     <HR COLOR="BLUE">

>     <TABLE BORDER>

>     <TR><INPUT TYPE="CHECKBOX" NAME="TChk1">

>         <INPUT TYPE="CHECKBOX" NAME="TChk2">

>         <INPUT TYPE="CHECKBOX" NAME="TChk3">

>         <INPUT TYPE="CHECKBOX" NAME="TChk4">

>         <INPUT TYPE="CHECKBOX" NAME="TChk5">

>     </TR>

>     <TR>

>     <INPUT TYPE="RADIO" NAME="Rad1">Code 1<BR>

>     <INPUT TYPE="RADIO" NAME="Rad2">Code 2<BR>

>     <INPUT TYPE="RADIO" NAME="Rad3">Code 3<BR>

>     <INPUT TYPE="RADIO" NAME="Rad4">Code 4<BR>

>     <INPUT TYPE="RADIO" NAME="Rad5">Code 5<BR>

>     </TR>

>     </TABLE><BR><BR>

>     <SCRIPT LANGUAGE="VBScript">

>     <!--

>     Sub ClrChecks

>     TChk1.Checked = False

>     TChk2.Checked = False

>     TChk3.Checked = False

>     TChk4.Checked = False

>     TChk5.Checked = False

>     End Sub

>     Sub Rad1_OnClick

>     ClrChecks

>     TChk1.Checked=True

>     TChk3.Checked=True

>     TChk4.Checked=True

>     End Sub

>     Sub Rad2_OnClick

>     ClrChecks

>     TChk2.Checked=True

>     TChk4.Checked=True

>     TChk5.Checked=True

>     End Sub

>     Sub Rad3_OnClick

>     ClrChecks

>     TChk1.Checked=True

>     TChk2.Checked=True

>     TChk3.Checked=True

>     End Sub

>     Sub Rad4_OnClick

>     ClrChecks

>     TChk3.Checked=True

>     TChk4.Checked=True

>     TChk5.Checked=True

>     End Sub

>     Sub Rad5_OnClick

>     ClrChecks

>     TChk1.Checked=True

>     TChk3.Checked=True

>     TChk5.Checked=True

>     End Sub

>     -->

>     </SCRIPT>

>     </BODY>

>     </HTML>

### `Hidden`

The `Hidden` input type is used to store a value in a form that is invisible to the user. This field isn't really needed with VBScript, because you can store most values with a variable. Before the advent of scriptable controls though, the `Hidden` type was useful for storing values in CGI-generated pages. This control has `name` and `value` properties that can be accessed in VBScript.

### `Text`

The `Text` type input control is used to retrieve input from the user. Its use is fairly straightforward, and because it is the default type for the Input control, you don't even need to explicitly declare it. The following two lines of code are functionally equivalent:

>     <INPUT TYPE=TEXT NAME=Txt1>

>     <INPUT NAME=Txt2

Setting the `value` property for the control inserts text into it. You can set the `defaultValue` property initially to place text into the control. Table 4.4 contains the properties for the Text control.

Table 4.4. Text properties.

Property | Description
`defaultValue` | Value of control at creation
`enabled` | Control is enabled (1) or disabled (0)
`form` | Form to which the control belongs
`name` | The name of the control
`value` | Content of the control

The `Text` input type has three methods that can be called in VBScript, as shown in Table 4.5.

Table 4.5. Text methods.

Method | Description
`focus` | Give control input focus
`blur` | Remove focus from control
`select` | Select text in control

Listing 4.4 uses the Text methods listed in Table 4.5. You can use these methods to help lead your user through a form. For example, instead of placing text on a form that says, "If no, then go to question 4," you can have the focus skip to the appropriate question.

> Listing 4.4. Setting focus in a form.

>     <HTML>

>     <HEAD>

>     <TITLE>Tester Page</TITLE>

>     </HEAD>

>     <BODY>

>     <H1>Tester Page for VBScript</H1>

>     <HR COLOR="BLUE">

>     <INPUT TYPE="SUBMIT" NAME="Btn1" VALUE="Text 1">

>     <INPUT TYPE="SUBMIT" NAME="Btn2" VALUE="Text 2">

>     <INPUT TYPE="SUBMIT" NAME="Btn3" VALUE="Text 3">

>     <BR><BR>

>     <INPUT TYPE="TEXT" NAME="Txt1" VALUE="This is text 1"><BR>

>     <INPUT TYPE="TEXT" NAME="Txt2" VALUE="This is text 2"><BR>

>     <INPUT TYPE="TEXT" NAME="Txt3" VALUE="This is text 3"><BR>

>     <SCRIPT LANGUAGE="VBScript">

>     <!--

>     Sub Btn1_OnClick

>         Txt1.Focus

>     End Sub

>     Sub Btn2_OnClick

>         Txt2.Select

>     End Sub

>     Sub Btn3_OnClick

>         Txt3.Focus

>     End Sub

>     -->

>     </SCRIPT>

>     </BODY>

>     </HTML>

Table 4.6 lists the events common to the controls that I'm talking about.

Table 4.6. Text events.

Events | Description
`onFocus` | Control gets focus
`onBlur` | Control loses focus
`onChange` | Value property of the control changes
`onSelect` | Control is selected

Listing 4.5 tracks these events among a number of controls in an HTML page.

> Listing 4.5. `focus` and `blur`.

>     <HTML>

>     <HEAD>

>     <TITLE>Tester Page</TITLE>

>     </HEAD>

>     <BODY>

>     <H1>Tester Page for VBScript</H1>

>     <HR COLOR="BLUE">

>     <INPUT TYPE="Text" NAME="Txt1" VALUE="Text 1">

>     <SCRIPT LANGUAGE="VBScript">

>     <!--

>     Sub Txt1_OnFocus

>         MsgBox "Text 1 Focus!"

>     End Sub

>     -->

>     </SCRIPT>

>     </BODY>

>     </HTML>

You'll notice that when you run this listing you can't do very much with the `Txt1` control. This is because a message box pops up every time it receives focus. When the message box shows up, the text box loses its focus, so there is no way to enter data. This code effectively prevents you from using your browser.

### Textarea

The Textarea control is similar to the Text type control in that you can use it to enter text on a page. The textarea allows you to enter multiple lines of text, making it more suitable for larger data input. The textarea is not usually an input tag with a type attribute, although that form is allowed. The textarea is a two-sided tag consisting of a `<TEXTAREA></TEXTAREA>` tag pair. The initial value of the textarea is contained between these tags.

The Textarea attributes are set in the first tag. Table 4.7 contains the Textarea properties.

Table 4.7. Textarea properties.

Method | Description
`cols` | Number of columns in control
`defaultValue` | Value of control at creation
`enabled` | Control is enabled (1) or disabled (0)
`form` | Form to which control belongs
`name` | Name of the textarea
`rows` | Number of rows in control
`value` | Content of the control

The `rows` and `cols` properties allow you to control the size of the textarea:

>     <TEXTAREA NAME=Text1 ROWS=30 COLS=40></TEXTAREA>

Figure 4.3 shows how the code above will look in your Web page.

Figure 4.3 : A Textarea control with 30 rows and 40 columns.

The textarea shares most of the events and methods of the Text type input control. You can use `focus` and `blur` to set or remove focus from the control and `select` to select the text inside it. You can use `onFocus`, `onBlur`, `onChange`, and `onSelect` to write code for events that have occurred.

## Select

The Select control is instantiated in code using the `<SELECT></SELECT>` tag pair. It is similar to a Windows Listbox control. You set the items in the Select control using the `<OPTION>` tag. You can determine the item that your user selects, using either the `selectedIndex` property or the `options` property. The control is referenced in code through the `name` property. You can get the number of items using the `length` property. Table 4.8 contains the properties for the Select control.

Table 4.8. Select control properties.

Property | Description
`name` | Name of the control
`length` | Number of items in the control
`options` | Array of options for the control
`selectedIndex` | Index of the currently selected item
`size` | Number of items displayed (default is 1)

The methods available to the Select control are `focus` and `blur`. Events for the Select control include `onBlur`, `onFocus`, and `onChange`.

The easiest way to use this control in VBScript is to get the `selectedIndex` from the control and then to act on that value using a `Select Case` statement.

Listing 4.6 contains code that displays a message that depends on the item selected in the Select control.

> Listing 4.6. Select control with VBScript.

>     <HTML>

>     <HEAD>

>     <TITLE>VBScript Select Control</TITLE>

>     </HEAD>

>     <BODY>

>     <SELECT NAME="Sel1">

>     <OPTION>Option 1

>     <OPTION>Option 2

>     <OPTION>Option 3

>     </SELECT>

>     <INPUT TYPE=SUBMIT NAME=Btn1 Value="Test">

>     <SCRIPT LANGUAGE=VBSCRIPT>

>     <!--

>     Sub Btn1_onClick

>     Select Case Sel1.selectedIndex

>         Case 0

>            Msg = "You selected option 1"

>         Case 1

>             Msg = "You selected option 2"

>         Case 2

>             Msg = "You selected option 3"

>     End Select

>     MsgBox Msg

>     End Sub

>     -->

>     </SCRIPT>

>     </BODY>

>     </HTML>

## Using Controls in Your Documents

Now, we'll take what has been done so far with controls and try to come up with a less trivial example of what can be done with them.

You might already be using forms and CGI scripts to retrieve and utilize data from users and customers. Data is usually passed to a script as a set of parameters. The script runs on the server, and the result is piped back to the user. In many cases, the script is checking to see that all the necessary entries are completed, or that the entries are valid, before it actually processes the data.

Using VBScript, you can take some of the load off your server by performing the data validation before information is sent across the Net.

Suppose, for example, you are offering free software to customers. If you want to keep track of who is downloading and using the software, you might have the users fill out a registration form before they download the software. In many cases, we know that a lengthy form is going to drive customers away, so we make some fields optional. You want to keep some sort of control over the registration process, so you require a name or handle and an e-mail address. If the user fills out the entire form, great. To get the software, though, the user must provide at least the minimal amount of information.

Listing 4.7 is a standard registration form that you might find on the Internet, and Figure 4.4 shows the results of that code. Notice that the required fields are marked by the asterisks. Normally, if you fill in the form and leave one of the required fields blank, the script on the server processes the information and kicks back a page that tells you to fill in the required fields. If you move this functionality to the HTML document and process the information on the user's machine, you can save yourself some hits on the server. This might not make much difference if your software giveaway doesn't generate too much interest, but it might make a difference if you have a large number of visitors downloading software from your site.

Figure 4.4 : A form with client-side validation.

> Listing 4.7. Form that validates data before sending it to the server.

>     <HTML>

>     <HEAD>

>     <TITLE>ACME Software's Registration Page</TITLE>

>     </HEAD>

>     <BODY BGCOLOR=WHITE>

>     <CENTER><FONT SIZE=7 FACE="Arial" COLOR=BLUE>ACME</FONT><FONT SIZE=5

>      COLOR=BLACK>Registration</FONT></CENTER>

>     <HR COLOR="BLUE">

>     <FONT FACE="COMIC Sans MS">

>     Thank you for taking the time to download and test our new product. In order to serve you

>     well, we ask that you submit the folloing information before downloading <FONT

>     FACE=ARIAL COLOR=BLUE>ACME</FONT>software.

>     <HR COLOR=RED WIDTH=75%>

>     <CENTER>

>     <TABLE BORDER BORDERCOLOR="BLUE">

>     <TR><TD ALIGN=RIGHT>*Name:</TD><TD><INPUT TYPE="TEXT" NAME="TxtName"></TD></TR>

>     <TR><TD ALIGN=RIGHT>*E-Mail:</TD><TD><INPUT TYPE="TEXT" NAME="TxtEMail"></TD></TR>

>     <TR><TD ALIGN=RIGHT>Address:</TD><TD><INPUT TYPE="TEXT" NAME="TxtAddress"></TD></TR>

>     <TR><TD ALIGN=RIGHT>City:</TD><TD><INPUT TYPE="TEXT" NAME="TxtCity"></TD></TR>

>     <TR><TD ALIGN=RIGHT>State:</TD><TD><INPUT TYPE="TEXT" NAME="TxtState"></TD></TR>

>     <TR><TD ALIGN=RIGHT>Zip:</TD><TD><INPUT TYPE="TEXT" NAME="TxtZip"></TD></TR>

>     <TR><TD ALIGN=RIGHT>Country:</TD><TD><INPUT TYPE="TEXT" NAME="TxtName"></TD></TR>

>     <TR><TD COLSPAN=2 ALIGN=CENTER><INPUT TYPE="SUBMIT" NAME="Btn1" VALUE="Send It!"><BR>

>     <FONT SIZE=2>* Required Field</FONT></TD>

>     </TABLE>

>     <HR COLOR=RED WIDTH=75%>

>     <FONT SIZE=2>Thanks!</FONT>

>     <SCRIPT LANGUAGE="VBScript">

>     <!--

>     Sub Btn1_OnClick

>     If TxtName.Value="" Or TxtEMail.Value="" Then

>     Dim MyMessage

>     MyMessage = "Please enter your name and e-mail address."

>     MsgBox MyMessage, 0, "Incomplete Form Error"

>     Else

>     location.href = "/cgi-bin/reg.cgi?Name=" + TxtName.Value + "&EMail=" + TxtEMail.Value +

>                     "&Address=" + TxtAddress.Value + "&City=" + TxtCity.Value + "&State=" +

>                     TxtState.Value + "&Zip=" + TxtZip.Value + "&Country=" + TxtCountry.Value

>     End If

>     End Sub

>     -->

>     </SCRIPT>

>     </BODY>

>     </HTML>

Notice here that, rather than using a conventional form in which the information would be piped directly to the server, I call the CGI script in the VBScript code block. This allows the code to be validated on the user's machine before being sent across the Net.

## Review

In this chapter I talked about messages and events and how they are related to the code that you write. I talked about Internet Explorer's intrinsic controls and how they can be used in your VBScript programs. I also talked about ways that VBScript code can be used to validate information before that information gets to the server. In the next chapter, you'll learn about the Internet Explorer Object Model for Scripting, which will allow you to take control of the browser using VBScript in Web pages.

| Use of this site is subject certain Terms & Conditions. Copyright (c) 1996-1999 EarthWeb, Inc.. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Please read our privacy policy for details.