Teach Yourself Microsoft Visual InterDev in 21 Days

Day 12

Using Basic and Advanced HTML Form Controls

This lesson is the first in a series about constructing a user interface for your application. You were introduced to design considerations and HTML and browser extensions on Day 3, "Design and Development Considerations." Today's lesson focuses on intrinsic objects and controls available with HTML 3.x. These HTML objects and controls enable you to build an interface for your application that lets the user interact with the information in your web site and make use of your application's features.

The objects and controls described in this lesson are intrinsic to HTML--that is, an inherent part of the language. You can use these controls right out of the HTML box.

New Term: Intrinsic defines a control as part of a native language. In the context of the Web and this lesson, the term intrinsic defines those objects and controls that are part of HTML. In other words, these controls are internal to, or included with, HTML.

You will learn about other objects and controls over the next few days that are extrinsic, or external, to HTML. In tomorrow's lesson, Day 13, "Interacting with Objects and ActiveX Controls," you will explore the ActiveX controls included with Visual InterDev. You will also get an overview of how to use these objects and Java applets to extend your application's user interface. On Day 14, "Extending Web Pages Through Design-Time Controls," you will learn about using Design-time ActiveX controls in your Visual InterDev application. Finally, on Day 15, "Integrating Objects into Your Applications," you will learn how to integrate extrinsic objects and controls into your application and extend the objects' functionality with scripting code.

New Term: Extrinsic defines a control as external to the native language. In the context of the Web and this lesson, the term extrinsic defines those objects and controls that are external to HTML. In other words, these controls are separate from HTML. Extrinsic controls are developed by third-party software providers and can be integrated into a web page by inserting the object or control into the HTML document.

Today's lesson covers these topics: First, it examines HTML forms and their controls. The majority of today's lesson is spent covering the basic and advanced elements of HTML forms. You learn about HTML controls that you can integrate into your application interface, including the text control, the textarea control, the button control, the radio button and checkbox controls, and the password control. You get instructions on how to use these controls to design the perfect interface. The lesson also introduces you to some of the more advanced HTML controls that are available.

Next, you learn how to use these controls to develop an HTML form. The lesson also reviews some basic concepts of HTML form design and effective design tips for your forms. At the end of the day, the lesson combines all the concepts and methods you've learned to create a form-based application.

NOTE: Today's lesson may be a review for some of you. HTML form design is still used as a viable user interface for Web-based applications. This lesson gives you the basic building blocks to understand the power of the more robust extrinsic objects and controls. Once you gain an understanding of basic form design, you will appreciate controls like ActiveX controls, which extend the functionality of the basic user interface to a new, exciting level.

Exploring HTML Forms

A form provides the house for a control. Just as a house consists of rooms, an HTML form consists of HTML controls. Rooms can't be useful unless they're constructed within the house. You don't, for example, build a kitchen as a separate structure (not these days, anyway); a kitchen becomes useful when it combines with other rooms to form a house. Similarly, a control or group of controls get their meaning, or purpose, within the context of a form. The form gives function to the control.
The Form and Its Function

The basic function of a form is to provide an interface for the user to perform a task or set of tasks. The American Heritage Dictionary defines interface as "the point of interaction or communication between a computer and another entity, such as a person."

The form enables a person to interact with the computer and, more important, your application. You can create forms to supply many functions for your applications, including the following:

Letting a user enter user preferences for your web site

Allowing a user to enter parameters to search for information in your database

Enabling a user to enter guest book information to be tracked in the application

Giving a user a way to enter online order information for products and services

HTML forms are easy to construct in a short time by using simple HTML tags and attributes. Developing HTML forms is iterative and quick, and you can preview their layout in the Visual InterDev environment to assess the strength and effectiveness of their design.

As with other graphical tools, such as Visual Basic, you must be careful how you use them. You don't want to throw your interface together without any thought just because the process and tools are quick and easy. Also, you don't need to use each and every control on a form just because you have so many to choose from. Form design considerations are discussed in more detail in the section entitled "Reviewing HTML Form Design."
How Does a Form Take Its Function?

A form is placed in a web page document by using the start tag <FORM> and end tag </FORM>. All the form tags, attributes, and controls must be placed inside the start and end tags. The start tag consists of two associated attributes: METHOD and ACTION. These attributes help define the form's behavior.

The METHOD attribute specifies the data format of the information submitted from the form to the server program. It has two valid values: GET and POST. The default value, GET, is used for a few simple values to be sent to the server. These values are added to the end of the URL that's passed to the server. The GET value limits the amount of information that can be passed to the server. You can also use the POST value to pass information for multiple form elements to the server; use this if your form has more than a couple of fields.

The ACTION attribute indicates the location and name of the server script that processes the form. You can specify the script's URL or use a relative path to set the value of the ACTION attribute. Many of the examples in yesterday's lesson on Active Server Pages used forms as the main user interface. The value of the ACTION attribute in those examples referred to an ASP that contained the server script. You can use any type of scripting code to process a form's request, including CGI, ASP, and native APIs, such as ISAPI or NSAPI. The following code line demonstrates how to use the attributes of the <FORM> tag:

<FORM METHOD="POST" ACTION="/MYProject/Scripts/Submit.asp">

This code example uses the POST method to send the data to a server script program called Submit.asp that's located in the relative path of /MyProject/Scripts. By using the POST method, the server script has access to all the data elements contained on the form.

