Use radio buttons when you have a short set of mutually exclusive options, or options from which the visitor can select one and only one, as in Figure 68.9. Unlike with checkboxes, multiple options aren't allowed when you use radio buttons. Figure 68.9. Use radio buttons when you have a short set of mutually exclusive options.
Listing 68.9. View Source for Figure 68.9.<form> <table> <tr> <td>Select the newsletter you would like to receive:</td> </tr> <tr> <td><input type="radio" name="newsletter" value="news" checked> News</td> </tr> <tr> <td><input type="radio" name="newsletter" value="sports"> Sports</td> </tr> <tr> <td><input type="radio" name="newsletter" value="business"> Business</td> </tr> <tr> <td><input type="radio" name="newsletter" value="entertainment"> Entertainment</td> </tr> <tr> <td><input type="radio" name="newsletter" value="humor"> Humor</td> </tr> </table> </form> Notice the checked attribute in the input tag for the News radio button. This attribute preselects the option in question when the form loads. Normally, the names of the various widgets in your form are unique. Not so with groups of radio buttonsit's very important that all the radio buttons in the same group have the same name. Otherwise, the browser doesn't know which radio buttons belong to which group, and you don't get mutually exclusive options. The value attribute determines the data submitted for the checked radio button. So, if your visitor chooses to receive the Humor newsletter, the form submission looks something like this: newsletter=humor The browser doesn't submit the other, unchecked radio buttons. |