Chapter 9

More Intrinsic HTML Form Controls

CONTENTS

• The Radio Button Control
• The Check Box Control
• The Password Control
• Intrinsic HTML Form Controls at a Glance
• Summary
• Q&A
• Workshop
• Quiz

On Day 8, "Intrinsic HTML Form Controls," you saw some of the simple controls available for your use with VBScript. Today you will see the rest. The first two controls presented today are useful when you need to present a series of choices to the user of your Web page. The first control, called the radio button, enables the user to select one of several choices-but only one. The next control, called the check box, allows the user to select one or more choices-not just one. The last control presented in this lesson is called the password control. This control enables the user to enter text such as a password into a text box. The actual text the user enters appears as a series of asterisks. This feature serves to protect the user from someone who might look over her shoulder as she enters a password, credit card number, or other sensitive piece of information. You will see all these controls in action today, and rest assured, you're likely to use all of them sooner or later in the Web pages you develop.

The Radio Button Control

The first control discussed today is the radio button. The radio button control is useful when you want to present several choices to the user, but you only want the user to choose one of those choices. For example, you might want the user to specify whether he or she is male or female. You intend for the user to choose one or the other, but you certainly don't want him to choose both. The radio button control makes it easy to require the user to only choose one option. Take a look at how this works.

Figure 9.1 shows a Web page that uses radio button controls. This Web page, radio.asp, is available on the CD-ROM that comes with this guide.

Figure 9.1 : A simple example that uses the radio button control.

In this example, the user must click the radio button designating his sex. Usually, one of the two values is selected as a default for the user; in this case, it's Male. If the user clicks Female, the Male button will automatically become lightened, or deselected, and the Female button will become darkened, or selected. Both buttons cannot be selected at the same time. Sometimes, you might have a list of choices where you don't mind if the user chooses more than one option. In that case, you would not use the radio button control. You'd instead use the check box control, which is discussed in the next section.

How do you put radio buttons on a Web page? The syntax is not difficult to understand. You need to use the HTML INPUT tag because this control accepts input from the user. The following line shows the syntax for the radio button:

<INPUT TYPE="RADIO" NAME="name" VALUE="value" LANGUAGE="VBScript"
             OncLICK="procedure">

The NAME parameter enables you to set the name of the radio button control. As you will see in a moment, if you want to create a group of radio button controls where only one can be selected, you must assign the same name to each of the controls in the group. VALUE is an optional parameter you can use if you embed the control in a form for submission to a Web server. It specifies a unique value for that particular control so that the server can recognize which button was clicked in a group of radio button controls. The OncLICK parameter is another optional parameter that enables you to call a VBScript procedure when the button is clicked. But you need to make sure you also include the LANGUAGE attribute and set it to "VBScript" so that the browser knows the language embedded in the control definition. This is the way to interface VBScript with the radio button controls on your Web page. You can also include the chECKED attribute in the list if you want the button to appear checked automatically when the Web page loads. To do this, you simply use the following syntax:

<INPUT TYPE="RADIO" NAME="name" VALUE="value" chECKED LANGUAGE="VBScript"
             OncLICK="procedure">

Figure 9.1 shows a Web page with two radio buttons labeled Male and Female. These two buttons are grouped together because the programmer wants the user to select one button or the other, but not both. You need to put all the buttons in your list of choices in the same group. To do that, you simply give each button in the group the same name.

If you intend to submit the form to a Web server, you should also assign each of the buttons in the group a different value so the server can tell them apart. If your radio buttons are contained in a form and that form is submitted, the browser will submit the name of the radio button group within the form, as well as the value of the button that is currently selected in each group on the form. Because I'm not concerned with interacting with the server at this point, I'll omit the VALUE attribute from the radio button controls.

Listing 9.1 shows the code for the Web page in Figure 9.1 and illustrates how you put the buttons on the Web page.

Listing 9.1. Using radio button controls.

<HTML>

<HEAD>
<TITLE>The Radio Button Control</TITLE>
</HEAD>

<BODY>
<H1>
<A HREF="http://w3.softlookup.com"><IMG  ALIGN=MIDDLE
SRC="../shared/jpg/samsnet.jpg" BORDER=2 HSPACE=20></A>
<EM>The Radio Button Control</EM></h1>
<HR>

<P>This Web page demonstrates how to place a simple group of
radio button controls on a Web page.  When the user clicks on
a radio button, VBScript calls a subroutine that
tells you which button the user has selected.

<P>
<INPUT TYPE="RADIO" NAME="optGender" LANGUAGE="VBScript"
OnClick="SetGender('male')  "> Male<BR>
<INPUT TYPE="RADIO" NAME="optGender" LANGUAGE="VBScript"
OnClick="SetGender('female')"> Female<BR>
<P>
<INPUT NAME="txtResult" SIZE="50">

