Not every form field is meant for typing - often the visitor should pick from predefined options. There are three important tools for that.

checkbox: selecting one or more options

A checkbox can be checked and unchecked independently of other checkboxes - so you can select several at once:

<input type="checkbox" name="newsletter" id="newsletter">
<label for="newsletter">I'd like to receive the newsletter</label>

A new element shows up here: <label>. Its for attribute must exactly match the id of the corresponding input field. The big benefit: once this connection exists, you can also click the label's text to check or uncheck the checkbox - not just the small box itself. This is especially helpful on phones, where small boxes are hard to hit.

radio: exactly one option out of several

A radio button (named after the tuning dials on old radios) only allows one selection out of several options. For the browser to know which radio buttons belong together, they all need the same name:

<input type="radio" name="position" id="striker" value="striker">
<label for="striker">Striker</label>

<input type="radio" name="position" id="defender" value="defender">
<label for="defender">Defender</label>

<input type="radio" name="position" id="goalkeeper" value="goalkeeper">
<label for="goalkeeper">Goalkeeper</label>

Try this out in your browser: when you click one option, any previously selected option in the same group (i.e. with the same name) automatically gets deselected.

select: a dropdown list

<select> shows a space-saving dropdown list. Each option in it is its own <option> element:

<label for="favourite-club">My favourite club:</label>
<select name="favourite-club" id="favourite-club">
  <option value="club-a">Club A</option>
  <option value="club-b">Club B</option>
  <option value="club-c">Club C</option>
</select>

Here too, <label for="..."> works exactly like with checkboxes and radio buttons.

value vs. visible text: an important difference

With <option> (and also with radio buttons) there's an important difference: value="club-a" is the value that actually gets submitted (usually technical, without spaces/accents), while the text between <option> and </option> ("Club A") is what the visitor actually sees. The two can be different, but don't have to be.

Checkboxes for Finn's hobbies

Extend the contact form with a small survey:

<h2>Small Survey</h2>
<form>
  <p>
    <label for="favourite-club">My favourite club:</label><br>
    <select name="favourite-club" id="favourite-club">
      <option value="club-a">Club A</option>
      <option value="club-b">Club B</option>
    </select>
  </p>

  <p>
    <input type="checkbox" name="newsletter" id="newsletter">
    <label for="newsletter">I'd like to receive the newsletter</label>
  </p>
</form>