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>
