Creating check boxes

A check box is either selected or not. Unlike radio buttons, check boxes can be deselected. A check box, for example, can be unselected if the user clicks inside the check box. On the other hand, a radio button cannot be deselected if you click on the radio button. A radio button can be deselected by clicking on some other radio button choice.

To create a check box, use the <input> tag and set the type attribute to "checkbox" as:

<input type="checkbox"> A choice

That will produce:

A choice

Naming a check box

You can add the name attribute to a check box to identify it and to access the value of the check box when you process the form. The following,

<input type="checkbox" name="FavLang"> HTML

names our check box as "FavLang" and we would use that name to access what the user selected when the data is passed to the server. You do not have to use a different name for every check box you use, however. Related choices represented with check boxes can be grouped with a same name. In the following,

Choose your favortie coding langaguge(s):
<input type="checkbox" name="FavLang">HTML
<input type="checkbox" name="FavLang">ASP
<input type="checkbox" name="FavLang">JavaScript

we group our check boxes with a single name, "FavLang." Or, you could have used a different name for each check box. Remember the names of your check boxes are not displayed on the web page; they are instead used to identify a check box or grouped check boxes. The following shows the output of the above HTML code:

Choose your favortie coding langaguge(s):
HTML
ASP
JavaScript

When you group check boxes together, remember to assign a different value to each check box. By assigning a different value to each check box, you are able to determine what the user selected and submitted to server. See the next section how to assign a value to each check box.

Setting a default value for a check box

By default, when a check box is selected and that choice is submitted to the server, the value of the check box is "on." You can, however, assign a different value to a check box, by using the value attribute. For example, in the following

Choose your favortie coding langaguge(s):
<input type="checkbox" name="FavLang" value="HTML">HTML
<input type="checkbox" name="FavLang" value="ASP">ASP
<input type="checkbox" name="FavLang" value="JavaScript">JavaScript

we assign different values to each of the check boxes. The first check box, for instance, is assigned the value HTML. If the user selects the first choice, the server will receive the value "HTML" for the check box named FavLang. If the user selects more than one check box, each value for the selected check box will be sent to the server. If, however, the user does not select any check box, no value will be sent to the server.

So far these check boxes, if the user selects the first choice, the value "ScriptingMaster" will be sent to the server, for the second check box, the value "google" will be sent to the server and for the third choice, the value "msn" will be sent to the server.

Allowing multiple selections for a check box

When a web form loads to a browser, the check boxes are deselected. However, as you can with radio buttons, you can set a default selected check box by adding the checked attribute to a check box. For instance,

http://www.scriptingmaster.com <input type="checkbox" name="FavoriteSite" value="ScriptingMaster" checked>
http://www.google.com <input type="checkbox" name="FavoriteSite" value="google">
http://www.msn.com <input type="checkbox" name="FavoriteSite" value="msn">

With the above HTML code, we specified that the first check box be selected when a web form loads to a browser. Remember a user can always deselect a default or any other check box, if needed.