Now that you understand the purpose of the form, you can go on to learn about the HTML controls that make the form come alive.
Exploring HTML Intrinsic Controls

If you have developed an application that used a graphical user interface, you're probably already familiar with controls, which give you the basic tools for constructing your application's user interface. Controls serve as the intermediary between users and applications. You can use controls to enable the user to enter information, designate preferences, and select items from a list. In other words, the controls on your form make it possible for users to interact with your application to perform certain tasks.

HTML forms support the use of certain intrinsic controls that offer specific functions based on their design. The following sections describe the form controls offered by HTML.
Using Tags to Create a Control

You create controls by using certain sub-element tags within a form's start and end tags. Table 12.1 lists the types of form sub-element tags and their functions.
Table 12.1. Form sub-element tags.

Tag Function

<INPUT> Creates user input controls

<OPTION> Constructs options in a selection list

<SELECT> Creates a selection list

<TEXTAREA> Creates a multiline text entry field

These sub-element tags help you specify the type of control you want to construct. For a selection list, you can use the <SELECT> tag to create the options to populate the list. These tags must be placed inside the starting <FORM> and ending </FORM> tags. The next sections explain the syntax for using these tags.
Using the <INPUT> Tag

The <INPUT> tag is the most common type of sub-element tag, probably because it can be used to create several of the most common controls you define for a form. The controls created by the <INPUT> tag give you a way to collect information from the user. They include text controls, radio buttons, checkboxes, images, and push buttons. The syntax for using the <INPUT> tag is as follows:

<INPUT TYPE="Type" NAME="Name" VALUE="Value"|SIZE="nChars" |MAXLENGTH="nChars"|CHECKED >

Type is the type of control you want to create, Name defines the name of the control, and Value represents the initial value displayed for the control. The nChars value, when related to the SIZE attribute, defines the text control's width in number of characters; when it's related to the MAXLENGTH attribute, it defines the maximum number of characters that can be entered in a text control. Use the CHECKED attribute to allow a checkbox or radio button to appear selected.
Using the <SELECT> Tag

You can use the <SELECT> tag to create a selection list control, which enables the user to choose an item from a list of options. You have probably used this type of control with other development tools and referred to it as a drop-down listbox or a scrollable listbox.

The <SELECT> tag is used with the <OPTION> tag, which is used to specify the list of available options. This is the basic syntax for the <SELECT> tag:

<SELECT NAME="Name" SIZE="Number"|MULTIPLE> <OPTION VALUE="Value">NameofValue</OPTION> </SELECT>

In this code example, Name is the name of the selection list control, Number specifies the number of items in the list that are visible to the user, Value is the value to be sent to the server when the value option is selected, and NameofValue is the formatted name of the option that's displayed to the user. You can use the MULTIPLE attribute to enable the user to select multiple items from the list.

A typical selection list has many items, so you usually construct a selection list with the following syntax:

<SELECT NAME="Name"> <OPTION VALUE="Value1">NameofValue1</OPTION> <OPTION VALUE="Value2">NameofValue2</OPTION> <OPTION VALUE="Value3">NameofValue3</OPTION> ... <OPTION VALUE="Valuen">NameofValuen</OPTION> </SELECT>

Listing 12.1 demonstrates how to use the selection list control.
Listing 12.1. Constructing a selection list.

<HTML> <HEAD> <TITLE>Selection List</TITLE> </HEAD> <BODY> <H2>Scrollable Selection List</H2> <HR> <P> <FORM METHOD="POST" ACTION=" " > <H3>Choose Your Favorite NBA Basketball Team:</H3> <P> <SELECT NAME="lstTeams" SIZE="7"> <OPTION VALUE="Bulls">Bulls</OPTION> <OPTION VALUE="Cavaliers">Cavaliers</OPTION> <OPTION VALUE="Celtics">Celtics</OPTION> <OPTION VALUE="Heat">Heat</OPTION> <OPTION VALUE="Jazz">Jazz</OPTION> <OPTION VALUE="Lakers">Lakers</OPTION> <OPTION VALUE="Magic">Magic</OPTION> <OPTION VALUE="Mavericks">Mavericks</OPTION> <OPTION VALUE="Pistons">Pistons</OPTION> <OPTION VALUE="Raptors">Raptors</OPTION> <OPTION VALUE="Rockets">Rockets</OPTION> <OPTION VALUE="Suns">Suns</OPTION> </SELECT> </FORM> </BODY> </HTML>

NOTE: For the purpose of this example, the ACTION attribute is set to " ", which means the form won't do anything. I'm trying to emphasize the control, not the script that processes the information. You learn more about script processing later in the day in the section entitled "Using Client-Side Script with HTML Forms."

This code example, which displays a list of basketball teams, constructs a scrollable selection list that displays seven items at a time, as shown in Figure 12.1.

Figure 12.1.

Viewing items in the list.

In addition to creating a scrollable listbox, you can also create a drop-down listbox by manipulating the SIZE attribute of the <SELECT> tag. A drop-down listbox displays only one item at a time, but the user can see the rest of the items by clicking the down-arrow key. The drop-down listbox is also referred to as a pop-up selection list. Listing 12.2 shows how to make a simple change to the previous code example to create a drop-down listbox.
Listing 12.2. Constructing a drop-down listbox.

<HTML> <HEAD> <TITLE>Selection List</TITLE> </HEAD> <BODY> <H2>Pop-up Selection List</H2> <HR> <P> <FORM METHOD="POST" ACTION=" " > <H3>Choose Your Favorite NBA Basketball Team:</H3> <P> <SELECT NAME="lstTeams" SIZE="1"> <OPTION VALUE="Bulls">Bulls</OPTION> <OPTION VALUE="Cavaliers">Cavaliers</OPTION> <OPTION VALUE="Celtics">Celtics</OPTION> <OPTION VALUE="Heat">Heat</OPTION> <OPTION VALUE="Jazz">Jazz</OPTION> <OPTION VALUE="Lakers">Lakers</OPTION> <OPTION VALUE="Magic">Magic</OPTION> <OPTION VALUE="Mavericks">Mavericks</OPTION> <OPTION VALUE="Pistons">Pistons</OPTION> <OPTION VALUE="Raptors">Raptors</OPTION> <OPTION VALUE="Rockets">Rockets</OPTION> <OPTION VALUE="Suns">Suns</OPTION> </SELECT> </FORM> </BODY> </HTML>

In this code example, the SIZE attribute is changed to the value of 1, which means one item at a time is displayed, as shown in Figure 12.2.

To display the items in the drop-down listbox, the user can click the down-arrow to make the items pop up, as shown in Figure 12.3.

The SELECTED attribute can be used with the <OPTION> tag to define an initial, or default, selection in the list. If you specify this attribute for an item in the list, that item is selected when the form opens. For example, you could choose the Rockets as the default selection for your favorite team when the form first opens, as shown in Figure 12.4.

Figure 12.2.

Viewing one item at a time.

Figure 12.3.

Seeing the rest of the items in a drop-down list.

Figure 12.4.

Choosing a default selection.

Listing 12.3 gives you the code for defining a default selection for the list.
Listing 12.3. Specifying a default selection.

<HTML> <HEAD> <TITLE>Selection List</TITLE> </HEAD> <BODY> <H2>Pop-up Selection List</H2> <HR> <P> <FORM METHOD="POST" ACTION=" " > <H3>Choose Your Favorite NBA Basketball Team:</H3> <P> <SELECT NAME="lstTeams" SIZE="1"> <OPTION VALUE="Bulls">Bulls</OPTION> <OPTION VALUE="Cavaliers">Cavaliers</OPTION> <OPTION VALUE="Celtics">Celtics</OPTION> <OPTION VALUE="Heat">Heat</OPTION> <OPTION VALUE="Jazz">Jazz</OPTION> <OPTION VALUE="Lakers">Lakers</OPTION> <OPTION VALUE="Magic">Magic</OPTION> <OPTION VALUE="Mavericks">Mavericks</OPTION> <OPTION VALUE="Pistons">Pistons</OPTION> <OPTION VALUE="Raptors">Raptors</OPTION> <OPTION VALUE="Rockets" SELECTED>Rockets</OPTION> <OPTION VALUE="Suns">Suns</OPTION> </SELECT> </FORM> </BODY> </HTML>

In this example, the <OPTION> tag for the Rockets item uses the SELECTED attribute to specify this item as the default selection in the list.

The next few sections cover the types of form controls you can build by using HTML and the <INPUT> tag.
The Text Control

The text control enables you to create a single-line entry field that can handle alphanumeric data, including numbers and strings. You can create a text control by using the <INPUT> tag; its syntax was explained earlier in today's lesson. Here's an example of using the <INPUT> tag to develop a text control:

<INPUT TYPE="TEXT" NAME="txtName" SIZE="20">

The TYPE attribute is set to "TEXT", which is also the default value for the <INPUT> tag. If you don't define a value for the TYPE attribute, a text control is created; however, you should always assign an explicit value for your attributes so that your code is easily understood by other developers. The NAME attribute contains the value of "txtName" in this example. Text controls should have the prefix txt. The SIZE attribute of 20 defines the text control as approximately 20 characters long. If you don't specify a value for the SIZE attribute, a text control is created with the default size. Figure 12.5 shows the text control created from this line of code.

NOTE: I'll introduce the naming standard for each control as it's discussed. A summary table that outlines the naming standard for each HTML form control is supplied later in the section "Reviewing HTML Form Design."

Figure 12.5.

Creating a text control.

The VALUE attribute, defined earlier, can also be used with the text control. This attribute enables you to indicate an initial value that's displayed in the text field. Another attribute that can be used with the text control is the MAXLENGTH attribute, which is used to specify the maximum number of characters that can be entered in the text field.
The Button Control

The button control is used to create a push button for the form. Push buttons were first introduced during the lesson on Day 7, "Extending Your Web Page Through Client-Side Script." Most of the scripting examples covered during that lesson used a push button to carry out an action, which is exactly what a button control is for; it enables the user to perform or complete a task. The button's caption should describe the action to be performed. For example, a Submit button tells the user it's the button to click to submit the form to the server.

The following example demonstrates the syntax for defining a button control for your form:

<INPUT TYPE="SUBMIT" NAME="cmdSubmit" VALUE="Submit">

