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.
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:
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.
Radio buttons are intended to allow 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:
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.
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: