Text inputs are great, but sometimes you need users to choose from predefined options. HTML provides two elements for this: checkboxes (pick many) and radio buttons (pick one).

Checkboxes: Pick Multiple Options

Checkboxes let users select zero or more options:

<label>
  <input type="checkbox" name="skills" value="html"> HTML
</label>
<label>
  <input type="checkbox" name="skills" value="css"> CSS
</label>

When you wrap the <input> inside the <label>, you don't need for/id — the association is automatic.

Radio Buttons: Pick Exactly One

Radio buttons let users select exactly one option from a group. All radios in the same group must share the same name:

<label>
  <input type="radio" name="level" value="beginner"> Beginner
</label>
<label>
  <input type="radio" name="level" value="advanced"> Advanced
</label>

Key rule: same name = same group. The browser ensures only one can be selected at a time.

Checkbox vs Radio

Your Task

Create a form with: