The ABCs of creating input forms with HTA
About a year and a half ago, I was using HTML pages for user input forms. I used HTML pages mainly because I needed a way to mask password input. Believe me, it was just the most basic of HTML pages because I'm far from being a Web developer.
The HTML pages were working fine, but then came the onslaught of Microsoft Internet Explorer (IE) patches and Windows service packs that started nailing down IE. I found that after installing these patches and service packs, my scripts were being challenged. I could no longer just double-click my program and enter the data. Now I had to respond to new security prompts before my page was actually ready to accept input. The challenges had to do with what is now considered restricted or active content—mainly, scripts and ActiveX components within the HTML code. I could only stand having to click my way through these new security prompts so long before I decided I had to come up with an alternative. Plus, I knew other administrators were using my scripts and that I'd soon be getting email messages and telephone calls from them.
The solution to this problem hit me when I least expected it. When I double-clicked the Microsoft Scripting Guys' new Scriptomatic 2.0 program for the first time, I encountered a cool-looking application. Even better, there were no security prompts when I launched it. I was amazed at what those Scripting Guys had created using an HTML Application (HTA) interface. I was hooked.
Having been introduced in IE 5.0, HTAs have been around for a while. But thinking back to the days of IE 5.0 when I just started writing Windows NT administration scripts, I don't recall ever hearing or reading about them. For the most part, an HTA is just an HTML page with an .hta extension. However, an HTA isn't subject to the tight restraints or security constraints of a HTML page.
Writing HTAs requires an adjustment in the way you're used to writing scripts. Basically, you use HTML code to create your input form and insert your VBScript code into the HTML code. The main thrust is to provide an input form with a button that, when clicked, generates an <i>onclick event.</i> In other words, after a user enters data on the input form and clicks the button, your VBScript code executes and the real work takes place.
If you're not familiar with HTML coding, as was my case initially, you'll find that you need to do a little research on the Microsoft Developer Network (MSDN). But there areso many references and examples available you could easily be on your way to creating really great HTAs in just a few days.
Although worth it, digging through MSDN's great wealth of coding references, then spending a few days writing HTA code with Notepad is a lot of work. If you want to save a great deal of time and get a tremendous jump on the learning curve, you'll want to consider using a Web development package. I had a trial version of Microsoft FrontPage from a Microsoft event I attended, so I installed and used it.
Using a Web development package versus manually writing HTML code is like night and day. Most, if not all, of the code is automatically created as you graphically design your input form. When you're done designing the input form, you just need to insert your code into the script section and save the file with an .hta extension.
Please note that I have no ties to Microsoft, and this isn't an endorsement for FrontPage. The trial package of FrontPage was simply an application I had readily available.
One note of caution: Just like any application or script, an HTA can be potentially harmful, especially coming from an unknown or untrusted source. As a general rule, if you receive files from an unknown source, don't open them, just delete them. I use HTAs strictly in-house and pass them along only to people I know.
Figure 1 shows a basic HTA, and Listing 1 shows the code that creates this HTA. HTML code follows a simple structure composed of elements, which consist of tags. For the most part, tags come in pairs. The < > tag starts an element and the </ > tag ends it.
As Listing 1 shows, the <html> tag starts the HTA and the </html> ends it. Next, the head element provides an unordered collection of information about the document. In this example, the input form's title and window elements are defined between the <head> and </head> tags. The HTA:APPLICATION element, which callout A in Listing 1 shows, defines the look and feel of the input form. In this case, the HTA:APPLICATION element settings display a UI window with a thin sunken border, enable the Minimize and Maximize buttons, and disable the scroll bar and the application icon so that they don't appear in the taskbar.
The CAPTION and SYSMENU attributes can be a little tricky. If you set them wrong, you might find yourself with a nice-looking form but no way to close it. When you set the CAPTION attribute to no, you eliminate the title bar from the top of your application window. When you set the SYSMENU attribute to no, you eliminate the Minimize, Maximize, and Close buttons. If you intend to set either the CAPTION or SYSMENU attribute to no, make sure you have a Close button on your page.
When testing the HTA, I noticed that if you omit all the HTA:APPLICATION attributes and just include the <HTA:APPLICATION> tag, the default settings are used and they're quite satisfactory. If you want to customize the look and feel of the input form, Table 1 lists the available HTA:APPLICATION attributes and gives their possible values, including defaults.
Callout B in Listing 1 shows the HTA's script element, which begins with the <script> tag and ends with the </script> tag. The language= attribute specifies the scripting language, which in this case is VBScript. In the sample HTA, the script element contains a simple VBScript subroutine that executes when the user clicks the Push this button to run script button. There's nothing fancy here, but you can virtually copy any existing VBScript code between the <script> and </script> tags and have a working HTA in a short period of time.
The last section in Listing 1 begins with the <body> tag and ends with the </body> tag. This body element contains the HTML code that creates the input form in which users enter data into fields and click buttons. In the sample HTA in Figure 1, there are two input fields: a regular text box and a password text box that masks any text that the users enter. There are also two buttons: one that runs the VBScript code and another that closes the application.
Let's take a closer look at the code in the body element. Callout C highlights the code that creates the regular text box in Figure 1. In this code, the <p> tag starts a new paragraph, whereas the </p> tag ends it. You use the <font> and </font> tags to set the font face, size, and color of text. You don't need to use these tags if you want to use the default text style, which is the font face of Times New Roman, the font color of black, and the font size of 3. Note that the font sizes don't follow the traditional font sizes that you might see in Microsoft Word, for example. In HTML, you can specify seven sizes (1 through 7) with the size= attribute, with font size 1 being the smallest and font size 7 being the largest. Even though the sample HTA uses the default font size, the code in callout C sets the font size to 3 for the words Text box and the words Use a text box for most any type of input for demonstration purposes.
The input element defines an input field in which the user can enter data. The type= attribute specifies the type of input field (e.g., regular textbox, password text box, regular button, radio button). In this case, we're creating a regular text box (type="text") that has the name T1 (name="T1") and is 20 characters long (size="20"). T1.value is how you reference this text box in your VBScript code. Unlike most tags, the <input> tag has no ending tag.
The code for the password text box follows the same format as the code for the regular text box. However, in this case, you specify "password" rather than "text" for the type= attribute so that any text that users enter is masked.
Callout D shows the code that creates the Push this button to run script button and the Exit button. Both buttons have an input type of "button". Both buttons also have an input attribute called onclick. You set the onclick attribute to the name of the subroutine, method, or other code you want the application to run when users click the button. For the Push this button to run script button, onclick is set to the showsetting subroutine, which callout B in Listing 1 shows. This subroutine displays the text that users enter in the Text box field and the Password box field. (The text the users enter in the Password box will be displayed in plain text.) The Exit button's onclick attribute is set to the self.close method. This method immediately closes down the HTA. Self refers to the current open window.
Just Scratching the Surface
This sample HTA just scratches the surface of what you can do with HTAs. Next month, I'll show you how to create an HTA that lets you set and check user quotas on local and remote computers.