<HR>
<center>
From <em>Teach Yourself VBScript in 21 Days</em><br>
by <A HREF="../shared/info/keith.asp">Keith Brophy</A> and
<A HREF="../shared/info/tim.asp">Tim Koets</A><br>
<br>
Return to <A href=Back09.asp>content overview</A><br>
1996 by SamsNet<br>
</center>

<SCRIPT LANGUAGE="VBScript">
<!--
   Sub SetGender(Gender)
      txtResult.Value = "You have selected " & Gender & "."
   End Sub

-->
</SCRIPT>

</BODY>
</HTML>

Notice in Listing 9.1 that both buttons have the same name, optGender. You can use the prefix opt to make the control more easily recognizable in your code. It's not required, but it does help make your code more readable.

Both buttons call the same subroutine, SetGender, when clicked. Notice that each button passes a different parameter into the subroutine-in this case, the gender that the button represents. These arguments are simple strings, but they could just as easily be any other value. When the user clicks either button, the subroutine is called and the text control gets the appropriate sentence about which option the user selected.

Earlier in this section, you learned that you must place radio buttons in the same group to force the user to choose only one of several buttons. To accomplish this, each button control must have the same name. To see what would happen if you didn't follow this rule, take a look at the Web page shown in Figure 9.2. This Web page is also on the CD-ROM as badradio.asp.

Figure 9.2 : An example of two radio buttons not grouped together.

In this example, notice that the user has selected both the male and female radio buttons! Obviously, this is not what you intend in your program. What's the problem? You haven't placed the buttons in the same group. Placing them in the same group makes VBScript realize that only one button in the group can be selected at a time. When you select one, all the others in the group are deselected. In this case, you have effectively placed both buttons in their own groups, which means that the user can click on both. The section of incorrect code is shown here:

<INPUT TYPE="RADIO" NAME="optMale" LANGUAGE="VBScript"
OnClick="SetGender('male') "> Male<BR>
<INPUT TYPE="RADIO" NAME="optFemale" LANGUAGE="VBScript"
OnClick="SetGender('female')"> Female<BR>

It's easy to make this mistake because each of the other controls except the radio button must have a unique name. With radio buttons, however, duplicate names are allowed and must be applied to properly group them.

What's the value of groups? Why can't all the buttons on a Web page behave like one big group? Sometimes you might want to put more than one group of radio button controls on a page. Suppose that you not only want the user to select his gender, but you also want him to indicate the age group he belongs to. In this case, you would have two groups of radio buttons to present to the user.

Figure 9.3 shows a Web page that accomplishes that task. The Web page is also on the CD-ROM as radiogrp.asp.

Figure 9.3 : An example using two radio button groups.

This Web page consists of two groups of radio buttons: one for the user's age and another for his gender. Whenever the user clicks a button, the appropriate script-level variable changes: one for age, the other for gender. The code in Listing 9.2 makes this more clear.

Listing 9.2. Using two radio button groups to set variables.

<HTML>

<HEAD>
<TITLE>The Radio Button Control</TITLE>
</HEAD>

<BODY>
<H1>
<A HREF="http://w3.softlookup.com"><IMG  ALIGN=MIDDLE
SRC="../shared/jpg/samsnet.jpg" BORDER=2 HSPACE=20></A>
<EM>Effectively Grouping Radio Button Controls</EM></h1>
<HR>

<P>This Web page demonstrates how to place a simple group of
radio button controls on a Web page.  This page includes two
groups of radio buttons, one for the user's gender, the other
for the user's age group. Both can be selected and, when the
user clicks on "Show Choices", the options the user has
selected are shown.

<P>

<OL>
<LI>Please select your gender.<BR>
<INPUT TYPE="RADIO" NAME="optGender" chECKED
OnClick="SetGender('male'  )"> Male<BR>
<INPUT TYPE="RADIO" NAME="optGender"
OnClick="SetGender('female')"> Female<BR>

<LI>Please select your age group.<BR>
<INPUT TYPE="RADIO" NAME="optAge"         
OnClick="SetAge('under 5' )"> under 5  <BR>
<INPUT TYPE="RADIO" NAME="optAge"         
OnClick="SetAge('5-20'    )"> 5-20     <BR>
<INPUT TYPE="RADIO" NAME="optAge" chECKED
OnClick="SetAge('20-40'   )"> 20-40    <BR>
<INPUT TYPE="RADIO" NAME="optAge"         
OnClick="SetAge('40-80'   )"> 40-80    <BR>
<INPUT TYPE="RADIO" NAME="optAge"         
OnClick="SetAge('80-100'  )"> 80-100   <BR>
<INPUT TYPE="RADIO" NAME="optAge"         
OnClick="SetAge('over 100')"> over 100 <BR>
</OL>

