by Brian Johnson
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
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.
| 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 |
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.
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.
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.
| 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.
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.
| 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>
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.
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.
| 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.
| 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.
| 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.
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.
| 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.
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.
| 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>
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.
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.