JavaScript and Forms

Overview of Web Forms   Introduction A form is a section of a web page that contains one or a group of objects that the user interacts with. These objects are referred to as Windows controls, web controls, or simply controls. When using a control, the user may enter or select some values and send the result to a specific file as designed by an application developer. To support this interaction, HTML provides different text-based and selection controls that can handle various types of scenarios. Besides these, there are action controls that actually send a signal to a script. There are various types of controls you can use and different ways of creating them. Still, most controls are created using a non-closing tag called <input>. The Attribute of a Control To create a control, you may start with the <input> tag. Inside of the <input> tag, you specify the type of control you want. We will review attributes available and what they produce. The Events of a Control We mentioned that a user can interact with a web page using the controls on it. To do this, the user can click a control, type in it, move the caret from it to another control, etc. Everyone of these actions creates a message that must be sent to a program used by the programmer: the interpreter. The interpreter then analyzes the message and produces a result. When a message created by a control is sent, it is also said that an event was fired. There are various types of events sent by different controls. We will mention each when necessary. When you create a web-based application, you decide what controls are necessary for your application. When you select a control, you must also know what events that control can send. In most cases, if you don't care about an event, when it occurs, the computer may ignore the event or produce a default behavior. If you think that a certain event is important for your application and that you must take action when that event fires, you should write code to react appropriately. The Form   Introduction A form is the central object that manages the other controls. Although the controls can send their data to a script, a form can be used to collect the values typed or selected on the controls, gather them as if they constituted one control and make these values available to a validating file on a server.  Creating a Form To create a form, you use the <form> tag. Because a form is a collection of controls and their values, the form must have an end that lets the browser know where the form closes. This is done with the </form> closing tag: <FORM> </FORM> Everything between the <FORM> and the </FORM> tags belong to the form and is called the body of the form. Almost anything can go in the body of the form. You can design it using any HTML tag and make it as attractive as you wish.  Forms Characteristics Although the <form> and the </form> tags are enough to create a form, such a form can hardly communicate with a script. One of the most important characteristics you should set for a form is its name. The name allows a script to refer to the form and it can be used by files on the server level. To set the name of a form, assign an appropriate string to the Name attribute of the <form> tag. To refer to a form in a script, type the document keyword, followed by a period (the period is an operator), followed by the name of the form. Suppose you create a form called CreditApplication. If you want to call it from a script, you would use: document.CreditApplication   Practical Learning: Introducing Forms Start your text editor and type the following:   <h2>Employment Application</h2> <form name="frmEmployees"> <table border="0" width="288"> <tr> <td width="80">First Name:</td> <td width="194"></td> </tr> <tr> <td width="80">Last Name:</td> <td width="194"></td> </tr> <tr> <td width="80">Full Name:</td> <td width="194"></td> </tr> </table> </form> Save the file as employment.htm in your JavaScript Lessons folder Preview it in your browser Text Boxes   Introduction A text box is a rectangular box that receives or displays text. By default, a text box is intended for the user to type text in response to a request. To create a text box, use the <input> tag. For a text box, specify the Type attribute as Text. The minimum syntax for creating a text box is: <input type=”text”> Because HTML is not case sensitive, you can create the control in all uppercase, all lowercase, or a mix of both. Therefore, the control can also be created with: <Input Type=”Text”> or <INPUT TYPE=”TEXT”>   Characteristics of a Text Box By default, the text box control provides enough space to display a first name, a username, or a short e-mail address. If it is not enough, you can widen the text box. To increase the width of a text box, the <input> tag is equipped with an attribute called size. Therefore, to widen a text control, assign an appropriate numeric value to the size attribute. Like all HTML attributable tags (such as <body> or <font>), there is no rule on the order of attributes. Here is an example that creates a text box control: <input type="text" size="40"> The value that displays in a text box is held by an attribute called value. To display text in the text box, assign a string to the value attribute. Here is an example: <input type="text" value="James Fame Ndongo">   To retrieve the content of a text box, you can use the value attribute. To access it, you can type the name of the form that contains the text box, followed by a period, followed by the name of the text box, followed by a period, and followed by value. If you plan to use a text box in a script or code of any kind, give the control a name. This is done by assigning a string to the name attribute. Here is an example: <input type="text" name="FirstName">   Events of a Text Box To use a text box, the use can click it or continuously press Tab until the caret is positioned in the text box. When this happens, the text box is said to have focus. When a text box receives focus, it fires an onFocus event. In most applications, a text box primarily appears empty to the user who can then enter one or more characters in it. To enter a character in a text box, the user usually presses a key on the keyboard. When this happens, the text box fires an onKeyDown event. When the user releases the key, the control fires an onKeyUp event. In some cases, the user may press a key and hold it down. This causes the control to fire an onKeyPress event. When the user types a character in a text box or modifies its content such as putting space between two characters or deleting a character in it, the control fires an onChange event. This event indicates that the content of the text box is not the same it was when it first displayed to the user (the text box is said to be "dirty"). When the user has finished using a control and either presses tab or clicks another control, the text box fires an onBlur event to indicate that it has lost focus.   Practical Learning: Using Text Boxes To use text boxes, change the file as follows:   <h2>Employment Application</h2> <form name="frmEmployees"> <table border="0" width="288"> <tr> <td width="80">First Name:</td> <td width="194"><input type="text" name="txtFirstName" size="10" onChange="form.txtFullName.value = form.txtFirstName.value + ' ' + form.txtLastName.value"></td> </tr> <tr> <td width="80">Last Name:</td> <td width="194"><input type="text" name="txtLastName" size="10" onChange="form.txtFullName.value = form.txtFirstName.value + ' ' + form.txtLastName.value"></td> </tr> <tr> <td width="80">Full Name:</td> <td width="194"><input type="text" name="txtFullName" size="20"></td> </tr> </table> </form> Save the file and preview it in your browser Type a name in the First Name text box, press Tab, type another name in the Last Name text box Return to your text editor A Button    Creating a Button A button is a rectangular window that the user clicks, as indicated by an application developer. What happens when the user clicks it depends. To create a button, use the <input> tag and specify the type of control by assigning the button value to the Type attribute. Here is an example: <input type="button"> The most visual properties of a button are its location and the text it displays. There are various ways you can set the location of a button on the page. Although HTML provides paragraph tags that can position the button, one of the best options you have is to use a table when designing your form. This will also be valid for all controls we will learn on this site. Button Properties The text that a button displays lets the user know what the button is used for. The text on the button is sometimes called a caption. In HTML, this caption is the Value attribute of the <input type="button"> existing tag. To provide the button's caption, assign the desired string to Value. Here is an example: <input type="button" value="Send Me Somewhere"> To know the caption that a button is displaying, you can access its value attribute. Another important property of a button is its name. This allows the browser to identify it. The name is set by assigning an appropriate name to the Name attribute of the <input> tag. To access a button on a form, type the name of the form, followed by a period, followed by the name of the button. Button Events The most important and the most used event on a button results on clicking it. When the button is clicked, it fires an event called onClick. To process a script when the user clicks a button, you can assign the name of a function, as a string, to the onClick attribute of the button.   Practical Learning: Using Button To use a button, change the file as follows:   <h2>Employment Application</h2> <form name="frmEmployees"> <table border="0" width="320"> <tr> <td width="80">First Name:</td> <td><input type="text" name="txtFirstName" size="10"></td> </tr> <tr> <td width="80">Last Name:</td> <td><input type="text" name="txtLastName" size="10"> <input type="button" value="Evaluate" name="btnEvaluate" onClick="form.txtFullName.value = form.txtLastName.value + ', ' + form.txtFirstName.value"> </td> </tr> <tr> <td width="80">Full Name:</td> <td><input type="text" name="txtFullName" size="24"></td> </tr> </table> <center></center> </form> Save the file and preview it in your browser Type a name in the First Name text box. Type another name in the Last Name text box and click Evaluate. Here is an example: Return to your text editor The Submit Button   Introduction To send all of the information of a form to a script, HTML provides a special button called submit. Like the regular button, the submit button is a rectangular object that the user clicks. To create a submit button, use the <input> tag but specify the type of control as submit to the type attribute. Here is an example: <input type="submit"> Unlike the regular button, the submit button has a built-in caption that automatically displays its role to the user.  Characteristics of the Submit Button The default caption of the submit button is submit. If this caption doesn't apply to your scenario, you can change it to a more meaningful caption. To change the submit button's caption, assign the desired string to the Value attribute of the <input type="submit"> existing tag. Here is an example: <input type="submit" value="Validate Application"> One of the most important properties of a submit button is its name. Even if you are creating a form for fun, the browser needs to identify the button among other controls. The name is set by assigning an appropriate name to the Name attribute of the <input> tag.  The Submit button on a form is the main button the user would click the send the form's collected data to a script or another file. To make this happen, a form is equipped with an attribute called Action. This attribute is assigned an outside function, script, or server file that would receive the results of the form and take appropriate actions. To tell the form what to do when the user clicks the Submit button on a form, assign the desired (or an appropriate) string to the Action attribute of the <form> tag. In the following example, a form sends its result to an e-mail address: <form action="mailto:custservice@functionx.com"> </form> HTML allows you to decide how you want the form to send its data away. The most two popular options you have are Post and Get. Submit Button Events The most important and the most used event on a button results on clicking it. When the button is clicks, it fires the onClick event.    The Reset Button   Introduction Most of the forms allow the user to fill out text controls and make selections from other controls. These actions change the values of those controls as set by the application developer. If in the middle of filling out a form the user decides to start over, HTML provides a special button that can reset all controls to their default states or values. This is programmatically done using a special button called Reset. To create a reset button, use the <input> tag and specify the type of control as Reset to the Type attribute. Here is an example: <input type="reset"> Unlike the regular button, the reset button has a built-in caption that automatically displays its role to the user.  Characteristics of the Reset Button The default caption of the reset button is Reset. If this caption is not explicit enough for your application, you can change it. To change the caption of a reset button, set the desired string to the Value attribute of the <input type="reset"> existing tag. Here is an example: <input type="reset" value="Start Over"> The reset button is mainly configured to handle its business on the form and doesn't need to send any signal such as a result to a script. Therefore, its name is not as important as it is to other controls. If for some reason you need to refer to the Reset button from a script, then you can give it a name. The name is given by assigning an appropriate string to the Name attribute of the <input type="reset"> existing tag.   Practical Learning: Creating a Reset Button To use a reset button, change the file as follows:   <h2>Employment Application</h2> <form name="frmEmployees"> <table border="0" width="300"> <tr> <td width="80">First Name:</td> <td><input type="text" name="txtFirstName" size="10"></td> </tr> <tr> <td width="80">Last Name:</td> <td><input type="text" name="txtLastName" size="10"> <input type="button" value="Evaluate" name="btnEvaluate" onClick="form.txtFullName.value = form.txtLastName.value + ', ' + form.txtFirstName.value"> </td> </tr> <tr> <td width="80">Full Name:</td> <td><input type="text" name="txtFullName" size="24"></td> </tr> <tr> <td width="80"></td> <td><input type="reset" value="Clear Application" name="btnReset"> </td> </tr> </table> </form> Save the file and preview it in your browser Type a name in the First Name text box. Type another name in the Last Name text box and click Clear Application.  Return to your text editor

 

