Checkboxes and Radio Buttons

Checkboxes represent choices that can be selected independently. Radio buttons represent one selection from a group of mutually exclusive options.

<fieldset>
  <legend>Topics you want to follow</legend>
  <label><input type="checkbox" name="topics" value="html"> HTML</label>
  <label><input type="checkbox" name="topics" value="css"> CSS</label>
  <label><input type="checkbox" name="topics" value="javascript"> JavaScript</label>
</fieldset>

<fieldset>
  <legend>Preferred contact method</legend>
  <label><input type="radio" name="contact" value="email"> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>

Checkboxes in a group can share a name when the server should receive multiple selected values. Radio buttons in the same named group allow only one selection.

fieldset groups related controls, and legend gives the group a label. This is particularly helpful for radio groups because the question applies to all options. Do not use radio buttons when visitors may select several answers, or checkboxes when exactly one answer is required.