This line of code creates a push button named Submit. The TYPE attribute is assigned the value of "SUBMIT", which means a button control will be placed on the form. This type of button control submits the form for processing by the script specified in the form's ACTION attribute. Another value of the TYPE attribute is RESET, which creates a button to clear the contents of the form elements and reset any default values for the controls. The VALUE attribute is used to define the caption on the push button. Also, notice that the NAME attribute has the value of "cmdSubmit". The naming standard for the button control uses the cmd prefix. The caption for the push button should accurately describe its function; however, don't use too many words for the text. For example, if a button saves information to a database, use the caption of Save rather than Save the Record to the Database. For HTML button controls, the button's size is determined by the caption you specify for the control. The browser uses the length of the caption and font size to determine the button's appropriate size.

NOTE: The inability to define a size for an HTML button control is one of its limitations. You learn about more robust ActiveX controls you can use to define a control's size during Day 13.

Using the Button Control

You can use the button control to send and retrieve information to the server. The push button is typically used with other controls on a form to enable the user to perform some action. In the previous section, you learned about setting the TYPE attribute to a value of SUBMIT, which constructs a push button that sends data on the form to the server. This form is processed by the script you specify in the ACTION attribute of the <FORM> tag. Listing 12.4 demonstrates how to use this attribute, along with the other controls you've learned about so far, to create a form that submits information to be processed by the server.
Listing 12.4. Submitting the forms information to the server.

<HTML> <HEAD> <TITLE>The Button Control</TITLE> </HEAD> <BODY> <H2>The Power of the Button Control</H2> <HR> <P> <FORM METHOD="POST" ACTION="/HTMLControls/scripts/Submit.asp" > <INPUT TYPE="TEXT" NAME="txtName" SIZE="20"> <P> <H3>Choose Your Favorite NBA Basketball Team:</H3> <P> <SELECT NAME="lstTeams" SIZE="1"> <OPTION VALUE="Bulls">Bulls</OPTION> <OPTION VALUE="Cavaliers">Cavaliers</OPTION> <OPTION VALUE="Celtics">Celtics</OPTION> <OPTION VALUE="Heat">Heat</OPTION> <OPTION VALUE="Jazz">Jazz</OPTION> <OPTION VALUE="Lakers">Lakers</OPTION> <OPTION VALUE="Magic">Magic</OPTION> <OPTION VALUE="Mavericks">Mavericks</OPTION> <OPTION VALUE="Pistons">Pistons</OPTION> <OPTION VALUE="Raptors">Raptors</OPTION> <OPTION VALUE="Rockets" SELECTED>Rockets</OPTION> <OPTION VALUE="Suns">Suns</OPTION> </SELECT> <INPUT TYPE="SUBMIT" NAME="cmdSubmit" VALUE="Submit"> </FORM> </BODY> </HTML>

This code example combines the text control, the selection list, and the button control to create a useful form. Users can enter their name, select their favorite NBA team, and then submit this information to the server by clicking the Submit button. The user information is processed by an Active Server Page called Submit.asp. This script formats a page with the user's name and his or her favorite NBA team. Figure 12.6 shows the form that the user sees.

Figure 12.6.

Selecting your favorite team.

Figure 12.7 demonstrates the results returned to the user based on the information that was entered.

Figure 12.7.

Displaying the results.

NOTE: You can also set the value of the TYPE attribute to BUTTON and use client-side script to provide logic for the control. As mentioned, SUBMIT is the only value of the TYPE attribute that can send the form's data to the server. You can, however, create event procedures for the BUTTON TYPE attribute and use a scripting language such as VBScript to process the events.
This topic is covered in more detail in the section "Developing HTML Forms."

The location of the button control is determined by where you place its definition in the HTML document. In the previous example, the Submit button is placed next to the selection list control. You could have moved the push button to a new line in the web page by using a <P> or <BR> tag to specify a new paragraph or a line break. You can also use the alignment tags to change the placement of the button control. For example, the following line of code places a push button in the center of a web page:

<CENTER><INPUT TYPE="SUBMIT" NAME="cmdSubmit" VALUE="Submit"></CENTER>

Option Buttons

Option buttons enable a user to choose from a small list of options. There are two kinds of option buttons: radio buttons and checkboxes. HTML supplies both of these controls to display on your forms.
The Radio Button

Control

The radio button control is used for mutually exclusive options. In other words, the user can choose only one of the options. Choosing from a list of credit cards to confirm a payment method is a good example of using mutually exclusive choices. Radio buttons should be used only when the number of choices is six or less.

This is the syntax for creating a radio button control:

<INPUT TYPE="RADIO" NAME="Name" VALUE="Value">

Name is the name of the radio button, and Value is an optional parameter that indicates the value for the option passed to the server. For example, the following lines of code create two radio buttons to enable users to specify their gender:

<INPUT TYPE="RADIO" NAME="optGender" VALUE="Male"> Male <BR> <INPUT TYPE="RADIO" NAME="optGender" VALUE="Female"> Female

Figure 12.8 illustrates how these options are displayed on the form.

Figure 12.8.

Specifying your gender.

When the user specifies a gender, a dark circle covering most of the center of the radio button indicates that the item has been selected.

The previous code example uses the prefix naming standard of opt for radio buttons. Notice, too, that the names are identical for both options. You must use the same name for radio buttons that are grouped together. If you didn't assign the same names for these controls, the form would treat the options as independent controls, and the user could then select both options, as shown in Figure 12.9.

Figure 12.9.

A lack of proper grouping.

You can also use the CHECKED attribute to select a default option for the user. The following lines of code make Female the default selection:

<INPUT TYPE="RADIO" NAME="optGender" VALUE="Male"> Male <BR> <INPUT TYPE="RADIO" NAME="optGender" VALUE="Female" CHECKED> Female

Notice that the CHECKED attribute is placed as the last parameter in the <INPUT> tag.
The Checkbox Control

The checkbox control enables the user to select more than one option from available choices. Indicating your completed levels of education is a good example of using checkboxes. As with radio buttons, you should use checkboxes only when the number of choices is six or less.

This is the syntax for creating the checkbox control:

<INPUT TYPE="CHECKBOX" NAME="Name" VALUE="Value" >

Name is the name of the checkbox, and Value is an optional parameter that indicates the value for the option passed to the server. The following lines of code create checkbox options for users to indicate their completed levels of education:

<INPUT TYPE="CHECKBOX" NAME="chkHighSchool" VALUE="High School"> High School Â<BR> <INPUT TYPE="CHECKBOX" NAME="chkCollege" VALUE="College"> College <BR> <INPUT TYPE="CHECKBOX" NAME="chkGrad" VALUE="Graduate"> Graduate

Notice that the naming standard for checkboxes uses the chk prefix. Also, the options in a checkbox have different names. As opposed to selecting only one item with radio buttons, users can select several items with checkboxes. For this reason, you must supply different names for the individual options. Figure 12.10 shows the results of this code example.

Figure 12.10.

Selecting multiple items.

The user can select all the education levels that apply from the list of choices. Notice that a check mark indicates selected items.

As with the radio button control, you can use the CHECKED attribute to specify an option as the default selection. The code to carry out this task is similar to that for the radio button control:

<INPUT TYPE="CHECKBOX" NAME="chkHighSchool" VALUE="High School" CHECKED> High ÂSchool <BR> <INPUT TYPE="CHECKBOX" NAME="chkCollege" VALUE="College"> College <BR> <INPUT TYPE="CHECKBOX" NAME="chkGrad" VALUE="Graduate"> Graduate

In this example, High School is the default selection.
Exploring the Behavior of Option Buttons

The radio button control and the checkbox control differ slightly in their behavior because they have different purposes. The process of actually selecting a radio button or a checkbox is the same--the user simply clicks the item he or she wants.

The difference is in how items are deselected. For radio buttons, the currently selected item is deselected when the user chooses another radio button in the list. That new item, then, is selected. For the checkbox control, the user can select multiple items. To deselect an item, the user must click a currently selected item. The check mark disappears, indicating that the item is no longer selected.
The Password Control

The password control is a special version of the text control. Essentially, the two controls are the same, but the password control displays asterisks, not text, as the user enters his or her text. You can use the password control for "sensitive" information, such as a user's password; that's why it's called the password control. The asterisks mask the characters from displaying in the field.

The syntax for this control is almost identical to the text control, except that the value of the TYPE attribute changes, as shown in this example:

<INPUT TYPE="PASSWORD" NAME="txtPassword" SIZE="10">

What you specify for the TYPE attribute is the biggest difference between defining a password control and a text control. In this example, the TYPE attribute has been assigned the value of "PASSWORD", which means the control is a password control. The naming standard for the password control is the same as the text control's; both use txt as the prefix.

The SIZE attribute of 10 defines the password control as approximately 10 characters long. If you don't specify a value for the SIZE attribute, then the password control is created with the default size.

The VALUE attribute can be used to indicate a default selection that's displayed in the pass-word text field when you open the form. Another attribute that can be used with the password control is MAXLENGTH, which enables you to specify the maximum number of characters that can be entered in the password text field.

Listing 12.5 shows how to use the password control in an application.
Listing 12.5. Constructing a password control.

<HTML> <HEAD> <TITLE>Logging On</TITLE> </HEAD> <BODY> <H2>The Killer App</H2> <HR> <P> <FORM METHOD="POST" ACTION="../scripts/Signon.asp" > <H3>Please enter your user name and password to experience the Killer App:</H3> <P> User Name: <INPUT TYPE="TEXT" NAME="txtName" SIZE="20"> <P> Password: <INPUT TYPE="PASSWORD" NAME="txtPassword" SIZE="10"> <P><P> <INPUT TYPE="SUBMIT" NAME="cmdSignon" VALUE="Sign On"> </FORM> </BODY> </HTML>

This code example gives the user a way to log onto your killer application. A text box control is used for the user name, and a password control is used for entering his or her password. This information is then passed to an Active Server Page that verifies the user name and password. Figure 12.11 shows the form that's displayed as a result of this code example.

Figure 12.11.

Logging onto the killer application.

The Textarea Control

The textarea control enables you to construct a multiline text box that lets the user enter multiple lines of text. This is the basic syntax for the textarea control:

<TEXTAREA NAME="Name" ROWS="nRows" COLS="nCols"></TEXTAREA>

Name is the name of the control, nRows defines the number of rows, or height, for the textarea control, and nCols specifies the number of columns, or width, for the control. The number of rows defining the control's height equates to a specified number of lines; the number of columns defining the control's width is measured in number of characters.

The browser determines to some degree the behavior of the multiline text box. Some browsers automatically word wrap the text to the next line. With others, you can enter text past the control's display area and use a scroll bar to view the text.

The following line of code shows how to use the textarea control:

<TEXTAREA NAME="txaAddress" ROWS="5" COLS="40"></TEXTAREA>

