Skip to main content.

Web Based Programming Tutorials

Homepage | Forum - Join the forum to discuss anything related to programming! | Programming Resources

Web Database Developer's Guide with Visual Basic 5

World Wide Web Database Developer's Guide with Visual Basic 5



-14-

Developing Advanced Forms for Database Access and Application Interfaces

Since mid-1996, technologies geared towards Internet and Web applications have been improving by leaps and bounds. With the introduction of the HTML 3.2 <OBJECT> tag, ActiveX controls, and client-side Visual Basic scripting within browsers such as Microsoft Internet Explorer 3.0, developers now have the tools to begin developing fully interactive Web applications. With the availability of these new technologies, the Web browser is rapidly becoming a full-fledged GUI development environment.

The goal of this chapter is to show you how you can leverage these technologies to develop HTML form interfaces for your Web database and other applications. You will be able to develop applications that are far more interactive and functional, as well as more aesthetically pleasing.



To start, you learn how VB scripts are attached to HTML documents and invoked by various events. Next, you discover how Microsoft's Internet Explorer browser is really composed of a hierarchical set of component objects (such as links, frames, scripts, forms, and object elements), each with its own set of events, properties, and methods that you can access through your VB scripts. You'll see just how powerful this object model for scripting is for developing dynamic user interfaces.

The final section is dedicated to applying the material you learned in earlier sections. In this section you learn more about how to format form objects and content using HTML tables as well as the HTML layout control--a nifty ActiveX control that provides fine placement of objects on a page. This is followed by two examples, a search engine query form and a database query form, which illustrate how VBScript, ActiveX, and HTML objects can be used to create application user interfaces, complete with interactive responses to user actions, input validation, and submission of forms via VBScript.

Using VBScript Within HTML

In Chapter 12, "Introduction to Client-Side Web Application Development Using VBScript," you were briefly introduced to the use of VBScript within HTML forms. However, the methods in which VB scripts are attached to your HTML documents and forms was only touched upon briefly. In this section, you learn about the three ways in which scripts are attached to and invoked from HTML documents:

Using the <SCRIPT> Tag

The <SCRIPT> tag is an element that is used for embedding scripts, such as VBScript or JScript, in an HTML document. Using the <SCRIPT> tag, the full source code for a script or scripts can be included within the body of the HTML document. Additionally, the SRC (that is, SRC=URL) attribute of the <SCRIPT> tag can be used to reference scripts outside of, or external to, the body of the document. This allows the use of URLs that point to a script from some other location.

The following simple script illustrates how a document's write method can be invoked to place a string into the current HTML document at the location of the script:

<HTML>
<BODY>
<SCRIPT language="VBScript">
<!--
   document.write("Welcome to Omniscient!")
-->
</SCRIPT>
 ... body of HTML document ...
 ... other <SCRIPT>s as required ...
</BODY>
</HTML>

Here are a few things to note about how <SCRIPT> is evaluated when a document is loaded:

Scripts as Attributes of HTML Elements

Scripts can also be added to documents by using attributes of HTML elements (such as forms, buttons, and links) that support scripts. In other words, attributes are used to bind or associate specific scripts with specific events that can occur on the document. When an event occurs on the document (say, the user clicks a button on a form), the script that has been associated with the event is executed.

CAUTION: This method works for HTML elements such as links, buttons, and forms, but it does not work for items that were inserted using the <OBJECT> tag.

In the following example, a button's onClick event is associated with the script btnPress, by including onClick=btnPress as an attribute to the <INPUT> tag used to create the button. Similar syntax can be used to bind events with scripts in <FORM> and <BODY> tags as well. When the button is pressed, the script named btnPress is executed to display a MsgBox dialog to the user:


<FORM NAME="myForm">
   <INPUT TYPE="button" NAME="myButton" VALUE="pressed"
   onClick="btnPress" LANGUAGE="VBScript">
</FORM>

<SCRIPT LANGUAGE="VBScript">
sub btnPress
   MsgBox "You pressed my Button!"
end sub
</SCRIPT>

Note that the LANGUAGE attribute was specified with the input tag. If not explicitly stated, the language of the most recently encountered script block would be used; if none were encountered previously, JScript would be the default.

An alternative syntax can also be used to associate an event with a script. The general form of the syntax is

<SCRIPT FOR="object" EVENT="event" LANGAUAGE="language">
NOTE: Unlike the syntax used in the previous example, this method can be used for any named elements and any elements inserted using the <OBJECT> tag.

The following example illustrates the use of this alternative syntax:

<FORM NAME="myForm">
   <INPUT TYPE="button" NAME="myButton" VALUE="pressed">
   <SCRIPT FOR=myButton EVENT="onClick" LANGUAGE="VBScript">
      MsgBox "You pressed my Button!"
   </SCRIPT>
</FORM>

Using Custom URLs

It is also possible to invoke a script through the use of the anchor (<A>) tag combined with a custom URL type. This allows the execution of some script code when a hyperlink is clicked by a user. The general syntax used is

<A HREF="script-engine:script-code">link_content</A>

where script-engine represents the scripting engine to use and script-code is a string that evaluates to script code supported by the engine. The code is executed (in the context of the current page) at the time the URL is evaluated (that is, when the link is clicked).

The following example illustrates how JScript is used to display an Alert dialog when a link is pressed:

<A HREF="javascript:alert(document.title)">
Display title of current docuement</A>
CAUTION: Note that as of this writing, this syntax is not supported for VBScript in Microsoft Internet Explorer. In other words, the syntax does not support processing of VBScript in the URL itself. It is possible, however, to use the syntax to reference VBScript functions using the syntax 
<A HREF="javascript:VBScriptFunctionName()">link_content</A>.



The following example illustrates how this syntax can be used to reference a VBScript
function that displays a MsgBox dialog when the user clicks a link:


<HTML>
<!--
<SCRIPT language="VBScript">
SUB myVBFunction( )
   MsgBox("You called a VBScript via JScript")
END SUB
-->
</SCRIPT>

<BODY>
   This is a <A HREF="JavaScript:myVBFunction()">Display a VBScript MsgBox</A>
</BODY>
</HTML>



The Microsoft Internet
Explorer Object Model for Scripting


In this section you learn about the structure of the scripting object model for
Microsoft's Internet Explorer (IE) Web browser. The scripting object model provides
a structured framework for manipulating component objects of the browser interface.
It also provides the capability to embed applications developed using VBScript (note
that the IE object model is also accessible from any scripting language, such as
JScript, that is compatible with the ActiveX scripting framework).


So what does this mean to someone developing forms and user interfaces for database
and other Web applications? Essentially, it means that you are no longer constrained
by the limitations of HTML forms, interfaces, and server-side programs. Instead,
Internet Explorer can now be viewed more as a graphical user interface development
environment--not as sophisticated or rich in functionality as the X Window System
for example, but an increasingly capable development environment nonetheless. You
are now provided direct programmatic access to the objects, properties, and methods
that make up Internet Explorer as well as the very elements, such as HTML form objects
and ActiveX controls, used to create database query forms and application user interfaces.


It is now possible to develop user interfaces that integrate ActiveX controls,
respond to user actions and events generated by form elements, implement client-side
programs (for instance VBScript scripts run by an interpreter within the browser)
to perform functions such as input validation, and even perform runtime changes to
the characteristics of the interface itself. This type of user interface functionality
is becoming increasingly commonplace, and days of using static HTML forms for Web
applications are slipping quickly into history.


Figure 14.1 illustrates graphically the hierarchical nature of the scripting object
model and depicts the objects to be presented in following sections. Note that the
dotted lines following objects in this illustration indicate that multiple instances
of that object type may exist. Here's a list of these objects:





FIGURE
14.1.The Internet Explorer scripting object model and object hierarchy.


Table 14.1 summarizes the methods, events, and properties for the IE scripting
object model components illustrated in Figure 14.1. These methods, events, and properties
are all accessible to developers creating database forms and application user interfaces.
They provide a rich set of functionality that can be tapped to created very complex
and sophisticated interfaces for Web applications. 



Table 14.1. A Summary of the Methods, Events, and Properties for
Each Object in the Internet Explorer Object Scripting Model. 


	

		IE Object
		Methods/Event Handlers
		Events
		Properties
	

	

		Window
		alert, confirm, prompt,
		onLoad,
		name, parent, opener, self, top,
	

	

		
		open, close, setTimeout,
		onUnLoad
		location, defaultStatus, status,
	

	

		
		clearTimeout, navigate
		
		frames, history, navigator,
	

	

		
		onLoad and onUnload
		
		document
	

	

		
		event handlers
		
		
	

	

		Document
		write, writeLn, open,
		N/A
		linkColor,aLinkColor, vLinkColor,
	

	

		
		close, clear
		
		bgColor, fgColor, anchors, links, forms,
			location, lastModified, title, cookie, referrer
	

	

		Link
		onMouseMove,
		onMouseMove,
		href, protocol, host, hostname,
	

	

		
		onMouseOver and
		onMouseOver,
		port, pathname, search, hash,
	

	

		
		onClick

			event handlers		
		onClick
		target
	

	

		Anchor
		N/A
		N/A
		name
	

	

		Form
		submit
		onSubmit
		action, encoding, method, target, elements
	

	

		Element
		click, focus, blur,
		onClick,
		form, name, value, defaultValue,
	

	

		
		select onClick,
		onFocus, onBlur,checked, defaultChecked, length,
		
	

	

		
		onFocus, onBlur,
		onChange,
		options, selectedIndex
	

	

		
		onChange and
		onSelect
		
	

	

		
		onSelect event handlers
		
		
	

	

		History
		back, forward, go
		N/A
		length
	

	

		Navigator
		N/A
		N/A
		appCodeName, appName, appVersion,userAgent
	

	

		Location
		N/A
		N/A
		href, protocol, host, hostname,port,
			pathname, search, hash
	







	



RESOURCE:An in-depth document on the IE object
	scripting model can be found at the Microsoft Website at







	
http://www.microsoft.com/intdev/sdk

	











In the Programming Contents frame, scroll down to the section for ActiveX
SDK docs and click the Scripting Obj Model link. This will take you
to a location where you can read the documentation online or download the full 70+
page document in .zip format. This document contains a wealth of information,
including examples, on all the events, event handlers, methods, and properties summarized
in Table 14.1.



The IE Window Object




As illustrated in Figure 14.1, the window object is the top-level object in the
IE scripting object model and, as such, represents the IE window and its methods
and properties. All windows contain the following component objects:





Naming a Window Before a window can be accessed by name, it must first be given
a name. This can be accomplished in a couple of ways. The following code creates
a window with a name frame1 (with contents a.htm) by using the
<FRAMESET> element:


<FRAMESET COLS = "200, *" FRAMEBORDER=0>
  <FRAME NAME= "frame1" SRC="a.htm">
  <FRAME NAME= "frame2" SRC="b.htm">
</FRAMESET>



The following snippet of code accomplishes the same thing by creating the window
with a URL that uses the TARGET attribute:


<A HREF="a.htm" TARGET = "frame1" Click here to see a.htm in frame "frame1".</A>



One other method for giving a window a name is to use the window's open
method, as follows, to create a window named foo (with contents a.htm):


<SCRIPT Language="VBScript">
window.open ("a.htm", "foo");
</SCRIPT>





	



CAUTION:As of Internet Explorer 3.0, the use
	of the open method is still not supported. It is expected to be supported
	in future versions of IE, however. 







Referencing Window Object Properties and Methods Window object properties and
methods can be referenced directly by scripts while in the window scope. For example,
it is possible to reference the window's name within a script using


winname = name



rather than using


winname = window.name



Similarly, the following script will obtain the name of the current page and display
the name by invoking the window's alert method:


<SCRIPT LANGUAGE="VBScript">
     ...
     mystring = name
     alert mystring
     ...
</SCRIPT>




Finally, the properties of other window objects can be accessed without explicitly
mentioning the window. The following code will obtain the name of the current window's
parent:


<SCRIPT LANGUAGE="VBScript">
   ...
   mystring = parent.name
   ...
</SCRIPT>



Adding Scripts to a Window Event Scripts can be added to window events by adding
a script for either the onLoad or onUnLoad events in the <BODY>
tag at the top of a page. Here's an example:


<HTML>
...
<BODY Language="VBScript" onLoad="MyProc">
...
<SCRIPT language="VBScript">
...
Sub MyProc
   MsgBox "This is sub MyProc"
End Sub
...
</SCRIPT>
....
</BODY>
</HTML>



Using this code results in the procedure MyProc being called when the
page is loaded. Calling Scripts from One Window to Another It is possible to call
scripts from one window object to another. For example,


top.my_script()



will execute the script my_script() in the topmost window.



The IE Document Object




As illustrated in Figure 14.1, the document object is the next level below the
window object in the IE scripting object model. The document object reflects the
current HTML document in the browser (as well as objects on the page such as links,
forms, ActiveX controls, buttons, and so on.) All document objects contain the following
component objects:







	



NOTE: Note that the existence of the forms array
	implies the capability to have multiple forms on a page; this is indeed possible.
	In fact, you could have scripts associated with one form that react to user actions
	and subsequently modify attributes of controls on another form. For example, several
	controls (such as checkboxes) have a property called enabled. It is conceivable
	that you may want to desensitize (that is, disable) such a control on one form due
	to a selection by the user on another form. This is easily implemented using code
	such as







	
Document.form(1).mycheckbox.enabled = False











	
within an event handler associated with the form represented by the array entry
	Document.form(0). You could use similar methods to perform other runtime
	modifications to forms, such as adding or removing entries to a pull-down menu control.
	








Accessing Document Object Properties A quick glance at Figure 14.1 reveals that
scripts live within the window object, not the document object. Therefore, in order
to access document properties, it is necessary that script developers use the syntax


document.property



to access the desired property. For example, a document's title can be obtained
using the following script:


<SCRIPT LANGUAGE="VBScript">
   ...
   mystring = document.title
   ...
</SCRIPT>



Similarly, the background color of the HTML page could be set using the following
script:


<SCRIPT LANGUAGE="VBScript">
   document.bgColor = "Blue"
</SCRIPT>



Accessing Forms Within a Document Object There are two ways in which a form can
be accessed in a document: reference by name or through the form array. The following
example illustrates how a form (Form1) is addressed by name:


<FORM NAME="Form1">
     <INPUT TYPE="button" NAME="Button1" VALUE="Press" onClick="pressed">
</FORM>



For this case, a script could then access a button object (Button1) on
the form by referring to form1 by name, as follows:


<SCRIPT LANGUAGE="VBScript">
sub pressed
   document.Form1.Button1.value = "Pressed"
end sub
</SCRIPT>



Alternatively, the button object (Button1) could be accessed by accessing
form1 by index (that is, as the first element, or the element at Index 0,
of the forms array for the document), as follows:


<SCRIPT LANGUAGE="VBScript">
sub pressed
   ...
   document.forms(0).Button1.value = "Pressed"
   arrayLen = document.forms.length   `get the length of forms array
   ...
end sub
</SCRIPT>



Notice in the preceding example that the length of the forms array was also obtained.


It is also possible to refer directly to contained elements that are not form
types. For instance, suppose you have created an object, as follows:


<OBJECT Name="myObject">
</OBJECT>



It is then possible to directly reference this object (say, an ActiveX control)
from within a script. For example, the following code could be used to set the object's
color property:


<SCRIPT LANGUAGE="VBScript">
sub foo
     myObject.color = "purple"
end sub
</SCRIPT>





The IE Form Object




The form object is a level below the document object in the IE scripting object
model. The form object represents a form in the HTML document. There can be multiple
forms within a document object and all are kept as an array as well as by name. All
form objects can contain elements, which are arrays of objects (such as HTML form
intrinsic objects or ActiveX controls) contained within the form. Accessing Elements
Contained in a Form Scripts can reside either within a form object or within a window
object. In the previous section on document objects, you saw that scripts living
outside the form need to access form elements (that is, HTML objects or ActiveX controls)
by name (for example, document.Form1.Button1.value = "Pressed")
or via the form array (for example, document.forms(0).Button1.value = "Pressed").
However, there are cases where the script lies within the form itself:


<FORM NAME="thisForm">
<INPUT TYPE="button" NAME="Button1" VALUE="Press me">
<SCRIPT FOR="thisObject" EVENT="thisEvent" LANGUAGE="VBScript">
   ... your VBScript code here ...
</SCRIPT>
</FORM>



In this case, the elements on the form can be accessed directly as seen with Button1
in the following example:


<FORM NAME="Form1">
<INPUT TYPE="button" NAME="Button1" VALUE="Press me">
<SCRIPT FOR="Button1" EVENT="onClick" LANGUAGE="VBScript">
   Button1.value="Click"     `direct access of this form element
