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

• 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>
  

The Password Widget
Table of Contents
The Radio Widget