This line of code creates a multline text box that enables the user to enter an address, which is a common use for this control. It's often used for entering e-mail messages and memos, too. Notice that the naming standard of the textarea control uses the prefix txa. The control in this example is 5 lines long and 40 characters wide.

The textarea control doesn't support using the VALUE attribute to assign a default selection for the control. As an alternative, you can specify text to be placed in the control by placing it inside the textarea tags. The following line of code demonstrates this method:

<TEXTAREA NAME="txaAddress" ROWS="5" COLS="40">Houston, Texas</TEXTAREA>

This code formats the text Houston, Texas as the control's initial value when the form opens.
Using Client-Side Script with HTML Forms

So far, you have learned about a form's characteristics and how to construct one. You have also learned about the HTML form controls and seen how to use them on a form. In the following sections, you learn how to develop functional HTML forms that use client-side script. The lesson gives you some examples of integrating VBScript with forms and form controls.
Creating Event Procedures for Your Controls

You learned about client-side script on Day 7. Today's lesson and the lessons for the next couple of days teach you how to apply the concepts you learned.

You can create event procedures for your controls. For a button control, there are two types of event procedures: implicit procedures and explicit procedures.
Creating an Implicit

Procedure

The first type of procedure, called an implicit event procedure, is tied to the control. Here's the syntax for creating an implicit event procedure:

Sub ButtonName_OnClick() ... event procedure code End Sub

ButtonName refers to the name of the button control on the form, and the event procedure's name must be the same as the name assigned to the button control. Listing 12.6 shows how to use an implicit procedure and client-side script to process a button click.
Listing 12.6. Creating an implicit event procedure.

<HTML> <HEAD> <TITLE>An Implicit Procedure</TITLE> </HEAD> <BODY> <H2>The Killer App</H2> <HR> <P> <FORM NAME="MyForm" > <H3>Please enter your user name and password to experience the Killer App:</H3> <P> User Name: <INPUT TYPE="TEXT" NAME="txtName" SIZE="20"> <P> Password: <INPUT TYPE="PASSWORD" NAME="txtPassword" SIZE="10"> <P><P> <INPUT TYPE="BUTTON" NAME="cmdSignon" VALUE="Sign On"> </FORM> <SCRIPT LANGUAGE="VBSCRIPT" >  </SCRIPT> </BODY </HTML>

This code example extends the form created in Listing 12.5 that allowed the user to sign onto your killer application. The <FORM> tag is used to assign MyForm as the form's name. The form name is used to access the value of the text control for the user name. Notice that the name of the event procedure is the same as the name of the button control; that's why the procedure is referred to as "implicit."

The Password variable is created and assigned the value entered by the user in the form's password control. The VALUE attribute contains the text entered in this field. For HTML form controls, you must prefix the control's name with the name of the form and the name of the web page. In this case, Document refers to the entire web page. The method for referring to a value for a form control is easy to figure out because the controls are contained on the form that's part of the document or web page.

Next, the Len statement is used to verify that the length of the password is six characters or more. If not, a message box is displayed informing the user that the password must be at least six characters, as shown in Figure 12.12.

Figure 12.12.

Reminding the user that the password must be at least six characters long.

Creating an Explicit Procedure

The second type of event procedure, called an explicit procedure, enables you to process script code for a button control. The "explicit" in the term explicit procedure means you can give the procedure a name. Remember that an implicit procedure must assume the name of the button control. With an explicit procedure, however, you're free to customize the name of the procedure so you can supply a more descriptive name. You can also share this procedure across controls on your form because it isn't implicitly tied to the button control.

The following lines of code create an explicit event procedure:

<INPUT TYPE="BUTTON" NAME="cmdSignon" VALUE="Sign On" LANGUAGE="VBSCRIPT" ONCLICK=" ValidatePassword"

In this example, the ONCLICK attribute enables you to specify which procedure to execute when the push button is clicked. Here, the procedure is named ValidatePassword. The LANGUAGE attribute is used to indicate the scripting language for the event procedure; this example uses VBScript. Listing 12.7 shows an example of using an explicit event procedure to process the user sign-on form.
Listing 12.7. Creating an explicit procedure.

<HTML> <HEAD> <TITLE>An Explicit Procedure</TITLE> </HEAD> <BODY> <H2>The Killer App</H2> <HR> <P> <FORM NAME="MyForm" > <H3>Please enter your user name and password to experience the Killer App:</H3> <P> User Name: <INPUT TYPE="TEXT" NAME="txtName" SIZE="20"> <P> Password: <INPUT TYPE="PASSWORD" NAME="txtPassword" SIZE="10"> <P><P> <INPUT TYPE="BUTTON" NAME="cmdSignon" VALUE="Sign On" LANGUAGE="VBSCRIPT" ONCLICK=" ValidatePassword"> </FORM> <SCRIPT LANGUAGE="VBSCRIPT" >  </SCRIPT> </BODY> </HTML>

This example uses an explicit event procedure to validate the length of the password. Notice that the procedure name is customized to reflect what the procedure does. Also, the tag to create the button control includes the LANGUAGE and ONCLICK attributes. The ONCLICK attribute gives control to the ValidatePassword procedure when the user clicks the Sign On button.
Reviewing HTML Form Design