</SCRIPT>
</FORM>



Accessing Methods for Elements Contained in a Form Scripts can also access the
methods of elements contained in a form. For example, say you had a form used to
query a database, and that form contained text input fields such as the following:


<FORM name="myForm">
<input type="text" size="85" maxlength="100" name="author_name">
... other form elements ...
</FORM>



Suppose that a VBScript procedure performs validation of data input to this and
other fields when the user submits the form. If the validation routine detected an
error for a specific input, it would be nice to set the cursor back to this specific
field so that the user can correct the input. This could be accomplished by invoking
the focus method for the text input element where the error occurred. For
example, the data validation routine could contain the following line of code to
accomplish this:


call Document.myForm.author_name.Focus()





The IE Link Object




The link object is a level below the document object in the IE scripting object
model. It is referenced as a read-only property array. Every link that appears in
an HTML document has a corresponding link object constructed and an entry in the
link array.


Links are defined in scripting as the anchor tag, <A>, containing
an HREF attribute. Here's an example:


<A HREF="http://www.omniscient.com/">



All properties of link objects are read-only and are the same as the location
object's properties. Link objects are only accessible via the indexed array. For
example, the fourth link on an HTML page (if it exists) could be referenced using
the following code to access the link object entry at Index 3 in the array (remember
that arrays are 0-indexed):


<SCRIPT language="VBScript">
   ...
   thisLink = document.links(3).href
   ...
</SCRIPT>



In this example, thisLink is set to the value of the href property
(that is, the complete URL for the link) for the fourth link on the page.



The IE Anchor Object




The anchor object is a level below the document object in the IE scripting object
model. The object specifies an array of anchors for a given HTML document. Every
anchor (that is, every <A> tag) that appears in an HTML document has
a corresponding anchor object constructed and an entry in the array.


The anchor object is referenced as a read-only property array. For example, the
fourth anchor on an HTML page (if it exists) could be referenced using the following
code to access the anchor object entry at Index 3 in the array:


<SCRIPT language="VBScript">
   ...
   thisAnchor = document.anchors(3).name
   ...
</SCRIPT>



In this example, thisAnchor is set to the value of the name
property for the fourth anchor on the page.



The IE Element Object




The element object is a level below the form object in the IE scripting object
model. Element objects are commonly intrinsic HTML objects (such as radio buttons
and text input boxes) that are placed on a form using <INPUT> tags.
Additionally, the elements can be more complex objects, such as ActiveX controls,
placed on a form with the <OBJECT> tag. Element objects can be referenced
either by name or by array. In either case, the reference to the object must follow
the identifier for the form on which it resides.


Element objects are of particular interest to Web application developers because
elements on forms provide a primary means of interfacing with the user and collecting
information (such as constraints and clauses for database queries) that will ultimately
be used by the application at the Web server. Additionally, element objects on a
form can be used for presenting data and information (for example, the results of
a database query) to a user. This information might be presented graphically using
an ActiveX charting control or may be used to construct secondary database query
forms that use the result of the primary query to construct additional queries to
support a drill-down analysis. Intrinsic HTML Control Properties, Methods, and Events
Table 14.2 summarizes properties, events, and methods associated with HTML intrinsic
controls. 



Table 14.2. Intrinsic HTML Control Properties, Methods, and Events.



	

		HTML Control
		Properties
		Methods
		Events
	

	

		button, reset,
		form, name, value
		click
		onClick
	

	

		submit
		
		
		
	

	

		checkbox
		form, name, value,
		click, focus
		onClick
	

	

		
		checked, defaultChecked
		
		
	

	

		radio
		form, name, value,
		click, focus
		onClick
	

	

		
		checked
		
		
	

	

		password
		form, name, value,
		focus, blur,
		N/A
	

	

		
		defaultValue
		select
		
	

	

		text, textarea
		form, name, value,
		focus, blur,
		onFocus, onBlur,
	

	

		
		defaultValue
		select
		onChange, onSelect
	

	

		select
		name, length, options,
		focus, blur
		onFocus, onBlur,
	

	

		
		selectedIndex
		
		onChange
	

	

		hidden
		name, value
		N/A
		N/A
	







Two Ways to Script Events from Objects There are two primary ways to script events
from objects. The first method uses the following syntax:


onEvent = "subroutine"



This method can be employed for all HTML intrinsic elements (that is, forms, buttons,
links, and so on). For example, the following code uses this syntax to cause a MsgBox
to be displayed when a button is clicked by the user:


<FORM name="myForm">
     <input type="button" name="myButton" value="Press Me Now!" onClick="pressed">
</FORM>

<SCRIPT language="VBScript">
sub pressed
   MsgBox "You really know how to press my buttons!"
end sub
</SCRIPT>



Note that this scripting method does not work for elements added to a form with
the <OBJECT> tag.


The second method of scripting uses the following syntax:


FOR="object" EVENT="eventname"



This syntax is appropriate for use with any named element, including those added
using the <OBJECT> tag. The following code uses this syntax to cause
a MsgBox to be displayed when a button is clicked by the user:


<FORM name="myForm">
<input type="button" name="myButton" value="Press">
<SCRIPT FOR="Button1" EVENT="onClick" language="VBScript">
    MsgBox "You really know how to press my buttons!"
</SCRIPT>
</FORM>





The IE History Object




The history object is a level below the window object in the IE scripting object
model. This object exposes methods (that is, forward, back, and
go) for navigating through the current browser history list.



The IE Navigator Object




The navigator object is a level below the window object in the IE scripting object
model. Navigator object properties (that is, appCodeName, appName,
appVersion, and userAgent) provide script developers with information
about the browser application.



The IE Location Object




The location object is a level below the window object in the IE scripting object
model. The location object represents the current URL.


Setting any portion of the location object will cause the browser to automatically
navigate to the newly constructed URL. For example, the following code can be used
to cause the browser to navigate to the Omniscient Technologies site:


<SCRIPT language="VBScript">
   ...
   location.href="http://www.omniscient.com/"
</SCRIPT>



This technique could be employed to automatically route users to sites in response
to a query posed by the user. Additionally, if an ActiveX browser control is used
within an HTML document, this technique would be used to navigate the embedded browser
to the site represented by the newly constructed URL.



Spicing Up Your Applications with
ActiveX Controls and VBScript




Before the introduction of HTML 3.2 objects, ActiveX controls, and browsers (such
as Internet Explorer) that support Visual Basic scripting, Web applications developers
were shackled by the restrictions of intrinsic HTML 2.0 form objects and layout capabilities.
These objects allowed virtually no client-side processing of user inputs or actions,
such as a mouse click. Instead, all data validation, conditional logic, and forms
input processing had to take place on the server. This took more time, consumed limited
network bandwidth and server resources, and severely hampered the level of interactiveness
a user could have with an application on a Web browser.


Using HTML 3.2 <OBJECT>s and a growing suite of available ActiveX
controls, developers are now able to create highly interactive applications including







	



RESOURCE: The Microsoft ActiveX Control Pad is
	a Web authoring tool that enables developers to add ActiveX controls and ActiveX
	scripting (using VBScript or JavaScript) to HTML pages via an easy-to-use graphical
	interface. The Control Pad comes complete with several controls that can be added
	to your HTML to enliven your forms and create more functional, interactive applications.
	The ActiveX Control Pad is free and can be downloaded from







	
http://www.microsoft.com/workshop/author/cpad











	
This site also contains links to tutorials, white papers, FAQ samples, and a user
	discussion/support newsgroup. You should also visit the ActiveX Gallery site at

	
http://www.microsoft.com/activex/controls











	
to check out many of the controls offered by third-party vendors. 








