JavaScript EditorBest javascript editor debugger     Ajax website 

Main Page

Previous Page
Next Page

Creating Checkboxes

While radio buttons can accept only one answer per set, a visitor can check as many checkboxes in a set as they like. Like radio buttons, checkboxes are linked by the value of the name attribute.

Figure 17.31. Notice how the label text (not highlighted) does not need to match the value attribute. That's because the label text identifies the checkboxes to the visitor in the browser while the value identifies the data to the script. The empty brackets are for PHP (see tip).

To create checkboxes:

If desired, type the introductory text (something like Select one or more of the following) for your checkboxes.

Type <input type="checkbox". (Notice there is no space in the word checkbox.)

Type name="boxset", where boxset both identifies the data sent to the script and also links the checkboxes together.

Type value="data", where data is the text that will be sent to the server if the checkbox is marked (either by the visitor, or by you as described in step 5).

Type checked="checked" to make the checkbox checked by default when the page is opened. You (or the visitor) may check as many checkboxes as desired. (The ="checked" is optional in HTML.)

Type /> to complete the checkbox.

Type the text that identifies the checkbox to the user. This is often the same as the value, but doesn't have to be.

Repeat steps 27 for each checkbox in the set.

Figure 17.32. The CSS is very similar to what we used for the radio buttons: give the first check-box and any checkbox that follows a br element a 9 em margin. Remaining check-boxes get only 1 em.

Figure 17.33. The visitor can check as many boxes as necessary. Each corresponding value will be sent to the script, together with the checkbox set's name.


  • If you use PHP, you can automatically create an array (called $_POST['boxset']) out of the checkbox values by using name="boxset[ ]" in step 3, where boxset identifies the data sent to the script.

Previous Page
Next Page

JavaScript EditorBest javascript editor debugger     Ajax website