Users of Windows applications are fickle—they actually expect the user interface to be easy to understand, straightforward, and logical. This means anything from menus that are ordered so we can easily find program options, to text boxes that automatically start with the text most commonly entered. It used to be difficult to achieve this friendliness with HTML. Only a few input elements were available to request data from the user, and fine layout of these elements was often hard to manage. Fortunately, HTML has advanced substantially over the last few years, and, with objects and script code, many previously impossible things can now be accomplished.
The first example involves setting the input focus to the text box the user is most likely to want to enter data into on the 'Login' page. We'll be able to do this with only one line of script code. In Windows 95, Windows NT, and a number of other operating systems, the system's logon dialog includes user ID and password text boxes.
In most cases just one person uses a machine most of the time, so the logon dialog automatically presets the user ID text box to the ID of the last person who logged on, and puts the cursor in the password text box. All we have to do is sit down, enter our password, and press Return (assuming we were the last person to use the machine). This is a lot better than having to manually enter our ID, press Tab to move to the password field, enter our password, and, finally, press Return.
Our example page (changefocus.htm) shows a hypothetical logon screen with user ID and password fields:
If you load this page into the browser and then look at the cursor, you'll find that it's in the password field, not the user ID text box. Normally, when an HTML page loads, the input focus is automatically positioned on the first form element that can take input. This isn't what we want because it requires the user to manually tab to the password text box every time they logon. Fortunately, the little bit of script code we've added to the file takes care of this problem.
The page in this example always shows the same user ID, johndoe, and doesn't do anything when the Submit button is clicked (take a look at the source and see that the ACTION attribute of the form is set to a non-existent file called DeadLink.asp). We'll see what we could do about this in a while, and for a more complete example of a logon page look back at Chapter 6, or the bug report case study in Chapter 12.
The HTML file for this sample, ChangeFocus.htm, contains only normal HTML, except for one small script block. The HTML creates a form called myForm, with a text box called txtUserID, a password text box called pwdPassword, and a single Submit button.
But the script block is where the action occurs:
<SCRIPT LANGUAGE="VBScript">
Sub Window_onLoad
Document.myForm.pwdPassword.Focus
End Sub
</SCRIPT>
The <SCRIPT> tag tells the browser that the following lines are code. The next line, Window_onLoad, says that the code inside this subroutine (that is, everything until the End Sub) should be executed immediately after the page is loaded. Everything up until now has been just plumbing, the next line does our work by calling the Focus method of the pwdPassword password text box.
To call the Focus method, we first need to get a reference to the password text box. That's what everything on this line (except for the .Focus) is for. Think back to the last chapter and remember that the Document object represents the current document in the browser. Each Document object has a collection of Form objects, one for each form. In the same way, each Form object has its own collection of Element objects that represent each input element or object in a form.
The Form collection can be accessed by the numerical index of the form, or by its name as we've done here. Similarly, Elements can be accessed by an index or by the individual element name. In our example, we've used the name of the form and the name of the password text box instead of their indices, but this line of code would accomplish the same thing:
Document.Forms(0).Elements(1).Focus
Once we have a reference to the password text box, all that remains is to call the method we want, which in this case is Focus.
So, the page loads, the Window_onLoad event is called, and the focus is set to the password text box, ready for input. Our users are happy they don't have to press Tab many times every day, we get a huge raise, and retire. Sound far fetched? OK, maybe… but keep reading, we still have more interesting things to talk about in this chapter.
From the earlier spin button example, and the examples in Chapter 6, it's easy to see how we could set the user ID text box in an ASP file and send that to the browser instead of an .htm page. If it was part of an application, we might already have it stored elsewhere, so we would just use it in the VALUE attribute of the <INPUT> tag:
<INPUT TYPE="TEXT" NAME="txtUserID" VALUE="<% = strStoredUserID %>">And of course, we could then emulate the behavior of the standard Windows logon dialog more closely, by checking if we'd actually got a user ID before we set the focus:
<SCRIPT LANGUAGE="VBScript">
Sub Window_onLoad
If Document.myForm.txtUserID <> "" Then
Document.myForm.pwdPassword.Focus
End If
End Sub
</SCRIPT>