introduction to web programming The Check Box Widget Besides allowing the user to enter lines of text, you often want to give them the ability to select from a number of choices. One of the most familiar widgets for selecting choices is the Check Box. A check box can be set to either an "on" state or an "off" state by the user. Typically, the "on" state will look like a checked box or a filled in circle. A standard check box is shown below:

Try it out...check it and uncheck it.

Behind the scenes, the above check box was created with the following HTML code

    <FORM>
    <INPUT TYPE = "CHECKBOX" NAME = "check">
    </FORM>
    

Notice that the Check Box widget is specified as an input TYPE of "CHECKBOX".

The Check Box widget also has several other attributes that affect how it works. The following table outlines them:

Attribute Description
TYPE Specifies the type of interface widget. For a check box widget, you use "CHECKBOX"
NAME Specifies the variable name associated with this widget
VALUE Specifies the VALUE that will be sent in the URL encoded string if the check box is checked. If it is not checked, neither the name nor the value will be part of the URL encoded string.
CHECKED Specifies that the check box will be checked by default.

Let's take a closer look at each of these attributes. The NAME and VALUE attributes The NAME and VALUE attributes are essential and allow you to specify the name and value portion of the name/value pair that is sent as part of the URL encoded string. For example, consider the following checkboxes:

Apples
Oranges

Here is the code that we used to make them.

    <FORM>
    <TABLE BORDER = "1">
    <TR>
    <TD>Apples</TD>
    <TD><INPUT TYPE = "CHECKBOX"
                       NAME = "apple_is_checked"
                       VALUE = "yes"></TD>
    </TR>

    <TR>
    <TD>Oranges</TD>
    <TD><INPUT TYPE = "CHECKBOX"
                       NAME = "orange_is_checked"
                       VALUE = "yes"></TD>
    </TR>
    </TABLE>
    </FORM>
    

Notice that if you checked both check boxes and submitted this data over the web, the URL encoded string would look like the following:

    apple_is_checked=yes&orange_is_checked=yes
    
The CHECKED Attribute The CHECKED attribute allows you to set the state of the check box to "on" by default. Take a look at the following example:

Download JDK 1.1.4 for Java
Download the AFC for Java

And here is the code that we used to make those checkboxes.

    <FORM>
    <TABLE BORDER = "1">
    <TR>
    <TD>Download JDK 1.1.4 for Java</TD>
    <TD><INPUT TYPE = "CHECKBOX"
               NAME = "download_jdk"
               VALUE = "yes"></TD>
    </TR>

    <TR>
    <TD>Download the AFC for Java</TD>
    <TD><INPUT TYPE = "CHECKBOX"
               NAME = "download_afc"
               VALUE = "yes" CHECKED></TD>
    </TR>
    </TABLE>
    </FORM>
    

Previous | Next | Table of Contents