The Check Box Widget 

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: 

• Let's take a closer look at each of these 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 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>

The Password Widget
Table of Contents
The Radio Widget