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 opens. 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 get input on your website from potential customers. You want to know what they liked about the site. The check box property gives the flexibility to chose as many additional items as they wish. The items you will list are:

• Comparable Prices
• Convenience of Online Shopping
• Quality of Products
• Variety of Products
• Easy Navigation to Products Page
• Online Order Form is Easy to Use

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

<TR>

<TD VALIGN=TOP>What Did You Like About This Website:(check all that you would include):</TD>

<TD><INPUT TYPE=CHECKBOX NAME=Price>Comparable Prices<BR>

<INPUT TYPE=CHECKBOX NAME=Shopping>Convenience of Online Shopping<BR>

<INPUT TYPE=CHECKBOX NAME=Quality>Quality of Products<BR>

<INPUT TYPE=CHECKBOX NAME=Variety>Variety of Products<BR>

<INPUT TYPE=CHECKBOX NAME=Navigation>Easy Navigation to Products Page<BR>

<INPUT TYPE=CHECKBOX NAME=Order>Online Order Form is Easy to Use<BR>

</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>What Did You Like About This Website:(check all that you would include):</TD>

Insert page breaks using the <BR> tag so that your form will return to its original form.

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