The Text Area

 

Introduction

A text area is a large control that is a substitute to handle large paragraph where the text box cannot or should not be used. To create a text area, use the <TextArea> tag which must also be closed. Here is an example:   <textarea></textarea>

Characteristics of the Text Area

The dimensions of a text area are the main properties that set it apart from the text box control. The width of a text area is set using the COLS attribute of the <textarea> tag. Therefore, to increase the width of the text area, assign the desired numeric value to the cols attribute. The width is measured by the number of characters that can be displayed on one line of text. By default, a width of a text area is set to 20 characters. To change this, you can assign a higher value to the attribute: <textarea cols="40"></textarea> The height of a text area is measured by the number of visible lines of text that the text area can display. By default, the text area is configured to display two lines of text. This property is controlled by the ROWS attribute. To change or increase this number, assign an appropriate numeric value to the rows attribute. You can specify either one of the COLS or the ROWS values. You can also specify both to control the dimensions of the text area. When using both attributes, there is no order of the attributes. Here is an example: <textarea cols="40" rows="10"></textarea> If you are planning to access the text area from your code, you should give the control a name.

 

Password Text Boxes

 

Creating a Password Text Box

HTML provides a specific text designed for a form's password. This looks like a classic text box and is created the same. The main difference is that the text that the user types doesn't display the characters that are being entered. As the user types in the password text box, text appears as a series of asterisks or periods. Like the regular text box and many other controls, to create a password text box, use the <input> tag and specify the control type as password assigned to the type attribute. Here is an example: <input type="password">

