Choosing inputs (checkboxes, radio buttons, select)

So far, the input boxes have been about “typing text in.” But forms have another shape too: inputs where you pick from ready-made options. Think of a survey that says “Choose the ones that apply” — let’s learn how to build that.

Pick as many as you like: checkboxes

type="checkbox" is a square box that lets you pick as many of the matching options as you want.

<label><input type="checkbox"> Apple</label>
<label><input type="checkbox"> Orange</label>
<label><input type="checkbox"> Grape</label>

Wrapping it in a <label> makes it so that clicking the text also ticks the box (that’s the label effect you learned earlier).

Pick just one: radio buttons

type="radio" is a round button for picking just one from a set of options. Use it for mutually exclusive choices, like “Yes / No.”

<label><input type="radio" name="plan"> Free plan</label>
<label><input type="radio" name="plan"> Paid plan</label>

Choose from a dropdown: select

When there are lots of options, a <select> dropdown keeps things tidy. You line up <option> (the choices) inside it.

<select>
  <option>Tokyo</option>
  <option>Osaka</option>
  <option>Fukuoka</option>
</select>

The <select> is the box, and each <option> is a single choice. When you click it, the list pops open.

Choosing something in advance (checked, selected)

You can also have something already selected the moment the page opens. For checkboxes and radio buttons, just add checked; for a select, add selected to the <option> you want chosen.

<label><input type="checkbox" checked> Apple</label>

<label><input type="radio" name="plan" checked> Free plan</label>
<label><input type="radio" name="plan"> Paid plan</label>

<select>
  <option>Tokyo</option>
  <option selected>Osaka</option>
  <option>Fukuoka</option>
</select>

You use this for things like “pre-select the most commonly chosen item” or “set a default answer for a survey.”

Give it a try

Here are all three kinds, laid out for real. Try selecting them yourself.

Summary of this lesson

1. Checkboxes (type="checkbox") let you pick several
2. Radio buttons (type="radio") let you pick just one — give siblings the same name
3. Select (<select> and <option>) lets you choose from a dropdown

Typing inputs and choosing inputs — you’ve got all the parts now.