Radio buttons have a similar function to drop-down menus, in the sense that they allow one selection from a range of possible answers. Generally speaking radio buttons are used when the range of possible answers is limited to two (e.g. male or female, black or white, etc). Drop-down menus are used when the range of answers is greater than two.

Radio buttons are also unique in the sense that radio buttons that are part of the same question share the same name attribute. Indeed without this they will not act as radio buttons at all. As an <input> tag, they also have no closing tag and need to be closed with a / inside the tag itself for XHTML.

For example, let’s ask whether our customer is male or female:

1. <label for=“male” accesskey=“m”>Male</label>
2. <input type="radio" name="gender" value="male" id=“male” />
3. <label for=“female” accesskey=“f”>Female</label>
4. <input type="radio" name="gender" value="female" id=“female” />

Radio buttons need a value attribute, so that our script for form data (PHP, ASP, Perl, etc) knows which button has been selected. (Our script will receive gender = male or gender = female. They still need an id attribute so that we can make the form accessible and usable by JavaScript. By playing around with the radio buttons you should find that selecting one turns the other off (if they don’t, you have given them different name attribute values.)

It can also be useful to have one of these pre-selected: again, be aware you are making an assumption about your customer.

1. <label for=“male” accesskey=“m”>Male</label>
2. <input type="radio" name="gender" value="male" id=“male” checked=“checked” />
3. <label for=“female” accesskey=“f”>Female</label>
4. <input type="radio" name="gender" value="female" id=“female” />

Note that we are using label for each radio input. There is unfortunately no meta-label tag that we can use to wrap around a set of radio buttons. However, field set can be nested, so within your existing form and field set you could place the following:

1. <fieldset>
2. <legend>What is your gender?</legend>
3. <label for=“male” accesskey=“m”>Male</label>
4. <input type="radio" name="gender" value="male" id=male" checked=“checked” />
5. <label for=“female” accesskey=“f”>Female</label>
6. <input type="radio" name="gender" value="female" id=female" />
7. </fieldset>