Characteristics of the Password Text Box

The size of the password text box is controlled by the size attribute of the <input> tag. To increase the width of the control, assign the desired numeric value to the size attribute. Here is an example that creates a text box control: <input type="password" size="25"> The text that is typed in the password text box is held by the value attribute. You can use this attribute to find out what password the user typed. If you plan to retrieve the password value in a script or code of any kind, give the control a name. This is done by assigning a name string to the name attribute. Here is an example: <input type="password" name="Guarded">

Check Boxes

 

Creating a Check Box

A check box is a small square box that allows the user to select an item or to deselect it. The user makes this decision by clicking in the small square box. By default, or depending on how the control is configured, the square box is white and empty. This indicates that it is false or off. When the user clicks it, a small check mark appears in the square box, indicating that it is true or on. To create a check box, use the <input> tag and specify the control type as checkbox, CheckBox, or CHECKBOX. Here is an example:

<input type="checkbox">

A check box doesn't display what it is used for. Therefore, you should (always) add a label close to it to help the user know the role of this control. If using many check boxes in a group, the user is able to click or select as many different check boxes that the application designer allowed.

Characteristics of a Check Box

As described already, when the user clicks the check box, its value becomes on or true. You can programmatically set this state by using the checked attribute of this tag. If you assign it a true value, the check box becomes checked. Otherwise, it would be unchecked. Here is an example of using the tag: <input type="checkbox" checked="true"> If you plan to use a check box in a script, you should give it a name. This is done by assigning a string to the Name attribute.