The form's design of the user interface is crucial to your application's success. Using the house analogy again, if you hired a builder to build a new house, you wouldn't want him to suddenly grab a hammer and nails one day and decide to build the house. You hope that the builder spends some time designing the house first, and you want him to follow blueprint designs and approved standards for constructing the rooms. You have asked for the rooms to be built in a particular way because you want living in the house to be a rich, rewarding experience--a place you look forward to returning to.

Form design might not be as important as providing a roof over your head, but this analogy shows you the importance of form design. You should definitely spend time contemplating your form's design. Ask yourself: "What is the user trying to do by using my application? How does this form help her perform certain tasks? Which controls should I use to make performing those tasks easier?" As a developer, the task of choosing the right control to perform the task is a vital part of constructing the user interface. Choosing the right tool is a required skill when you're designing and developing an application.

The next section outlines some design tips for HTML forms.
Designing an Effective Form

You should design your form with effectiveness in mind. In other words, you should design and develop an interface that lets the user be effective in performing the necessary tasks. Here are some tips to remember for designing an effective form:

Group your controls in a logical, related manner on your form.

Design forms that are consistent across your application.

Use consistent fonts, colors, and backgrounds for your forms.

Place the controls on your form in a logical order.

Use the right control for the job.

Supply default selections, when possible, for radio buttons, checkboxes, and selection lists.

Using the Proper Name

During today's lesson, I have given you standard naming conventions for each control. These standards make it easier to distinguish each control and its type. A summary of these naming standards is given in Table 12.2.
Table 12.2. Naming conventions for HTML form controls.

Control Prefix Example

Button cmd cmdSubmit

Checkbox chk chkHighSchool

Password txt txtPassword

Radio Button opt optCreditCard

Selection List lst lstVacationSpots

Text txt txtName

Textarea txa txaMemo

Putting It All Together to Build an Application

This section shows you how to build a sample application using the concepts you've learned about forms and form controls. The application uses forms, form controls, and some client-side script. The server-side process isn't covered in this lesson, so refer to yesterday's lesson on Active Server Pages for a refresher on server processing. You get a chance to integrate both the client and server side of an application during the lesson on Day 21, "Putting It All Together: The Publishers' Paradise Case Study."
Creating Functional Forms

This sample application demonstrates how to use each of the controls you've learned about today to build an effective user interface. The first form enables users to log onto the application. After they sign on, they can enter their name and address information and choose their favorite NBA teams to order a game schedule, roster, and a catalog of team items for the current season.
Building the User Sign-On Form

The first form uses a previous code example to create a form that enables the user to log onto the application. Listing 12.8 contains the code to create this form.
Listing 12.8. Creating the Log On form.

<HTML> <HEAD> <TITLE>Log On</TITLE> </HEAD> <BODY> <H2>The Killer App</H2> <HR> <P> <FORM NAME="MyForm" > <H3>Please enter your user name and password to experience the Killer App:</H3> <P> User Name: <INPUT TYPE="TEXT" NAME="txtName" SIZE="20"> <P> Password: <INPUT TYPE="PASSWORD" NAME="txtPassword" SIZE="10"> <P><P> <INPUT TYPE="BUTTON" NAME="cmdSignon" VALUE="Sign On" LANGUAGE="VBSCRIPT" ONCLICK=" ValidatePassword"> </FORM> <SCRIPT LANGUAGE="VBSCRIPT" >  </SCRIPT> </BODY> </HTML>

You studied this code example earlier today. As a reminder, the code uses an explicit event procedure containing client-side script to validate that the password entered is the appropriate length. This code doesn't verify the user ID against a database, but you could easily add this feature by using an Active Server Page. Figure 12.13 shows the first form users see when using this application.

Figure 12.13.

Logging onto the application.

Building the Order Form

Next, you need to construct the order form used to order the roster, game schedule, and a catalog of team items, such as jerseys, hats, and so on. Listing 12.9 shows the code for creating the order form.
Listing 12.9. Creating the order form.

<HTML> <HEAD> <TITLE>The B-Ball Source</TITLE> </HEAD> <BODY> <H3>Your Guide to Basketball Heaven</H3> Welcome to our web site! You can order a schedule of your favorite<BR> NBA team's game schedule along with a current year roster and a<BR> catalog of your favorite team's apparel all for the cost of $5.95<BR> to cover shipping costs. <HR> <FORM METHOD= "POST" ACTION="/HTMLControls/scripts/Submit.asp" > <PRE>Name: <INPUT TYPE="TEXT" NAME="txtName" SIZE="20"></PRE> <PRE>Address: <TEXTAREA NAME="txaAddress" ROWS="5" COLS="40"> </TEXTAREA></PRE> <P> <SELECT NAME="lstTeams" SIZE="1"> <OPTION VALUE="Bulls">Bulls</OPTION> <OPTION VALUE="Cavaliers">Cavaliers</OPTION> <OPTION VALUE="Celtics">Celtics</OPTION> <OPTION VALUE="Heat">Heat</OPTION> <OPTION VALUE="Jazz">Jazz</OPTION> <OPTION VALUE="Lakers">Lakers</OPTION> <OPTION VALUE="Magic">Magic</OPTION> <OPTION VALUE="Mavericks">Mavericks</OPTION> <OPTION VALUE="Pistons">Pistons</OPTION> <OPTION VALUE="Raptors">Raptors</OPTION> <OPTION VALUE="Rockets" SELECTED>Rockets</OPTION> <OPTION VALUE="Suns">Suns</OPTION> </SELECT> <P> <PRE>Items: <INPUT TYPE="CHECKBOX" NAME="chkSchedule" VALUE="Sched">Schedule </PRE><BR> <PRE> <INPUT TYPE="CHECKBOX" NAME="chkRoster" VALUE="Ros">Roster </PRE><BR> <PRE> <INPUT TYPE="CHECKBOX" NAME="chkItmCatalog" VALUE= "Cat">Catalog</PRE> <P> <PRE>Credit Card: <INPUT TYPE="RADIO" NAME="optCreditCard" VALUE= "AMEX"> American Express <BR></PRE> <PRE> <INPUT TYPE="RADIO" NAME="optCreditCard" VALUE="MC" CHECKED> Master Card <BR></PRE> <PRE> <INPUT TYPE="RADIO" NAME="optCreditCard" VALUE="V"> Visa </PRE> <P> <PRE>Card Number: <INPUT TYPE="TEXT" NAME="txtCardNumber" SIZE="20"></PRE><BR> <INPUT TYPE="SUBMIT" NAME="cmdSubmit" VALUE="Submit"> </FORM> </BODY> </HTML>

