Working with Check Boxes

The next type of input field you'll create in the contest form is the check box field. A check box is either selected or not, but unlike radio buttons, there is only one check box per field. You create check boxes using the <INPUT> tag, with the TYPE property set to CHECKBOX, as follows:

<INPUT TYPE=CHECKBOX NAME=text>

where text is the name of the field. A check box field has the value "on" if the check box is selected, and no value is assigned if the check box is left unselected.

By default, check boxes are unselected when the form open. As with radio buttons, you can use the CHECKED property to automatically select a check box. To do this, you would add CHECKED before the last bracket in your code.

You will use check boxes to list additional items that contest participants would want to include in the base flavor of their ice cream blend. The check box property gives the flexibility to chose as many additional items as they wish. The items you will list are:

  • Pecans
  • Walnuts
  • Marshmallows
  • Cherries
  • Chocolate Chips
  • Mint
  • Caramel
  • Gummy Bears
  • Gummy Worms
  • M & M bits
  • Candied Apple bits
  • Snickers bits
  • Reese Cup chunks

Return to your text editor and the contestform.html file. Directly above the </TABLE> tag, insert the following lines:

<TR>

<TD VALIGN=TOP>Additional Items:(check all that you would include):</TD>

<TD><INPUT TYPE=CHECKBOX NAME=Pecans>Pecans<BR>

<INPUT TYPE=CHECKBOX NAME=Walnuts>Walnuts<BR>

<INPUT TYPE=CHECKBOX NAME=Marshmallows>Marshmallows<BR>

<INPUT TYPE=CHECKBOX NAME=Cherries>Cherries<BR>

<INPUT TYPE=CHECKBOX NAME=Chocolate Chips>Chocolate Chips<BR>

<INPUT TYPE=CHECKBOX NAME=Mint>Mint<BR>

<INPUT TYPE=CHECKBOX NAME=Caramel>Caramel<BR>

<INPUT TYPE=CHECKBOX NAME=Gummy Bears>Gummy Bears<BR>

<INPUT TYPE=CHECKBOX NAME=Gummy Worms>Gummy Worms<BR>

<INPUT TYPE=CHECKBOX NAME=M & M bits>M & M bits<BR>

<INPUT TYPE=CHECKBOX NAME=Candied Apple bits>Candied Apple bits<BR>

<INPUT TYPE=CHECKBOX NAME=Snickers bits>Snickers bits<BR>

<INPUT TYPE=CHECKBOX NAME=Reese Cup chunks>Reese Cup chunks</TD>

</TR>

Save your changes and view it in your Web browser. Notice that the form has lost its original state. No problem!! You just need to put in a page break here and there to return it to its original state. Locate the line that reads:

<TD VALIGN=TOP>Additional Items:(check all that you would include):</TD>

Insert two page breaks as follows:

<TD VALIGN=TOP>Additional Items:<BR>(check all that you<BR> would include):</TD>

Save these changes and again view it in you Web browser. Now doesn't that look a lot better!