Welcome to ITM Web100 Training Program

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:

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:

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>

Apples
Oranges