This code example creates an order form that uses many of the controls explained in today's lesson. The <PRE> tag is used to define explicit formatting for the controls on the form. The form uses the text control for the name and credit card number fields. Checkboxes are used to enable users to select the items they want to order. Since all the items can be chosen, the proper control is the checkbox. Radio buttons are used for the type of credit card to be used for payment. Figure 12.14 demonstrates the results of this code example.

The user has entered a name and address, chosen a favorite NBA team, and selected several items to be ordered. When the user enters the credit card information and clicks the Submit button, the order information is sent to the ASP to be processed.

Figure 12.14.

Ordering information about your favorite team.

This example demonstrates how to effectively design and develop a form for your application. Over the next few days, you will learn to distinguish the differences between using HTML form controls and using other controls and objects to process information for your application.
Summary

You have learned a lot about forms and controls and their purpose. HTML forms aren't the most robust, powerful user interfaces, but they do have their purpose. Over the next few days, you will learn about some more robust tools that can be used to build the user interface. The concepts you've learned today, however, can be applied to other types of controls. The forms and controls described today enable the user to supply input to the application. These forms can also be used to display information found in a database. All of the controls explained in today's lesson are intrinsic to HTML. The controls covered in the next few lessons are considered extrinsic controls; they must be inserted into the web page document.

In the first part of today's lesson, you learned about the purposes of a form and how a form can be useful to both the user and your application. You also learned the basic tags and attributes used to create a form. Next, you learned about the different intrinsic controls found in HTML forms, including the selection list control, the text control, the button control, the radio button control, the checkbox control, the textarea control, and the password control. For each control, you learned how to create it and what its naming convention and attributes are. Several examples showed you how to design an effective form.

The lesson then showed you how to use client-side script with HTML forms. Several examples were given to demonstrate how to use the power of a scripting language with your forms. The lesson also reviewed some design tips for your forms and gave you a summary of the naming conventions for your form controls. The final lesson of the day showed you how to integrate controls on a form to construct a user interface for your application.
Q&A

Q Should I use forms for my application's interface?

AForms offer a useful interface for supplying basic functions to your application. Forms can be used with CGI scripts and Active Server Pages to submit information to, and get information from, the server. The next few days of lessons will introduce other controls and objects that offer more functions and features for your application's interface. After learning about the different tools available, you can decide which tool offers the best features for your application.

Q How much text can I enter in the textarea control

AThe limit for the textarea control is approximately 65,000 characters.

Q Why should I adhere to standard naming conventions for my controls

AWithout standards, there would be chaos. Seriously, though, standard naming conventions help provide descriptive names for your controls. The most important advantage to using standard prefixes for your control names is that they enable you to easily identify the type of control being used. The prefix also makes it easier to read and understand your code.

For example, the control name CreditCard doesn't tell you what type of control is being used. It could be a text field, a radio button, or some other type of control. The nonstandard name relies on your memory of the control type to properly use it in your code. If you use the standard name optCreditCard, then you know that the control is a radio button, so you can use the correct tags, attributes, and code for a radio button control.

Workshop

In the workshop for today's lesson, you can have some fun with the concepts you have learned today. I want you to design and develop an application using the controls you learned about today. The application can consist of several web pages. You must properly use every form control that has been discussed. As you develop the forms for your application, think about the proper uses of each control, and figure out why the control you're using meets the needs for your application. You should also think about additional uses for these controls.

You might also want to create some Active Server Pages and client-side script to handle the processing of your application. You can consider this part extra credit. The benefit for you is that you will begin to see how each of the application components work together for the good of the application.
Quiz

1. What's the difference between a radio button and a checkbox?

2. What value of the TYPE attribute for a button enables you to send information to the server based on the ACTION method defined for your form?

3. What are the advantages of an explicit event procedure?

Quiz Answers

1. With a radio button, the user can select between mutually exclusive choices; in other words, he or she can choose only one option from the list of items. However, with a checkbox, the user can select more than one item from the list of options. These controls also look different. The radio button is circular and contains a dark circle for the selection indicator. The checkbox is square and uses a check mark for its selection indicator.

2.Use the value of SUBMIT to send information to the server for processing.

3 An explicit event procedure isn't tied to a single event. You can share this procedure among several controls. Also, you can supply the name for the procedure, which lets you accurately describe its function.