This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

Adobe Dreamweaver CS3

Forms: Working with Check Boxes

Check boxes are a useful tool for allowing a user to select one or more options from a list. Instead of having a user select the most appropriate option, check boxes allow the user to select all options that apply. In order to use a check box form field, two processes must be completed: inserting the check box form field into a form and assigning the form field a name-value pair.

NOTE: For more information about working with form fields, please refer to Inserting the First Form Field, Opening the Form Field Properties Dialog Box, and Terminology.

return to topInserting Check Boxes

  1. Place the insertion point within the form boundary where you would like to insert the form field
    NOTE: For information on inserting a form boundary, refer to Creating Forms.

  1. From the Insert menu, select Form » Checkbox
    On the Forms bar, click CHECKBOXCheckbox button
    The Input Tag Accessibility Attributes dialog box appears.
    For a description of the options in this dialog box, refer to Forms: Input Tag Accessibility Options.
    Input Tag Accessibility Attributes dialog box

  2. In the Label text box, type an appropriate label
    HINT: The Label is the text that identifies a check box option to users.

  3. Make any appropriate selection(s) under Style, Position, Access key, and Tab Index

  4. Click OK
    A check box appears.

return to topAssigning the Name-Value Pair

The name should identify what option the check box represented for the user (e.g., the location check box below is an option to answer "location" in response to the question and is named "location"). In a group of check boxes, users can select more than one.

The value of a check box is not visible to the user. The value should indicate whether the option was selected (e.g., a group of check boxes that are all answers to the same question about liking UW-Eau Claire may all have the value "like").
Example of check box use with name/value pair

When a user submits the form, the name of the check box will be matched with the value of the check box. The information the form developer receives may look like this:

name: value
EXAMPLE: Location: like
EXAMPLE: Majors: like

The name identifies the option, and the value indicates whether it was selected.

To assign the name-value pair

  1. After inserting the check box, select it
    The CheckBox Properties pane appears.

  1. In the Checkbox Properties pane, in the Checkbox name text box, type the name for the check box
    Checkbox properties

  2. In the Checked value text box, type the value for the check box

  3. For Initial state, select Checked or Unchecked
    If Unchecked is selected, the check box will appear unchecked when the page loads.

Excellence. Our Measure. Our Motto. Our Goal.