Login | Contact Us | Site Map | Resources

HTML Forms

Home > HTML Tutorial > HTML Check Boxes & Radio Buttons

HTML Check Boxes & Radio Buttons

Check boxes allow multiple selections at a time and radio buttons allow only a single selection at a time, but both use the <input> tag to create each box or button.

HTML Check Boxes

Checkboxes are intended for choosing "Yes" or "No" in response to a question, or for allowing multiple selections in response to a choice given.

<form action="" method="post">
  <input type="checkbox" name="favorite1" value="chocolate" /> Chocolate
  <input type="checkbox" name="favorite2" value="vanilla" /> Vanilla
  <input type="checkbox" name="favorite3" value="mint" /> Mint
</form>

The result is:

Chocolate
Vanilla
Mint

Because more than one checkbox can be selected at a time, the name of each checkboxes must be unique so that each one can be identified separately. The values should also be unique in order to represent the value of each option.

HTML Radio Buttons

Radio buttons are intended for allowing a single selection among multiple options in response to a single choice given.

What has four legs one head but only one foot?
<form action="" method="post">
  <input type="radio" name="joke" value="bed" /> A Bed
  <input type="radio" name="joke" value="clock" /> A Clock
  <input type="radio" name="joke" value="snake" /> A Snake
</form>

The result is:

What has four legs one head but only one foot?
A Bed
A Clock
A Snake

The name of each group of radio buttons needs to be identical so that they can be identified as a group. The value of each radio button must be unique so that the selected value can be identified later.

Tip

If you want a checkbox or radio button to be checked by default, instead of all options being blank, you can add a single word (checked) to the end of the element.

<form action="" method="post">
  <input type="checkbox" name="tip1" value="1" checked /> Default Option
  <input type="checkbox" name="tip2" value="2" /> Other Option
  <input type="radio" name="tip3" value="3" checked /> Default Option
  <input type="radio" name="tip3" value="4" /> Other Option
</form>

The result is:

Default Option
Other Option
Default Option
Other Option