Working with Checkboxes
| Checkboxes are ideal for relatively short sets of options where the visitor can select one, none, all, or as many as desired, as in Figure 68.2. Don't use checkboxes for either/or situations, where the visitor needs to choose one and only one optionradio buttons work better for those. Listing 68.2. View Source for Figure 68.2.<form> <table> <tr> <td>Select the newsletters you would like to receive:</td> </tr> <tr> <td><input type="checkbox" name="newsCheck" value="yes"> News</td> </tr> <tr> <td><input type="checkbox" name="sportsCheck" value="yes"> Sports</td> </tr> <tr> <td><input type="checkbox" name="businessCheck" value="yes"> Business</td> </tr> <tr> <td><input type="checkbox" name="entertainmentCheck" value="yes"> Entertainment</td> </tr> <tr> <td><input type="checkbox" name="humorCheck" value="yes"> Humor</td> </tr> </table> </form> Figure 68.2. Use checkboxes when you have a short set of options where the visitor can select as many as needed (even none).
As with generic buttons, the name attribute of a checkbox's input tag supplies the name of that particular checkbox. The value attribute gives the data that the form submits if the visitor checks the checkbox in question. So, if the visitor happens to check the news, sports, and business checkboxes, the form sends the following data to the Web server upon submission: newsCheck=yes sportsCheck=yes businessCheck=yes The values don't have to be the same for every checkbox, as they are in Figure 68.1. You can supply different values for each checkbox if you like. It all depends on what you want to send to the Web server.
To preselect a checkbox when the form loads, add the checked attribute to the checkbox's input tag: <input type="checkbox" name="news" value="yes" checked> As you can see, the checked attribute doesn't get a value. |
