The Web is by nature a client/server environment. The load is balanced between the server where the information is stored and the client which does the processing. Until recently processing consisted of rendering a Web page (including its graphics) on the client. With VBScript you can add small programs to your pages that are executed on the server. With the introduction of DHTML, scripting languages such as VBScript and ]avaScript, and ActiveX controls for the Web, an increasing amount of processing will move from the server to the client.
Web pages are by definition interactive: each .time visitors click a hyper link they are taken to another page. But this isn’t the type of interaction with which Windows users are familiar. In addition this type of interaction requires a trip to the server at each step. The Web page can’t respond to events, such as the click of a button because HTML isn’t a programming language. It can’t display the date or do a simple calculation.
The latest trend in Web design is to make pages active. An active page is one that behaves like an application. It has its own user interface composed of the common Windows elements (Command buttons text boxes and all the new ActiveX controls released for the Web) and interacts with the visitor in a mannr similar to a Windows application. An active page doesn’t require a trip to the server to display the date or do some calculations.
The embedded application is called a script. Scripts are simple programs, embedded in the HTML page as ASCII text. When the page is downloaded the script is downloaded with it and is executed by the browser on the client computer. The idea behind active pages is to exploit the computing power of the client computer. With straight HTML the client computer’s task is to render the HTML documents on the screen. But most clients out there are powerful pes and they could do much more than simply display Web pages. Active pages can exploit the available computing power by passing much of the processing that would otherwise take place on the server to the client.
In the following sections, we are going to look the differences between Visual Basic and VBScript. VBScript is a lightweight version of Visual Basic but before you start developing scripts you must understand the design philosophy of VBScript. The design environment is also quite different. VBScript doesn’t come with an integrated editor. To insert a script on a page, you must edit the HTML file and insert the appropriate code. Once you learn the structure of a script and how it interacts with the rest of the document, you’ll be ready to script your Web pages. You’ll also be
ready to design documents with DHIML which relies on VBScript for the manipulation of its elements in real time.
Historically (if three years of VBScript evolution can be considered history) VBScript’s first use was to program the elements of a Web page that collect user input Many pages on the World Wide Web collect input at the client with the help of some basic controls such as text boxes radio buttons, and so on. They are primitive compared
with the elegant controls used by Windows but they serve their purpose. To help you understand how VBScript is used on a Web page I will discuss these control from a VBprogrammer’s point of view and how they are programmed with VBScrip
Forms and Controls
As you know already HTML pages contain controls that let the user enter infomanation similar to the usual Windows controls: textboxes Option buttons and so on. The areas on the HTML page where these controls appear are called Forms and the controls themselves are called intrinsic controls. HTML provides special tags for placing
intrinsic controls on a Form
NOTE
In addition to intrinsic controls, you can place ActiveX controls on your Forms. Because ActiveX controls must be downloaded to the client and many Visitors don’t allow the installation of ActiveX controls on their systems I am not going to discuss them.
Before placing a control on the page, you must create a Form with the
<FORM> tag. Its syntax is:
<FORM NAME=name ACTION-action METHOD~method>
</FORM>
All the controls must appear between these two tags. The NAME attribute (it’s optional) is the name of the Form and is used when a page contains multiple Forms. Ute ACTION attribute is the name of all application on the server that will be called to process the information. The METHOD attribute specifies how the controls’ values will be transmitted to the server. All the information needed by the browser to contact an application in the server is contained in the <FORM> tag. But more on this later in the section “Passing Parameters to the Server.” HTML provides support for the following intrinsic controls. Figure 19.7 shows a Web page with a Form that contains most of HTML’s intrinsic controls. You are going to see the HTML code that produced the page of Figure 19.7 in the section “The FORM.H1M Web Page” later in this chapter.
The Text Control
The Text control is a box in which visitors can enter a single line of text (such as name, address, and so on). To insert a Text control on a Form, use the following tag:
<INPUT TYPE – TEXT NAME = ‘Publisher’ VALUE – ‘Sybex’>
The VALUE attribute specifies the initial value. After the visitor changes this entry, VALUE holds the new string. To edit the contents of a Text control, the visitor can use the common editing keys (Home, Del, Insert, and so on), but the text can’t be formatted. .
To control the size and contents of the control use the SIZE and MAXLENGTH attributes. The SIZE attribute Specifies the size of the control on the Form in number of characters; and the MAXLENGTI-I attribute specifies the maximum number of characters the user can type in the control. A variation of the Text control is the Password control which is identical but doesn’t display the characters as they are typed. Instead it displays asterisks and it is used to enter passwords.
The Text Area Control
The TextArea control is similar to the Text control, but it allows the entry of multiple lines of text. All the usual navigation and editing keys work with the TextArea control.
To place a TextArea control on a Form use the <TEXTAREA> tag:
<TEXTAREA NAME – ‘Comments’ ROWS – 10 COlS – 30>
The best editor I’ve ever ‘used!
</TEXTAREA>
Because (he TextArea control allows you to specify multiple lines of initial text it’s not inserted with the usual <INPUT> tag but with a pair of <TEXTAREA> tags. The ROWS and COLS attributes specify the dimensions of the control on the page in number of characters. Notice that the line breaks you insert between the two <TEXTAREA> tags are preserved when the text is displayed on the control. Even if you include HTML tags in the initial text they will appear as text on the control.
The Check Box Control
The Check Box control is a little square with an optional checkmark, which acts as a toggle. Every time the visitor clicks it it changes state. It is used to present a list of options from which the user can select one or more. To insert a CheckBox control on a Form use the <INPUT> tag: –
<INPUT TYPE ~ CHECKBOX NAME = ‘Checkl”)
To initially check a CheckBox control specify the CHECKED attribute in the corresponding <INPUT> tag. The control’s value can be 0 or 1 indicating whether it’s checked (1) or cleared (0)
The Radio Button Control
The Radio Button control is round and contains a dot in the center. Radio Button controls are used to present lists of options similar to the Check Box controls but only one of them can be selected at a time. Each time a new option is checked by the visitor the previously selected one is cleared. To insert a Radio Button control on a Form use the following:
<INPUT TYPE ~ RADIO NAME = ‘Radiol’)
Whereas each Check Box control has a different name a group of RadioButtons
have the same name. This is how the browser knows that a number of RadioButton
controls belong to-the same group and that only one of them can be checked at a time.
To specify the control that will be initially checked in the group use the CHECKED
attribute. The following lines insert a group of four Radiobutton controls on a Form:
<INPUT TYPE – RADIO NAME – ‘Level’)Beg;nner <BR>
<INPUT TYPE – RADIO NAME – ‘Level’)Intermed;ate <BR>
<INPUT TYPE – RADIO NAME – ‘Level’ CHECKED)Advanced<BR>
<INPUT TYPE – RADIO NAME” “.Level’)Expert <BR)
The Multiple Selection Control
The Multiple Selection control is basically a list that can contain a number of options. The visitor can select none one or multiple items in the list. The list is delimited with a pair of <SELECT> tags. Each item in the list is inserted with a separate <OPTION> tag. To place a Multiple Selection List on the Form add the following lines
<SELECT NAME: “MemoryOptions’ SIZE = 3 MULTIPLE = multiple>
<OPTION VALUEm16> 16’MB</OPTION>
<OPTION VALUE=32> 32 MB</OPTION>
<OPTION VALUEa64> .64 MB</OPTION>
<OPTION VALUE-128> 128 MB</OPTION>
<OPTION VALUEa256> 256 MB</OPTION>
·</SELECT>
The SIZE attribute specifies how many lines will be visible. If you omit it the list will be reduced to a single line and the visitor must use the up-down aqow keys to scrolLthrough the available options. If the list contains more lines a vertical scroll bar is automatically attached to help the visitor locate the desired item. The MULTIPLE attribute specifies that the visitor can select multiple items in the list
by clicking their names while holding down the Shift or Ctrl key If you omit the MULTIPLE attribute each time an item is selected the previously. selected one is cleared.
The <OPTION> tag has a VALUE attribute that represents the value of the selected item. If the viewer selects the 64MB option in the earlier list, the value 64 is transmitted to the server. Finally to initially select one or more options specify the SELECTED attribute:
<OPTION SELECTED VALUE-128> 128 MB</OPTION>
The Command Button Control
Clicking a Command button triggers certain actions. Without VBScript Command buttons can trigger only two actions:
• Submit the data entered on the controls to the server.
.• Reset all control values on the Form to their original’ values
With VBScript Command buttons can trigger any actions you can program in your pages. You can place three types of buttons on a Form: Submit Reset and General.
The most important button is Submit. It transmits the contents of all the controls on the Form to the server (the values will be processed by an application . whose URL is specified in the ACTION attribute of the <FORM> tag). The Reset button resets the values of the other controls on the Form to their initial values. The Reset button doesn’t submit any values to the server. Most Forms contain Submit and Reset buttons, which are inserted like this:
<INPUT TYPE· SUBMIT VALUE – ‘Send data’>
<INPUT TYPE – RESET VALUE – ‘Reset Values’>
The VALUE attribute specifies the string that will appear on the Command button. The Submit button reads the name of the application that must be contacted on the server (the <FORtv1>tag’s ACTION attribute) appends the values of the controls to this URL, and transmits it to the server.
The third generic type button has as its TYPE simply BUITON and functions similar to the other buttons in the Windows interface. Clicking it triggers an event which you can use to execute some VBScript code. To insert a generic Button control on your Form, use the <INPUT> tag:
<INPUT TYPE ~ BunON NAME = “ShowDate”)
Every time this button is clicked, it triggers the ShowDate_onClick event. Obviously you must place the code that you want to execute every time this button is clicked in this event’s handler:
Sub ShowDate_onClick()
MsgBox ‘The date is ‘ & Date()
End Sub
TIP
If you’re going to validate the data on the client’s side, you shouldn’t use the Submit button because it will transmit the data to the server as soon as the button is clicked. Instead use the Button control to trigger your data validation routine. After you validate the data you can submit it with the Submit method.
Here’s a typical Command button script that validates the data entered by the user and then submits the Form’s contents to an ASP (Active Server Page) application on the server. The Command button is generic and is placed on the Form as follows:
<INPUT TYPE = BUnON NAME = SendData VALUE = ‘Register Now’)
The Event Handler for the Send Data Button’s Click Event
<SCRIPT LANGUAGE = VBScript)
Sub SendData_onClick()
If ~nstr(‘@”, EMail.Value) = 0 Then
MsgBox ‘Invalid e-mail address.’ & chr(13) ~_
‘Please enter a string like _
[email protected]’
Else If RealName.Value = ” Then
MsgBox ‘You can’t register without a name’
Else
RegistrationForm.Submit
End If
End Sub
</SCRIPT>
This script is invoked when the SendData button is clicked. First, it checks the contents of the E Mail Text control. If the specified address isn’t in the form name@ server. com it prompts the user to enter a valid e-mail address. It then checks the value of the RealName Text control.lf the user hasn’t specified a name he or she
is prompted accordingly. If both tests fail the script submits the data on the Form (the Form maycontain other controls too) with the Submit method. The Form’s Submit method is’equivalent to the Submit button. They both cause the browser to contact the application specified by the ACTION attribute of the <FORM> tag and pass to it the values of the controls as parameters. For example the browser might submit a string such as the following:
EMail and Name are the names of the parameters expected by theRegister.asp application on the server (you’ll see how to write applications to extract the values passed by the client and process them on the server). The values shown could be anything. Notice that strings are not enclosed in quotes and spaces are replaced with plus signs.