Check Box Events

The most popular and probably the most important event of a check box fires when the user clicks the check box, selecting or deselecting it. Therefore, you can use the onClick event of the check box to find out whether the control has been selected or not; if so, you can decide what to do in response.

Radio Buttons

 

Introduction

A radio button is a small round and white circle that allows the user to select an item from a group. This is because a radio button is generally accompanied by others. From a group of items, represented each by a circle, when the user clicks one of them, none of the others is selected. To change the selection, the user must click another choice in the group. To create a radio button, use the <input> tag and specify the type attribute as radio. Here is an example: <input type="radio"> To make your radio buttons effective, you should always provide at least two radio buttons in a group.

Characteristics of Radio Buttons

One of the most important attributes to set on the radio button is the name. This attribute should be used even if you don't plane to use the radio button in a script, since many radio buttons can use the same name, this name will be helpful in determining what particular control has been selected. Therefore, the same value (string) for the Name attribute can be assigned to each radio button of the same group. The checked attribute, as applied to the check box, can be used in two circumstances, if you want one of the buttons in the group to be selected by default, assign a true value to its checked attribute. Here is an example:   Select your T-Shirt size Small  Medium Large X-Large <table border="0" width="176">   <tr>     <td width="168" colspan="2">Select your T-Shirt size</td>   </tr>   <tr>     <td width="119">Small&nbsp;</td>     <td width="49"><input type="radio"></td>   </tr>   <tr>     <td width="119">Medium</td>     <td width="49"><input type="radio" checked="true"></td>   </tr>   <tr>     <td width="119">Large</td>     <td width="49"><input type="radio"></td>   </tr>   <tr>     <td width="119">X-Large</td>     <td width="49"><input type="radio"></td>   </tr> </table> You can also use the checked attribute in your script to find out what radio button was clicked at one time.

Radio Button Events

Because it is first of all a button, the most fundamental event that a radio button can send to the browser is called onClick. This event fires when the user clicks or select a particular radio button. You can therefore use it to take action as a response.

 

Combo Boxes

 

Introduction

Like a group of radio buttons, a combo box allows the user to select an item from a group, namely a list. A combo box has the shape as a text box, except that it is equipped with an arrow on the right side of the control. This arrow control allows the user to display a list of items that are hidden by the text side of the combo box. When the list displays, the user select one item from the list. Once the item has been selected, the list retracts back to its original text-like size. To create a combo box, use a tag called select. This tag has to be closed. After typing the <select> tag, create each item that is part of the control using the <option> tag. Each item uses its own <option> tag. After listing the items, make sure you close the select tag as </select>. Here is an example: <select>   <option>Small   <option>Medium   <option>Large   <option>X-Large </select>

 

Practical Learning: Introducing Combo Boxes

