×

html · level 2 · unit 2 · lesson 1

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

Radio buttons that share a name let you pick only one.

type="radio" makes a : a small circle to pick. It is named after the buttons on old car radios, where pressing one popped the others out.

Radio buttons with the same name form a , and only one in a group can be chosen. Each has its own value, which is what the server receives, such as size=large.

Each radio button still needs its own id and label. Add checked to one of them when there is a sensible choice to start with.

<form>
  <input type="radio" id="small" name="size" value="small">
  <label for="small">Small</label>
  <input type="radio" id="medium" name="size" value="medium" checked>
  <label for="medium">Medium</label>
  <input type="radio" id="large" name="size" value="large">
  <label for="large">Large</label>
</form>

Press show my page to see it here.

Like a checkbox, a radio button has its label after it, so the circle sits on the left.