Checkboxes, Radios, Selects, and Text Areas

Checkboxes

For yes/no choices, or picking any number of options:

<label><input type="checkbox" name="newsletter" value="yes" checked> Send me the newsletter</label>

<fieldset>
  <legend>Toppings</legend>
  <label><input type="checkbox" name="toppings" value="cheese"> Cheese</label>
  <label><input type="checkbox" name="toppings" value="olives"> Olives</label>
  <label><input type="checkbox" name="toppings" value="basil"> Basil</label>
</fieldset>

Only ticked boxes are submitted. If Cheese and Basil are ticked, the server receives toppings=cheese&toppings=basil. Without a value, a ticked box sends on.

Radio buttons

For choosing exactly one of several options. Radios with the same name form a group — selecting one deselects the others:

<fieldset>
  <legend>Delivery speed</legend>
  <label><input type="radio" name="delivery" value="standard" checked> Standard (3–5 days)</label>
  <label><input type="radio" name="delivery" value="express"> Express (next day)</label>
</fieldset>

fieldset groups related controls and legend is the group's label. A screen reader announces "Delivery speed, group" and then "Express (next day), radio button, 2 of 2". Always wrap radio groups and checkbox groups this way.

Select (drop-down lists)

<label for="country">Country</label>
<select id="country" name="country" autocomplete="country">
  <option value="">Choose a country</option>
  <optgroup label="Europe">
    <option value="DE">Germany</option>
    <option value="FR">France</option>
  </optgroup>
  <optgroup label="Asia">
    <option value="JP" selected>Japan</option>
    <option value="IN">India</option>
  </optgroup>
</select>

The value is submitted; the text is what people see.
selected pre-selects an option; optgroup groups options.
multiple lets people select several (hard to use — checkboxes are usually friendlier).
For fewer than about five options, radio buttons are easier: all choices are visible at once.

Suggestions with datalist

A text box with suggestions, where any value is still allowed:

<label for="browser">Favorite browser</label>
<input id="browser" name="browser" list="browsers">
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Safari"></option>
</datalist>

Text areas

For multi-line text:

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" cols="40" maxlength="1000">Default text goes between the tags.</textarea>

Unlike input, textarea has an end tag, and its default value is its content, not a value attribute. Whitespace inside it is kept, so don't indent the closing tag onto a new line unless you want those spaces.

Practice

Build a pizza order: a radio group for size (small/medium/large), a checkbox group for two extras, and a text area for delivery notes.

Show solution

<form action="/order" method="post">
  <fieldset>
    <legend>Size</legend>
    <label><input type="radio" name="size" value="s"> Small</label>
    <label><input type="radio" name="size" value="m" checked> Medium</label>
    <label><input type="radio" name="size" value="l"> Large</label>
  </fieldset>
  <fieldset>
    <legend>Extras</legend>
    <label><input type="checkbox" name="extras" value="garlic"> Garlic bread</label>
    <label><input type="checkbox" name="extras" value="dip"> Chili dip</label>
  </fieldset>
  <label for="notes">Delivery notes</label>
  <textarea id="notes" name="notes" rows="3"></textarea>
  <button>Order</button>
</form>