1. Start a new file in your text editor and type the following:
    

   <h1>Georgetown Cleaning Services</h1> <form name="frmCleaningOrder"> <table border="0" width="540"> <tr> <td width="446" colspan="4"> <h3>Order Identification</h3> </td> </tr> <tr> <td width="106">Customer Name:</td> <td width="150"><input type="text" name="txtCustomerName" size="20"></td> <td width="108">Customer Phone:</td> <td width="150"><input type="text" name="txtCustomerPhone" size="20"></td> </tr> <tr> <td width="106">Date Left:</td> <td width="150"><input type="text" name="txtDateLeft" size="20"></td> <td width="108">Time Left:</td> <td width="150"><input type="text" name="txtTimeLeft" size="20"></td> </tr> <tr> <td width="106">Date Expected:</td> <td width="150"><input type="text" name="txtDateExpected" size="20"></td> <td width="108">Time Expected:</td> <td width="150"><input type="text" name="txtTimeExpected" size="20"></td> </tr> </table> <hr> <table border="0" width="596"> <tr> <td width="381"> <table border="0" width="381"> <tr> <td width="128"><b>Item Type</b></td> <td width="71"><b>Unit Price</b></td> <td width="38"><b>Qty</b></td> <td width="46"></td> <td width="66"><b>Sub-Total</b></td> </tr> <tr> <td width="128">Shirts</td> <td width="71"><input type="text" name="txtShirtUnitPrice" size="7" value="0.95"></td> <td width="38"><input type="text" name="txtShirtQuantity" size="4" value="0"></td> <td width="46"><input type="button" value="Calc" name="btnShirts"></td> <td width="66"><input type="text" name="txtShirtSubTotal" size="8" value="0.00"></td> </tr> <tr> <td width="128">Pants</td> <td width="71"><input type="text" name="txtPantsUnitPrice" size="7" value="2.75"></td> <td width="38"><input type="text" name="txtPantsQuantity" size="4" value="0"></td> <td width="46"><input type="button" value="Calc" name="btnPants"></td> <td width="66"><input type="text" name="txtPantsSubTotal" size="8" value="0.00"></td> </tr> <tr> <td width="128"><select size="1" name="cboItem1"> <option selected>None</option> <option>Women Suit</option> <option>Dress</option> <option>Regular Skirt</option> <option>Skirt With Hook</option> <option>Men's Suit 2Pc</option> <option>Men's Suit 3Pc</option> <option>Sweaters</option> <option>Silk Shirt</option> <option>Tie</option> <option>Coat</option> <option>Jacket</option> <option>Swede</option> </select></td> <td width="71"><input type="text" name="txtItem1UnitPrice" size="7" value="0.00"></td> <td width="38"><input type="text" name="txtItem1Quantity" size="4" value="0"></td> <td width="46"><input type="button" value="Calc" name="btnItem1"></td> <td width="66"><input type="text" name="txtItem1SubTotal" size="8" value="0.00"></td> </tr> <tr> <td width="128"><select size="1" name="cboItem2"> <option selected>None</option> <option>Women Suit</option> <option>Dress</option> <option>Regular Skirt</option> <option>Skirt With Hook</option> <option>Men's Suit 2Pc</option> <option>Men's Suit 3Pc</option> <option>Sweaters</option> <option>Silk Shirt</option> <option>Tie</option> <option>Coat</option> <option>Jacket</option> <option>Swede</option> </select></td> <td width="71"><input type="text" name="txtItem2UnitPrice" size="7" value="0.00"></td> <td width="38"><input type="text" name="txtItem2Quantity" size="4" value="0"></td> <td width="46"><input type="button" value="Calc" name="btnItem2"></td> <td width="66"><input type="text" name="txtItem2SubTotal" size="8" value="0.00"></td> </tr> <tr> <td width="128"><select size="1" name="cboItem3"> <option selected>None</option> <option>Women Suit</option> <option>Dress</option> <option>Regular Skirt</option> <option>Skirt With Hook</option> <option>Men's Suit 2Pc</option> <option>Men's Suit 3Pc</option> <option>Sweaters</option> <option>Silk Shirt</option> <option>Tie</option> <option>Coat</option> <option>Jacket</option> <option>Swede</option> </select></td> <td width="71"><input type="text" name="txtItem3UnitPrice" size="7" value="0.00"></td> <td width="38"><input type="text" name="txtItem3Quantity" size="4" value="0"></td> <td width="46"><input type="button" value="Calc" name="btnItem3"></td> <td width="66"><input type="text" name="txtItem3SubTotal" size="8" value="0.00"></td> </tr> <tr> <td width="128"><select size="1" name="cboItem4"> <option selected>None</option> <option>Women Suit</option> <option>Dress</option> <option>Regular Skirt</option> <option>Skirt With Hook</option> <option>Men's Suit 2Pc</option> <option>Men's Suit 3Pc</option> <option>Sweaters</option> <option>Silk Shirt</option> <option>Tie</option> <option>Coat</option> <option>Jacket</option> <option>Swede</option> </select></td> <td width="71"><input type="text" name="txtItem4UnitPrice" size="7" value="0.00"></td> <td width="38"><input type="text" name="txtItem4Quantity" size="4" value="0"></td> <td width="46"><input type="button" value="Calc" name="btnItem4"></td> <td width="66"><input type="text" name="txtItem4SubTotal" size="8" value="0.00"></td> </tr> </table> </td> <td width="201"> <table border="0" width="100%"> <tr> <td width="100%" align="center" colspan="2"><input type="button" value="Calculate Order" name="btnCalculate"></td> </tr> <tr> <td width="50%">Cleaning Total:</td> <td width="50%"><input type="text" name="txtCleaningTotal" size="8" value="0.00"></td> </tr> <tr> <td width="50%">Tax Rate</td> <td width="50%"><input type="text" name="txtTaxRate" size="6" value="5.75">%</td> </tr> <tr> <td width="50%">Tax Amount:</td> <td width="50%"><input type="text" name="txtTaxAmount" size="8" value="0.00"></td> </tr> <tr> <td width="50%">Order Total:</td> <td width="50%"><input type="text" name="txtOrderTotal" size="8" value="0.00"></td> </tr> </table> </td> </tr> </table> <hr> <p><input type="reset" value="Start New Cleaning Order" name="btnNewOrder"></p> </form>