What is so significant about these controls and objects? Well, two things really.
First, most provide a rich set of modifiable parameters that allow developers to
tailor how they are presented to the user. For example, size, relative placement,
color, font styles, labeling and captions, and so on can be initialized and modified
at runtime. Second, most of these objects and controls are dynamic in that they respond
to events. These events can be time-related events (such as a specific date or time)
or user events such as a mouse click on the object. The fact that these objects and
controls respond to events enables developers to create response functions associated
with specific events. These response functions are client-side VBScript or JavaScript
programs that take some action based on the type of event and perhaps the state or
value of some object's parameters. This functionality allows developers to break
through the constraints of older HTML and browser technology to create applications
that perform the following functions:





All of this can be done strictly on the client side without communication with
the server, until a form requires the application-specific processing the server
provides (for example, database queries, interacting with a search engine such as
Microsoft's Index Server, or other functionality provided by CGI and ISAPI programs).



	



RESOURCE: A wealth of information about Visual
	Basic scripting can be found at







	
http://www.microsoft.com/vbscript











	
This site includes links to VBScript examples that illustrate how VBScript can
	be incorporated along with HTML 3.2 form objects and ActiveX controls to jazz up
	your Web applications. There are also links to a VBScript FAQ and a downloadable
	tutorial and language reference. 










Formatting Your Forms




An intuitive and aesthetically pleasing layout is part of a well-conceived and
well-designed form. In the past, HTML has not been the best development environment
when it came to satisfying the need for a form layout to be much more complex than
a set of controls laid out in horizontal and vertical lines. However, three events
have changed this situation dramatically:





Using HTML Tables Figure 14.2 illustrates a form with several intrinsic HTML controls
laid out using multiple nested HTML tables. Previously, developing such a form by
hand would take a substantial amount of time. However, development tools now make
developing such form layouts possible in a few minutes. Listing 14.1 provides the
code for this form.



FIGURE
14.2. A form layout that utilizes nested
HTML tables.



Listing 14.1. HTML Code
for the Form Illustrated in Figure 14.2.


<html>
<head>
<title>HTML Controls Formatted Using a TABLE</title>
</head>

<body bgcolor="#FFFFFF">

<p align="center"><font size="4" face="Book Antiqua"><strong>HTML
Controls Formatted Using a &lt;TABLE&gt;</strong></font></p>
<div align="center"><center>

<form method="POST">
<table border="1" width="50%" bordercolor="#000000">
    <tr>
        <td width="50%" bgcolor="#98DCDA">
            <p><input type="radio" checked name="R1" value="V1">Option
            Group 1</p>
        </td>
        <td width="50%" bgcolor="#98DCDA"><input type="radio"
        name="R1" value="V2">Option Group 2</td>
    </tr>
    <tr>
        <td width="50%"><div align="center"><center>
        <table border="0" width="100%">
            <tr>
                <td width="25%">&nbsp;</td>
                <td width="75%"><div align="center"><center>
                <table border="0">
                    <tr>
                        <td width="100%"><input type="checkbox"
                        name="R1C1" value="ON"></td>
                        <td><strong>Selection 1</strong></td>
                    </tr>
                    <tr>
                        <td width="100%"><input type="checkbox"
                        name="R1C2" value="ON"></td>
                        <td><strong>Selection 2</strong></td>
                    </tr>
                    <tr>
                        <td width="100%"><input type="checkbox"
                        name="R1C3" value="ON"></td>
                        <td><strong>Selection 3</strong></td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="R1C4"
                        value="ON"></td>
                        <td><strong>Selection 4</strong></td>
                    </tr>
                </table>
                </center></div></td>
            </tr>
        </table>
        </center></div></td>
        <td width="50%"><div align="center"><center>
        <table border="0" width="100%">
            <tr>
                <td width="25%">&nbsp;</td>
                <td width="75%"><div align="center"><center>
                <table border="0">
                    <tr>
                        <td width="100%"><input type="checkbox"
                        name="R2C1" value="ON"></td>
                        <td><strong>Selection 1</strong></td>
                    </tr>
                    <tr>
                        <td width="100%"><input type="checkbox"
                        name="R2C2" value="ON"></td>
                        <td><strong>Selection 2</strong></td>
                    </tr>
                    <tr>
                        <td width="100%"><input type="checkbox"
                        name="R2C3" value="ON"></td>
                        <td><strong>Selection 3</strong></td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="R2C4"
                        value="ON"></td>
                        <td><strong>Selection 4</strong></td>
                    </tr>
                </table>
                </center></div></td>
            </tr>
        </table>
        </center></div></td>
    </tr>
</table>
 </form>
</center></div>

</body>
</html>



Using the HTML Layout Control The HTML layout control was designed to give developers
a fine level of control over the layout and placement of HTML-intrinsic controls,
ActiveX controls, and other objects on an HTML page. Essentially, the layout control
provides a container for several objects. This container is then inserted as an object
within your HTML document. The following template illustrates how an HTML layout
is inserted into an HTML document:


<html>
<head>
<title> </title>
</head>

... other HTML here ...

<!-- Insert HTML Layout Control here -->
<object id="object_id" classid="CLSID:class_id"
    align="baseline" border="0" style="LEFT:0;TOP:0">
    <param name="ALXPATH" valuetype="ref"
    value="file:drive:\fullpath\filename.alx">
</object>

... other HTML here ...

</body>
</html>



Tools such as the HTML Control Pad by Microsoft provide a visual tool for inserting
objects onto a layout and fine-tuning the placement of these objects. The Control
Pad enables the developer to drag and drop controls on a grid in a manner similar
to developing forms in Visual Basic. The resulting layout is stored in an .alx
file that is then referenced in an HTML document. All controls (as well as their
methods and properties) can be referenced within VB scripts attached to the HTML
document. An example of this is shown in the last section of this chapter.


Figure 14.3 shows a form that uses an HTML layout to emulate the formatting of
the table shown in Figure 14.2. The code for this form is shown in Listings 14.2
and 14.3.



FIGURE
14.3. A form constructed using the HTML
layout control.


Listing 14.2. HTML Code
for the Form Illustrated in Figure 14.3.


<html>
<head>
<title>controls.htm</title>
</head>

<body bgcolor="#FFFFFF">

<p align="center"><font size="5">
<strong>HTML Controls Formatted Using <br>
an HTML Layout Control</strong></font></p>

<p>
<center>
<object id="controls_alx" classid="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF"
  align="baseline" border="0" style="LEFT:0;TOP:0">
  <param name="ALXPATH" valuetype="ref"
   value="file:D:\HTMLLayoutDir\controls.alx">
</object>
</center>
</p>
</body>
</html>



Listing 14.3. Code for
the HTML Layout Control (controls.alx) Referenced in Listing 14.2.


<DIV BACKGROUND="#ffffff" ID="Layout1"
 STYLE="LAYOUT:FIXED;WIDTH:329pt;HEIGHT:218pt;">
    <OBJECT ID="OptionButton1"
     CLASSID="CLSID:8BD21D50-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:25pt;LEFT:41pt;WIDTH:95pt;HEIGHT:18pt;TABINDEX:0;ZINDEX:0;">
        <PARAM NAME="BackColor" VALUE="14079914">
        <PARAM NAME="ForeColor" VALUE="2147483666">
        <PARAM NAME="DisplayStyle" VALUE="5">
        <PARAM NAME="Size" VALUE="3360;635">
        <PARAM NAME="Value" VALUE="0">
        <PARAM NAME="Caption" VALUE="Option Group 1">
        <PARAM NAME="GroupName" VALUE="R1">
        <PARAM NAME="FontName" VALUE="Book Antiqua">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="200">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="OptionButton2"
     CLASSID="CLSID:8BD21D50-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:25pt;LEFT:149pt;WIDTH:89pt;HEIGHT:18pt;TABINDEX:1;ZINDEX:1;">
        <PARAM NAME="BackColor" VALUE="14079914">
        <PARAM NAME="ForeColor" VALUE="2147483666">
        <PARAM NAME="DisplayStyle" VALUE="5">
        <PARAM NAME="Size" VALUE="3122;635">
        <PARAM NAME="Value" VALUE="0">
        <PARAM NAME="Caption" VALUE="Option Group 2">
        <PARAM NAME="GroupName" VALUE="R1">
        <PARAM NAME="FontName" VALUE="Book Antiqua">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="200">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="R1C2"
     CLASSID="CLSID:8BD21D40-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:66pt;LEFT:58pt;WIDTH:75pt;HEIGHT:18pt;TABINDEX:2;ZINDEX:2;">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="ForeColor" VALUE="2147483666">
        <PARAM NAME="DisplayStyle" VALUE="4">
        <PARAM NAME="Size" VALUE="2646;635">
        <PARAM NAME="Value" VALUE="0">
        <PARAM NAME="Caption" VALUE="Selection 2">
        <PARAM NAME="FontName" VALUE="Book Antiqua">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="200">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="R1C4"
     CLASSID="CLSID:8BD21D40-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:99pt;LEFT:58pt;WIDTH:74pt;HEIGHT:18pt;TABINDEX:3;ZINDEX:3;">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="ForeColor" VALUE="2147483666">
        <PARAM NAME="DisplayStyle" VALUE="4">
        <PARAM NAME="Size" VALUE="2619;635">
        <PARAM NAME="Value" VALUE="0">
        <PARAM NAME="Caption" VALUE="Selection 4">
        <PARAM NAME="FontName" VALUE="Book Antiqua">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="200">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="R1C3"
     CLASSID="CLSID:8BD21D40-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:83pt;LEFT:58pt;WIDTH:76pt;HEIGHT:18pt;TABINDEX:4;ZINDEX:4;">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="ForeColor" VALUE="2147483666">
        <PARAM NAME="DisplayStyle" VALUE="4">
        <PARAM NAME="Size" VALUE="2672;635">
        <PARAM NAME="Value" VALUE="0">
        <PARAM NAME="Caption" VALUE="Selection 3">
        <PARAM NAME="FontName" VALUE="Book Antiqua">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="200">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="R1C1"
     CLASSID="CLSID:8BD21D40-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:50pt;LEFT:58pt;WIDTH:71pt;HEIGHT:18pt;TABINDEX:5;ZINDEX:5;">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="ForeColor" VALUE="2147483666">
        <PARAM NAME="DisplayStyle" VALUE="4">
        <PARAM NAME="Size" VALUE="2514;635">
        <PARAM NAME="Value" VALUE="0">
        <PARAM NAME="Caption" VALUE="Selection 1">
        <PARAM NAME="FontName" VALUE="Book Antiqua">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="200">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="R2C4"
     CLASSID="CLSID:8BD21D40-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:99pt;LEFT:165pt;WIDTH:76pt;HEIGHT:18pt;TABINDEX:6;ZINDEX:6;">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="ForeColor" VALUE="2147483666">
        <PARAM NAME="DisplayStyle" VALUE="4">
        <PARAM NAME="Size" VALUE="2672;635">
        <PARAM NAME="Value" VALUE="0">
        <PARAM NAME="Caption" VALUE="Selection 4">
        <PARAM NAME="FontName" VALUE="Book Antiqua">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="200">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="R2C3"
     CLASSID="CLSID:8BD21D40-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:83pt;LEFT:165pt;WIDTH:77pt;HEIGHT:18pt;TABINDEX:7;ZINDEX:7;">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="ForeColor" VALUE="2147483666">
        <PARAM NAME="DisplayStyle" VALUE="4">
        <PARAM NAME="Size" VALUE="2699;635">
        <PARAM NAME="Value" VALUE="0">
        <PARAM NAME="Caption" VALUE="Selection 3">
        <PARAM NAME="FontName" VALUE="Book Antiqua">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="200">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="R2C2"
     CLASSID="CLSID:8BD21D40-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:66pt;LEFT:165pt;WIDTH:75pt;HEIGHT:18pt;TABINDEX:8;ZINDEX:8;">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="ForeColor" VALUE="2147483666">
        <PARAM NAME="DisplayStyle" VALUE="4">
        <PARAM NAME="Size" VALUE="2646;635">
        <PARAM NAME="Value" VALUE="0">
        <PARAM NAME="Caption" VALUE="Selection 2">
        <PARAM NAME="FontName" VALUE="Book Antiqua">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="200">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="R2C1"
     CLASSID="CLSID:8BD21D40-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:50pt;LEFT:165pt;WIDTH:75pt;HEIGHT:18pt;TABINDEX:9;ZINDEX:9;">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="ForeColor" VALUE="2147483666">
        <PARAM NAME="DisplayStyle" VALUE="4">
        <PARAM NAME="Size" VALUE="2646;635">
        <PARAM NAME="Value" VALUE="0">
        <PARAM NAME="Caption" VALUE="Selection 1">
        <PARAM NAME="FontName" VALUE="Book Antiqua">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="200">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
</DIV>



This example showed you how to emulate the formatting of the table shown in the
previous example. Unlike tables, however, formatting provided by the HTML layout
control is not limited to placing objects in rows and columns. You could just as
easily lay out the controls in a circular pattern or any other format you want. You
can even overlay controls on top of each other if you wish. This technique can be
used in conjunction with the ActiveX shape controls to create visually appealing
forms that use colored shapes as backdrops to controls placed on a page. This backdrop
object can be a variety of shapes and, if used properly, can emphasize logical groupings
of controls.



Implementing ActiveX Controls and
VBScript: A Search Engine Query Form Example




In this section you get a glimpse of the greatly improved functionality and interactiveness
that ActiveX controls and VBScript can bring to your applications. This example illustrates
the construction of a form used to submit a query to Microsoft's Index Server (a
content-indexing search engine tool for IIS). Several familiar HTML form objects
are used along with the following ActiveX controls:





Figure 14.4 illustrates the Index Server query form created for this example.



FIGURE
14.4. An Index Server Query form implementing
ActiveX controls and VBScript subroutines to respond to user actions.


A few notes about this form:





FIGURE
14.5. VBScript MsgBox used to warn users
when they select a time-consuming search using the form shown in Figure 14.4.







	



RESOURCE: Additional information about FrontPage (including
	an occasional free beta version) can be found at the FrontPage site:







	
http://www.microsoft.com/frontpage

	











Listing 14.4 is a full listing for the HTML and VBScript code used to develop
the form in Figure 14.4.







Listing 14.4. HTML and
VBScript Code for the Index Server Query Form Shown in Figure 14.4.


<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Microsoft FrontPage 2.0">
<title>Index Server Query Form</title>
</head>

<body bgcolor="#FFFFFF">

<p align="center">&nbsp;<font color="#0000A8" size="5"
face="Wide Latin"><strong>I</strong></font><font color="#0000A8"
size="4" face="Wide Latin"><strong>NDEX </strong></font><font
color="#0000A8" size="5" face="Wide Latin"><strong>S</strong></font><font
color="#0000A8" size="4" face="Wide Latin"><strong>ERVER </strong></font><font
color="#0000A8" size="5" face="Wide Latin"><strong>Q</strong></font><font
color="#0000A8" size="4" face="Wide Latin"><strong>UERY </strong></font><font
color="#0000A8" size="5" face="Wide Latin"><strong>F</strong></font><font
color="#0000A8" size="4" face="Wide Latin"><strong>ORM</strong></font></p>

