HTML Form Radio Button

HTML radio buttons can be use to offer your visitors the choice of several options, but only allow them to choose one option, unlike checkboxes which allow them to choose multiple options. A great example of where this might be useful is if you have a form asking people to rate your website. Obviously they shouldn't be rating it Great and Awful at the same time, so you can use radio buttons to restrict them to just one option.

When using radio buttons in your web pages, you need to make it clear which buttons belong to the same group, so that the browser knows how to restrict the user to just one choice. You do this by giving them all the same name attribute. Try out the example below showing two sets of buttons. You can only choose one answer from each set of buttons, and the sets are defined by giving all the buttons within the set the same name:

<form>

What is your sex?
<br />
<input type="radio" name="sex" value="male" />Male
<br />
<input type="radio" name="sex" value="female" />Female
<br /><br />

What is your age group?
<br />
<input type="radio" name="age" value="under18" />Under 18
<br />
<input type="radio" name="age" value="19to30" />19 to 30
<br />
<input type="radio" name="age" value="31to50" />31 to 50
<br />
<input type="radio" name="age" value="over50" />Over 50
<br />

</form>

This HTML will generate the following form. Have a play around with it to get a better idea of how radio buttons work.

What is your sex?
Male
Female

What is your age group?
Under 18
19 to 30
31 to 50
Over 50