2. Save the file as cleaningorder.htm in your JavaScript Lessons folder
3. Preview it in your browser
   
   
4. Return to your text editor

Characteristics of a Combo Box

To select a default item from the combo box, use the selected attribute of the <options> tag. Here is an example:   <select>   <option>Small   <option selected="true">Medium   <option>Large   <option>X-Large </select>

Events of a Combo Box

Besides looking at a combo box to see its current value, the most expected action the user can make on a combo box is to click its arrow and select a new item. There are two main ways to select a value in a combo box. The user can first press Tab a few times until the combo box receives focus. An alternative is to click the down pointing arrow. In both cases, when the combo box receives focus, it fires an onFocus event. If the user pressed Tab to give focus to the combo box, he or she can press Alt + the down arrow key to display the list of the control. Remember that the user can also click the arrow to display the list. To actually select an item from the list, the user can click it. When this is done, the combo box fires an onChange event to indicate that its value has changed. After using a combo box, the user can press Tab or click another control. In both cases, the combo box would fire an onBlur event to indicate that it has lost focus.

List Boxes

 

Creating a List Box

Like radio buttons or a combo box, a list box displays a list of items that the user can select from. Unlike a combo box, a list box displays a taller list and can even display all of its items all the time. Like a combo box, a list box is created using the <select> tag. Like the combo box, each item of a list box is created using the <option> tag. To make the control a list box, the <select> tag is equipped with an attribute called size. This attribute accomplishes two purposes: it makes the control become a list box and it sets the vertical size of the list box. In other words, it decides on the number of items the list box can display at a time. Here is an example: <select size="4">   <option>Schwartz   <option>Medou   <option>Larson   <option>Creans   <option>Schultze   <option>Greenberg </select>

Characteristics of a List Box

A list box can be configured to allow the user to select one item. To select an item from the list, set the selected attribute of its <option> tag to true. Here is an example: <select size="4">   <option>Schwartz   <option selected="true">Medou   <option>Larson   <option>Creans   <option>Schultze   <option>Greenberg </select> Unlike a combo box, a list box can be configured to allow the user to select more than one item from the list. To allow this, include the multiple attribute in the <select> tag. Here is an example:   <select size="4" multiple>   <option>Schwartz   <option>Medou   <option>Larson   <option>Creans   <option>Schultze   <option>Greenberg </select>   Just including the multiple attribute in the <select> tag, even if you omit the size attribute, causes the control to be a list box

List Box Events

The most commonly used and the most important event of a list is called onChange. This event fires whenever the user makes a selection in the list box. This allows you to take appropriate actions.