<form action="/scripts/vbtest.idq" method="GET" name="MainForm">
 <div align="center"><center>
 <table border="1" bgcolor="#A4B0BD" bordercolor="#008080"
   bordercolordark="#008080" bordercolorlight="#008080">
     <tr>
         <td align="center"><div align="center"><center>
         <table border="1" cellspacing="1" bgcolor="#A4B0BD"
         bordercolor="#008080" bordercolordark="#008080"
         bordercolorlight="#008080">
             <tr>
                 <td align="center"><font color="#FFFFFF"
                 size="3" face="Arial"><strong>Enter a query
                 restriction below</strong></font><font
                 color="#FFFFFF" size="4" face="Arial">:</font>
                 </td>
                 <td align="right">
                 <input type="checkbox" name="cbEnum" value="ON">
                 <strong>Allow Enumerated Search?</strong>
                 </td>
             </tr>
             <tr>
                 <td colspan="2" width="80%">
                 <input type="text" size="85" maxlength="100"
                  name="CiRestriction">
                 </td>
             </tr>
         </table>
         </center></div></td>
     </tr>
     <tr>
         <td align="center"><div align="center"><center>
         <table border="0">
             <tr>
                 <td align="center" width="50%">
                  <input type="radio" checked name="rbbool" value="AND">
                  <font face="Wide Latin"><strong>AND </strong></font>
                 </td>
                 <td align="center" width="50%">
                   <input type="radio" name="rbbool" value="OR"><font
                   face="Wide Latin"><strong>OR</strong></font>
                 </td>
             </tr>
         </table>
         </center></div></td>
     </tr>
     <tr>
         <td align="center"><div align="center"><center>
         <table border="0">
             <tr>
                 <td align="center" width="33%"><font size="3"
                   face="Wide Latin"><strong>Filesize</strong></font>
                 </td>
                 <td align="center" width="20%">
                   <object id="lblInequal" name="lblInequal"
                     classid="clsid:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
                     align="middle" border="0" width="16" height="24">
                     <param name="ForeColor" value="128">
                     <param name="BackColor" value="16777215">
                     <param name="Caption" value="&gt;">
                     <param name="Size" value="423;635">
                     <param name="FontName" value="Wide Latin">
                     <param name="FontEffects" value="1073741825">
                     <param name="FontHeight" value="360">
                     <param name="FontCharSet" value="0">
                     <param name="FontPitchAndFamily" value="2">
                     <param name="FontWeight" value="700">
                    </object>
                 </td>
                 <td align="center" width="34%"><div align="center"><center>
                 <table border="1" bgcolor="#A4B0BD" bordercolor="#008080"
                  bordercolordark="#008080" bordercolorlight="#008080">
                     <tr>
                         <td align="center" width="8%">
                         <object id="btnFSize" name="btnFSize"
                          classid="clsid:79176FB0-B7F2-11CE-97EF-00AA006D2776"
                          align="baseline" border="0" width="16" height="31">
                          <param name="Size" value="418;781">
                          <param name="Min" value="5000">
                          <param name="Max" value="100000">
                          <param name="Position" value="5000">
                          <param name="SmallChange" value="10000">
                         </object>
                         </td>
                         <td align="center" width="20%">
                         <object id="txtFSize" name="txtFSize"
                          classid="clsid:8BD21D10-EC42-11CE-9E0D-00AA006002F3"
                          align="baseline" border="0" width="127" height="25">
                          <param name="VariousPropertyBits" value="746604571">
                          <param name="BackColor" value="13290186">
                          <param name="ForeColor" value="3084984">
                          <param name="BorderStyle" value="1">
                          <param name="Size" value="3329;670">
                          <param name="SpecialEffect" value="0">
                          <param name="FontName" value="Wide Latin">
                          <param name="FontEffects" value="1073741825">
                          <param name="FontHeight" value="240">
                          <param name="FontCharSet" value="0">
                          <param name="FontPitchAndFamily" value="2">
                          <param name="ParagraphAlign" value="2">
                          <param name="FontWeight" value="700">
                         </object>
                         </td>
                     </tr>
                 </table>
                 </center></div></td>
                 <td><font size="4" face="Wide Latin">
                      <strong>Bytes</strong></font>
                 </td>
             </tr>
         </table>
         </center></div></td>
     </tr>
     <tr>
         <td align="center"><input type="submit" value="Execute Query">
          <input type="reset" name="1" value="Clear">
         </td>
     </tr>
 </table>
 </center></div><p align="center">&nbsp;</p>
 <p align="center">&nbsp;</p>
 <p align="center">&nbsp;</p>
 <p align="center">&nbsp;</p>
 <p align="center">&nbsp;</p>
 <p align="center">&nbsp;</p>
</form>

<script language="VBScript">
<!--

Dim F

Set F = Document.MainForm

btnMin = 5000
btnMax = 100000

F.btnFSize.value = btnMin
F.txtFSize.value = btnMin

sub btnFSize_SpinUp
   F.txtFSize.value = F.btnFSize.value
end sub

sub btnFSize_SpinDown
   F.txtFSize.value = F.btnFSize.value
end sub

sub lblInequal_Click
   if F.lblInequal.caption = ">" then
      F.lblInequal.caption = "<"
   else
      F.lblInequal.caption = ">"
   end if
end sub

sub cbEnum_OnClick
   if F.cbEnum.Checked then
     MsgBox "Please be advised that enumerated searches can take a long time
           Â to complete and use valuable system resources.  If an enumerated
           Â search is not absoultely required, please change your selection"
   end if
end sub
-->
</script>

</body>
</html>



Don't be fazed by the reference to an .idq file in the ACTION
attribute for the form. This is simply a file used by Index Server to consolidate
form content (passed to the server when the form is submitted) and then pose a query
to the search engine.



	



RESOURCE: For additional information on Index
	Server, refer to Designing and Implementing Microsoft Index Server (Sams Publishing,
	ISBN: 1-57521-212-9). This book contains detailed information on what Index Server
	is, what functionality it provides, and how it can be integrated with your other
	Web applications (such as database queries). 









Putting It All TogetherDeveloping
a Form for Database Access




In this section we pull together several of the concepts presented in earlier
sections of this chapter to show you how to construct an interactive database query
form using VBScript, ActiveX controls, and the HTML layout control. This example
illustrates the construction of a form used to submit a query to the Microsoft SQL
Server pubs database. The database query form can be seen in Figure 14.6.



FIGURE
14.6. The database query form used to
query the MS SQL Server pubs database.



Creating the HTML Layout




An HTML layout control is used as a container for controls that will collect user
input that is subsequently sent to the server and used to pose a query to the database.
The following types of ActiveX controls are contained on the layout:





These controls are used to enter information such as author names, book titles,
book categories, and price information that will be read by VB scripts attached to
the main HTML form and submitted to the server to formulate a query to the pubs
database. This simple form provides great flexibility in the types of queries and
clauses that can be constructed.


Figure 14.7 illustrates how the layout looks during construction using the HTML
Control Pad.



FIGURE
14.7. The construction of the HTML layout
used in the database query form shown in Figure 14.6.


The code created by the HTML Control Pad is shown in Listing 14.5.


Listing 14.5. Code for
the HTML Layout (pubs_query_layout.alx) Used by the Pubs Database Query Form Shown
in Figure 14.6.


<!--
   pub_query_layout.alx

   ALX HTML Layout and VBScript for Controls held within
   pubs_query.htm database query form

   created Feb 1997 - Drew Kittel
-->

<SCRIPT LANGUAGE="VBScript">
<!--

`Add menu items and set the default value displayed

Sub pub_query_layout_OnLoad()

call cboTitle.AddItem("like", 0)
call cboTitle.AddItem("in", 1)
call cboTitle.AddItem("=", 2)
cboTitle.value = "like"
call cboAuthor.AddItem("like", 0)
call cboAuthor.AddItem("in", 1)
call cboAuthor.AddItem("=", 2)
cboAuthor.value = "like"

end sub
-->
</SCRIPT>

<DIV BACKGROUND="#ffffff" ID="pub_query_layout"
 STYLE="LAYOUT:FIXED;WIDTH:386pt;HEIGHT:234pt;">
    <OBJECT ID="lblTitle"
     CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
     STYLE="TOP:5pt;LEFT:6pt;WIDTH:71pt;HEIGHT:17pt;ZINDEX:0;">
        <PARAM NAME="ForeColor" VALUE="16711680">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="Caption" VALUE="Book Title:">
        <PARAM NAME="Size" VALUE="2505;600">
        <PARAM NAME="FontName" VALUE="Arial">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="240">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="txtTitle"
     CLASSID="CLSID:8BD21D10-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:3pt;LEFT:170pt;WIDTH:207pt;HEIGHT:17pt;TABINDEX:1;ZINDEX:1;">
        <PARAM NAME="VariousPropertyBits" VALUE="746604571">
        <PARAM NAME="Size" VALUE="7303;600">
        <PARAM NAME="FontName" VALUE="Arial">
        <PARAM NAME="FontHeight" VALUE="240">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
    </OBJECT>
    <OBJECT ID="lblAuthor"
     CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
     STYLE="TOP:55pt;LEFT:6pt;WIDTH:110pt;HEIGHT:17pt;ZINDEX:2;">
        <PARAM NAME="ForeColor" VALUE="16711680">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="Caption" VALUE="Author Lastname:">
        <PARAM NAME="Size" VALUE="3881;600">
        <PARAM NAME="FontName" VALUE="Arial">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="240">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="txtAuthor"
     CLASSID="CLSID:8BD21D10-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:55pt;LEFT:169pt;WIDTH:209pt;HEIGHT:17pt;TABINDEX:3;ZINDEX:3;">
        <PARAM NAME="VariousPropertyBits" VALUE="746604571">
        <PARAM NAME="Size" VALUE="7373;600">
        <PARAM NAME="FontName" VALUE="Arial">
        <PARAM NAME="FontHeight" VALUE="240">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
    </OBJECT>
    <OBJECT ID="optAND1"
     CLASSID="CLSID:8BD21D50-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:30pt;LEFT:6pt;WIDTH:41pt;HEIGHT:18pt;TABINDEX:4;ZINDEX:4;">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="ForeColor" VALUE="2147483666">
        <PARAM NAME="DisplayStyle" VALUE="5">
        <PARAM NAME="Size" VALUE="1446;635">
        <PARAM NAME="Value" VALUE="1">
        <PARAM NAME="Caption" VALUE="AND">
        <PARAM NAME="GroupName" VALUE="Group1">
        <PARAM NAME="FontEffects" VALUE="1073741827">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="optOR1"
     CLASSID="CLSID:8BD21D50-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:30pt;LEFT:47pt;WIDTH:36pt;HEIGHT:18pt;TABINDEX:5;ZINDEX:5;">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="ForeColor" VALUE="2147483666">
        <PARAM NAME="DisplayStyle" VALUE="5">
        <PARAM NAME="Size" VALUE="1270;635">
        <PARAM NAME="Value" VALUE="0">
        <PARAM NAME="Caption" VALUE="OR">
        <PARAM NAME="GroupName" VALUE="Group1">
        <PARAM NAME="FontEffects" VALUE="1073741827">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="lblCat"
     CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
     STYLE="TOP:104pt;LEFT:6pt;WIDTH:71pt;HEIGHT:17pt;ZINDEX:6;">
        <PARAM NAME="ForeColor" VALUE="16711680">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="Caption" VALUE="Categories:">
        <PARAM NAME="Size" VALUE="2505;600">
        <PARAM NAME="FontName" VALUE="Arial">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="240">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="chk1"
     CLASSID="CLSID:8BD21D40-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:104pt;LEFT:113pt;WIDTH:140pt;HEIGHT:18pt;TABINDEX:7;ZINDEX:7;">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="ForeColor" VALUE="16711680">
        <PARAM NAME="DisplayStyle" VALUE="4">
        <PARAM NAME="Size" VALUE="4939;635">
        <PARAM NAME="Value" VALUE="0">
        <PARAM NAME="Caption" VALUE="WWW DB Development">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="200">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="chk2"
     CLASSID="CLSID:8BD21D40-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:121pt;LEFT:113pt;WIDTH:130pt;HEIGHT:18pt;TABINDEX:8;ZINDEX:8;">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="ForeColor" VALUE="16711680">
        <PARAM NAME="DisplayStyle" VALUE="4">
        <PARAM NAME="Size" VALUE="4586;635">
        <PARAM NAME="Value" VALUE="0">
        <PARAM NAME="Caption" VALUE="Internet Programming">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="200">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="chk3"
     CLASSID="CLSID:8BD21D40-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:137pt;LEFT:113pt;WIDTH:116pt;HEIGHT:18pt;TABINDEX:9;ZINDEX:9;">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="ForeColor" VALUE="16711680">
        <PARAM NAME="DisplayStyle" VALUE="4">
        <PARAM NAME="Size" VALUE="4092;635">
        <PARAM NAME="Value" VALUE="0">
        <PARAM NAME="Caption" VALUE="General Computing">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="200">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="chk4"
     CLASSID="CLSID:8BD21D40-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:154pt;LEFT:113pt;WIDTH:108pt;HEIGHT:18pt;TABINDEX:10;ZINDEX:10;">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="ForeColor" VALUE="16711680">
        <PARAM NAME="DisplayStyle" VALUE="4">
        <PARAM NAME="Size" VALUE="3810;635">
        <PARAM NAME="Value" VALUE="0">
        <PARAM NAME="Caption" VALUE="General Business">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="200">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="chk5"
     CLASSID="CLSID:8BD21D40-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:170pt;LEFT:113pt;WIDTH:63pt;HEIGHT:18pt;TABINDEX:11;ZINDEX:11;">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="ForeColor" VALUE="16711680">
        <PARAM NAME="DisplayStyle" VALUE="4">
        <PARAM NAME="Size" VALUE="2223;635">
        <PARAM NAME="Value" VALUE="0">
        <PARAM NAME="Caption" VALUE="Cooking">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="200">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="chk6"
     CLASSID="CLSID:8BD21D40-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:187pt;LEFT:113pt;WIDTH:99pt;HEIGHT:18pt;TABINDEX:12;ZINDEX:12;">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="ForeColor" VALUE="16292154">
        <PARAM NAME="DisplayStyle" VALUE="4">
        <PARAM NAME="Size" VALUE="3493;635">
        <PARAM NAME="Value" VALUE="0">
        <PARAM NAME="Caption" VALUE="Other (specify)">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="200">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="txtOther"
     CLASSID="CLSID:8BD21D10-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:187pt;LEFT:204pt;WIDTH:173pt;HEIGHT:17pt;TABINDEX:13;ZINDEX:13;">
        <PARAM NAME="VariousPropertyBits" VALUE="746604571">
        <PARAM NAME="Size" VALUE="6103;600">
        <PARAM NAME="FontName" VALUE="Arial">
        <PARAM NAME="FontHeight" VALUE="240">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
    </OBJECT>
    <OBJECT ID="optAND2"
     CLASSID="CLSID:8BD21D50-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:80pt;LEFT:6pt;WIDTH:41pt;HEIGHT:18pt;TABINDEX:14;ZINDEX:14;">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="ForeColor" VALUE="2147483666">
        <PARAM NAME="DisplayStyle" VALUE="5">
        <PARAM NAME="Size" VALUE="1446;635">
        <PARAM NAME="Value" VALUE="1">
        <PARAM NAME="Caption" VALUE="AND">
        <PARAM NAME="GroupName" VALUE="Group2">
        <PARAM NAME="FontEffects" VALUE="1073741827">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="optOR2"
     CLASSID="CLSID:8BD21D50-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:80pt;LEFT:47pt;WIDTH:36pt;HEIGHT:18pt;TABINDEX:15;ZINDEX:15;">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="ForeColor" VALUE="2147483666">
        <PARAM NAME="DisplayStyle" VALUE="5">
        <PARAM NAME="Size" VALUE="1270;635">
        <PARAM NAME="Value" VALUE="0">
        <PARAM NAME="Caption" VALUE="OR">
        <PARAM NAME="GroupName" VALUE="Group2">
        <PARAM NAME="FontEffects" VALUE="1073741827">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="lblPrice"
     CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
     STYLE="TOP:212pt;LEFT:6pt;WIDTH:73pt;HEIGHT:17pt;ZINDEX:16;">
        <PARAM NAME="ForeColor" VALUE="16711680">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="Caption" VALUE="Unit Price:">
        <PARAM NAME="Size" VALUE="2575;600">
        <PARAM NAME="FontName" VALUE="Arial">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="240">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="lblInEqual"
     CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
    STYLE="TOP:206pt;LEFT:116pt;WIDTH:14pt;HEIGHT:22pt;ZINDEX:17;">
        <PARAM NAME="ForeColor" VALUE="16711680">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="Caption" VALUE="&lt;">
        <PARAM NAME="Size" VALUE="511;767">
        <PARAM NAME="FontName" VALUE="Arial">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="400">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="cboTitle"
     CLASSID="CLSID:8BD21D30-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:3pt;LEFT:117pt;WIDTH:46pt;HEIGHT:17pt;TABINDEX:18;ZINDEX:18;">
        <PARAM NAME="VariousPropertyBits" VALUE="746604571">
        <PARAM NAME="DisplayStyle" VALUE="3">
        <PARAM NAME="Size" VALUE="1623;600">
        <PARAM NAME="MatchEntry" VALUE="1">
        <PARAM NAME="ShowDropButtonWhen" VALUE="2">
        <PARAM NAME="FontName" VALUE="Arial">
        <PARAM NAME="FontHeight" VALUE="240">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
    </OBJECT>
    <OBJECT ID="txtPrice"
     CLASSID="CLSID:8BD21D10-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:209pt;LEFT:140pt;WIDTH:53pt;HEIGHT:17pt;TABINDEX:19;ZINDEX:19;">
        <PARAM NAME="VariousPropertyBits" VALUE="746604571">
        <PARAM NAME="Size" VALUE="1870;600">
        <PARAM NAME="Value" VALUE="50.00">
        <PARAM NAME="FontName" VALUE="Arial">
        <PARAM NAME="FontHeight" VALUE="240">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
    </OBJECT>
    <OBJECT ID="cboAuthor"
     CLASSID="CLSID:8BD21D30-EC42-11CE-9E0D-00AA006002F3"
     STYLE="TOP:55pt;LEFT:117pt;WIDTH:45pt;HEIGHT:17pt;TABINDEX:20;ZINDEX:20;">
        <PARAM NAME="VariousPropertyBits" VALUE="746604571">
        <PARAM NAME="DisplayStyle" VALUE="3">
        <PARAM NAME="Size" VALUE="1588;600">
        <PARAM NAME="MatchEntry" VALUE="1">
        <PARAM NAME="ShowDropButtonWhen" VALUE="2">
        <PARAM NAME="FontName" VALUE="Arial">
        <PARAM NAME="FontHeight" VALUE="240">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
    </OBJECT>
</DIV>

<SCRIPT LANGUAGE="VBScript">
<!--
` Change direction of inequality when clicked
` on by user
sub lblInEqual_Click
   if lblInEqual.caption = ">" then
      lblInEqual.caption = "<"
   else
      lblInEqual.caption = ">"
   end if
end sub
-->
</SCRIPT>



There is something very significant here that has not been explicitly pointed
out previously. Not only is it possible to attach VB scripts to controls in your
HTML files, it is also possible, as shown in the example, to attach scripts to the
layout object itself and to objects within the layout. Listing 14.5 contains two
such scripts. The script at the beginning of the file (pub_query_layout_OnLoad())
is invoked by the layout control's OnLoad event and is responsible for loading
options into the ComboBox control using the AddItem method. It also presets
the value property that is initially displayed. The script at the end of
the file (lblInEqual_Click) is used to toggle the displayed value of the
inequality (<, >) label when the user clicks it.



Creating the HTML Form




A Microsoft Forms 2.0 CommandButton control is included in the HTML form that
holds the layout control. The event procedure (btnSubmit_Click()) associated
with this button is used to perform validation and checking of user entries to the
fields on the form as well as invoke the form's submit method in order to
submit the form to the server for processing. Doing things in this manner allows
you to execute the code necessary to validate input and inhibit submission of the
form should any problems be detected. This would not have been possible using an
intrinsic HTML SUBMIT button type.


The HTML and VBScript code for this form (refer to Figure 14.6) is shown in Listing
14.6.



Listing 14.6. HTML and
VBScript Code for the pubs database query form Shown in Figure 14.6.


<!--
   pubs_query.htm - Database query form
   Contains HTML Layout, HTML controls and VBScript for Controls
   Created Feb 1997 - Drew Kittel
-->

<html>
<HEAD>
<title>Publisher's Query Page</title>
</HEAD>
<BODY bgcolor="#FFFFFF">

<DIV align="center">
<center>
<table border="0" width="100%">
    <tr>
        <td align="center" width="10%">
        <IMG src="books.gif"  width="64" height="64">
        </td>
        <td width="50%"><font color="#0000FF" size="6" face="Arial">
        <strong>Publisher's Query Page</strong></font>
        </td>
    </tr>
</table>
</center>
</DIV>
<hr>

<p align="center"><font size="4" face="Arial"><em><strong>
Use the following form to query our extensive book database
and view abstracts and summaries of books matching your search criteria.
</strong></em></font></p>


<FORM ACTION="http://dkittel.clark.net:8080/cgi-win/process_form_demo.exe"
      METHOD="POST"  NAME="QFORM">

<center>
<table border="1" width="80%" bordercolor="#0000FF">
    <tr>
        <td align="center">
        <OBJECT ID="qform_layout"
         CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF">
            <PARAM NAME="ALXPATH" REF VALUE="pub_query_layout.alx">
        </OBJECT>
        </td>
    </tr>
    <TR>
        <TD ALIGN=CENTER bgcolor="#70BBF3">
        <OBJECT ID="btnSubmit" WIDTH=115 HEIGHT=32
         CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
            <PARAM NAME="ForeColor" VALUE="16711680">
            <PARAM NAME="BackColor" VALUE="13750737">
            <PARAM NAME="Caption" VALUE="SUBMIT QUERY">
            <PARAM NAME="Size" VALUE="3037;846">
            <PARAM NAME="FontName" VALUE="Arial">
            <PARAM NAME="FontEffects" VALUE="1073741825">
            <PARAM NAME="FontHeight" VALUE="200">
            <PARAM NAME="FontCharSet" VALUE="0">
            <PARAM NAME="FontPitchAndFamily" VALUE="2">
            <PARAM NAME="ParagraphAlign" VALUE="3">
            <PARAM NAME="FontWeight" VALUE="700">
        </OBJECT>
        </TD>
     </TR>
</table>
</center>


<! -- preset hidden form variables used to send user input on Submit -->
        <INPUT TYPE=hidden NAME="TITLE" value=" ">
        <INPUT TYPE=hidden NAME="TITLEOP" value=" ">
        <INPUT TYPE=hidden NAME="TITLECLAUSE" value=" ">
        <INPUT TYPE=hidden NAME="AUTHOR" value = " ">
        <INPUT TYPE=hidden NAME="AUTHOROP" value = " ">
        <INPUT TYPE=hidden NAME="AUTHORCLAUSE" value=" ">
        <INPUT TYPE=hidden NAME="CAT1" value = "OFF">
        <INPUT TYPE=hidden NAME="CAT2" value = "OFF">
        <INPUT TYPE=hidden NAME="CAT3" value = "OFF">
        <INPUT TYPE=hidden NAME="CAT4" value = "OFF">
        <INPUT TYPE=hidden NAME="CAT5" value = "OFF">
        <INPUT TYPE=hidden NAME="CAT6" value = "OFF">
        <INPUT TYPE=hidden NAME="CATOTHER" value = "OFF">
        <INPUT TYPE=hidden NAME="INEQUALITY" value = " ">
        <INPUT TYPE=hidden NAME="PRICE" value = " ">

</FORM>


<SCRIPT LANGUAGE="VBScript">
<!--
`''''''''''''''''''''''''''''''''''''''''''''
` Check if field has data or is empty
`''''''''''''''''''''''''''''''''''''''''''''

Function ValidateTextField(formField, warnMessage)
   if Len(formField.Value) = 0 then
      alert warnMessage
      ValidateTextField = 0
      exit Function
   end if
   ValidateTextField = 1
End Function


`'''''''''''''''''''''''''''''''''''''''''''''''''
` This code is executed by a button click.
` Execution is prior to sending form contents
` via submit method
`'''''''''''''''''''''''''''''''''''''''''''''''''

Sub btnSubmit_Click()

   Dim F
   Set F = Document.QFORM

   ` Alert user that some field data may be missing (not
   ` that they are necessarily needed for the current query)

   dummy = ValidateTextField(F.qform_layout.txtTitle, "Title field is empty")
   dummy = ValidateTextField(F.qform_layout.txtAuthor, "Author field is empty")

   ` Don't allow submit if price is missing or < 0

   if ValidateTextField(F.qform_layout.txtPrice, "You must supply a Price
       Âvalue!") = 0 then
     exit sub
   end if

   if F.qform_layout.txtPrice.Value < 0 then
     alert "Price value must be a positve number.  Re-enter a value and
           Âre-submit the form"
     exit sub
   end if


   ` Obtain values of controls on H