<P><INPUT NAME="txtResult" SIZE="50"
VALUE="The user is a male and is 20-40 years old.">

<HR>
<center>
From <em>Teach Yourself VBScript in 21 Days</em><br>
by <A HREF="../shared/info/keith.asp">Keith Brophy</A> and
<A HREF="../shared/info/tim.asp">Tim Koets</A><br>
<br>
Return to <A href=Back09.asp>content overview</A><br>
1996 by SamsNet<br>
</center>

<SCRIPT LANGUAGE="VBScript">
<!--
   Dim Age
   Dim Gender

   Gender = "male"
   Age = "20-40"

   Sub SetGender(NewGender)
      Gender = NewGender
      Call ShowStatus
   End Sub

   Sub SetAge(NewAge)
      Age = NewAge
      Call ShowStatus
   End Sub

   Sub ShowStatus()
      txtResult.Value = "The user is a " & Gender & " and is " &_
                         Age & " years old."
   End Sub


-->
</SCRIPT>

</BODY>

</HTML>

This example defines two script-level variables titled Age and Gender. When the Web page first loads into memory, these two variables are initialized to their default values of 20-40 and Male, respectively. Two groups of radio buttons are defined on the Web page. In the first group, each button is labeled optGender. Notice that the first button has the chECKED attribute specified in the tag and that, when clicked, it calls the procedure SetGender and passes it the string argument male. The SetGender function, when called, sets the script-level Gender variable equal to the string passed to it. This is how the user can change the gender. Likewise, the second button calls the same procedure and passes the string female to it. You could just as easily pass a numeric value to the procedure and, based on that value, change the gender variable. In other words, you have a great deal of flexibility in the ultimate implementation you decide to make.

The second group of buttons enables the user to specify his or her age group. Every button in this group is named optAge. Again, you must assign the same name to each of the radio buttons associated in the same group. The default value assigned to the script-level Age variable was 20-40, so the radio button that sets the age to 20-40 is checked as a default. When the user clicks any of these buttons, the procedure SetAge is called and the appropriate argument is passed to the procedure. As with the gender, the procedure sets the script-level variable Age to whatever argument was passed to the procedure.

Both SetAge and SetGender then call the procedure ShowStatus, which displays the values in the text control txtResults. Whenever the user clicks a button, the text control gives the user a printed description of his latest choices. To make the default choice appear when the Web page is loaded, set the VALUE attribute of the text control to display what would appear if the user clicked the buttons for the default choices.

It's fairly easy to use radio button controls. You simply group radio button controls together, assign the same name to them, and assign an OnClick procedure to each so you can set variables or perform actions in your code when the user clicks each of the buttons. You can assign each button a separate procedure or assign them all the same procedure, or you can assign some to separate procedures and others to the same. You don't need to set the VALUE attribute of the radio button control unless you are sending the data within a form to a Web server. Communicating with Web servers will be discussed in more detail on Day 19, "Dynamic Page Flow and Server Submittal." Again, you have a great deal of flexibility. Your only limitation is your own creativity in building a solution.

In addition to the properties and events already discussed, there are other properties that may be useful to you. You can figure out what form a radio button control belongs to by referencing the Form property. You can also set the Enabled property to True or False if you want to prevent the user from activating the control. The radio button also has Focus and Click methods to cause the browser to give a radio button focus or to simulate a mouse click of the control. Finally, the radio button control supports the OnClick and OnFocus events. You have already seen the OnClick event in action, and you can also establish an OnFocus event for each individual radio button in a group.

The Check Box Control

The next control discussed today is the check box control. Check boxes are similar to radio buttons, with two notable exceptions. The first is that a radio button is circular, whereas a check box is a square that, when checked, is marked with a checkmark or an ¥. The most significant difference between the two is that check boxes don't follow the "one selection only" rule. In other words, you use check boxes when you want the user to select one or more choices, not just one. Radio buttons, when grouped, only allow one selection of many possible choices. Check boxes, on the other hand, do not follow the same rule; you can check as many as you want without deselecting any of the others.

To see how this works, you will see the same type of application first introduced when in the discussion on radio button controls. The first radio button example allowed the user to select his or her gender. If Male was selected, Female was deselected, and vice versa. Only one choice of several was allowed. When working with check boxes, the user can select more than one at the same time. The gender choice would therefore not be appropriate for check boxes. What would be appropriate, however, is the list of choices the user can make on the Web page shown in Figure 9.4.

Figure 9.4 : A simple example of using check box controls.

This Web page, named chkbox.asp, is on the CD-ROM that accompanies this guide. As you can see, a checkmark appears in each box selected. Here, the user has clicked the Show Selections button to see the choices he selected. Notice that he can make more than one choice. In this case, radio buttons would not be appropriate because it's okay for the user to select more than one choice.

Listing 9.3 shows the source code for this Web page.