HTML Tutorial - Selection-Based Controls

Selection Controls

Introduction

Most of the controls (which excluded just a few of them) are created using a special tag called input. To use the <input> tag, you must let the browser know what type of input control or object you want to create. The <input> tag uses an attribute called Type that allows you to specify the kind of control you want. This is done by assigning the name of the control to the Type attribute. Some browsers, including Internet Explorer, can recognize all of the HTML GUI controls that we will be using here. Therefore, you can just assign the name of the control to the Type attribute. In some circumstances, and based on HTML standards, you should assign the control type as a string.

Like the <br>, some <p>, and some <li> tags, the <input> tag doesn’t need to be closed.

Selection Controls: Check Boxes

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.

Creating a Check Box

To create a check box, use the <input> tag and specify the control type as checkbox, CheckBox, or CHECKBOX. Here is an example:

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.

Check Box Properties

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.

Selection Controls: Radio Buttons

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.

Creating Radio Buttons

To create a radio button, use the <input> tag and specify the type attribute as radio. Here is an example:

To make your radio buttons effective, you should always provide at least two radio buttons in a group.

Radio Button Properties

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 </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.

Selection Controls: Combo Boxes

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.

Creating a Combo Box

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>

Combo Box properties

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>

Selection Controls: List Boxes

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.

Creating a List Box

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>

List Box properties

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.


Previous	Copyright © 2002-2007 FunctionX, Inc.