Creating Checkboxes

JavaScript Editor

Best javascript editor debugger Ajax website
↑

Main 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:

1.	If desired, type the introductory text (something like `Select one or more of the following`) for your checkboxes.
2.	Type `<input type="checkbox"`. (Notice there is no space in the word checkbox.)
3.	Type `name="boxset"`, where boxset both identifies the data sent to the script and also links the checkboxes together.
4.	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).
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.)
6.	Type `/>` to complete the checkbox.
7.	Type the text that identifies the checkbox to the user. This is often the same as the `value`, but doesn't have to be.
8.	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.

Tip

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.

JavaScript Editor

Best javascript editor debugger Ajax website
→