Select, Textarea, Checkboxes and Radio Buttons

Learn the select dropdown, textarea, checkboxes and radio buttons in HTML, how to group them with fieldset and legend, and how to suggest values with datalist.

How to make a dropdown with select and option

A <select> element creates a dropdown list. Each choice is an <option>. The value attribute is what gets sent to the server; the text between the tags is what the user sees.

Use <optgroup> with a label to group long lists into sections, like the sections of a restaurant menu.

<form action="/order" method="post">
  <p>
    <label for="drink">Choose a drink</label><br>
    <select id="drink" name="drink">
      <option value="">-- Please choose --</option>
      <optgroup label="Hot drinks">
        <option value="espresso">Espresso</option>
        <option value="latte" selected>Latte</option>
        <option value="tea">Green tea</option>
      </optgroup>
      <optgroup label="Cold drinks">
        <option value="lemonade">Lemonade</option>
        <option value="iced-coffee">Iced coffee</option>
      </optgroup>
    </select>
  </p>
  <p>
    <button type="submit">Order</button>
  </p>
</form>

You will see a dropdown that shows "Latte" first, because of the selected attribute. When you open it, the drinks are grouped under "Hot drinks" and "Cold drinks". If the user picks "Green tea", the server receives drink=tea.

The multiple attribute lets users choose several options, and size sets how many rows are visible. But multiple-select boxes are hard to use (users must hold Ctrl or Cmd), so a group of checkboxes is usually friendlier.

Textarea for longer text

<textarea> is a text box for several lines, like a message or a review. Unlike <input>, it has a closing tag. Any text between the tags becomes its starting value, so keep it empty unless you want default text.

• rows sets the visible height in lines.
• cols sets the visible width in characters (CSS usually controls width instead).
• maxlength limits how many characters can be typed.

<label for="review">Your review</label><br>
<textarea id="review" name="review" rows="5" maxlength="500"></textarea>

Common mistake: Putting spaces or a line break between <textarea> and </textarea>. These spaces become the default value, and the cursor starts in a strange place. Write the closing tag right after the opening one.

Grouping checkboxes and radio buttons with fieldset and legend

When you have a group of related options, wrap them in a <fieldset>. The <legend> is the title of the group. Screen readers read the legend before each option, so users hear "Delivery method: Express" instead of just "Express".

For radio buttons, every button in a group must have the same name but a different value. That is how the browser knows only one can be chosen. Think of the buttons on an old car radio: press one and the other pops out.

For checkboxes, users can tick any number. You can give them the same name too; the server then receives each ticked value. Add checked to tick an option by default.

<form action="/checkout" method="post">
  <fieldset>
    <legend>Delivery method</legend>
    <p>
      <input type="radio" id="standard" name="delivery" value="standard" checked>
      <label for="standard">Standard (3–5 days, free)</label>
    </p>
    <p>
      <input type="radio" id="express" name="delivery" value="express">
      <label for="express">Express (next day, £4.99)</label>
    </p>
    <p>
      <input type="radio" id="pickup" name="delivery" value="pickup">
      <label for="pickup">Collect from store</label>
    </p>
  </fieldset>

  <fieldset>
    <legend>Extras (choose any)</legend>
    <p>
      <input type="checkbox" id="gift-wrap" name="extras" value="gift-wrap">
      <label for="gift-wrap">Gift wrap</label>
    </p>
    <p>
      <input type="checkbox" id="card" name="extras" value="card">
      <label for="card">Greeting card</label>
    </p>
    <p>
      <input type="checkbox" id="newsletter" name="extras" value="newsletter">
      <label for="newsletter">Send me offers by email</label>
    </p>
  </fieldset>

  <p>
    <button type="submit">Continue to payment</button>
  </p>
</form>

You will see two boxes with a border and a title. In the first, you can choose only one delivery method, and "Standard" is selected at the start. In the second, you can tick zero, one or all extras.

Tip: Put the label after the checkbox or radio button, and the label before text boxes and dropdowns. This is the pattern most users expect.

Suggest values with datalist

A <datalist> gives a text input a list of suggestions, but users can still type anything they want. It is like autocomplete. Connect it with the input's list attribute, which must match the datalist's id.

<label for="city">City</label><br>
<input type="text" id="city" name="city" list="city-suggestions">
<datalist id="city-suggestions">
  <option value="London">
  <option value="Manchester">
  <option value="Edinburgh">
  <option value="Cardiff">
</datalist>

When you click or type in the field, the browser shows matching cities. Typing "Man" suggests "Manchester". If the user's city isn't in the list, they can still type it. Use <select> instead when users must choose from a fixed list.

Practice exercise

Build a pizza order form. Use a <select> for size (small, medium, large), a fieldset of radio buttons for crust (thin, classic, stuffed), a fieldset of checkboxes for toppings, and a <textarea> for delivery notes.

Hint: All crust radio buttons need the same name. Check it in the browser: you should only be able to select one crust.

Key takeaways

• <select> with <option> makes a dropdown; <optgroup> groups long lists.
• <textarea> is for multi-line text and has a closing tag.
• Radio buttons in one group share the same name; checkboxes allow many choices.
• Wrap related options in <fieldset> with a <legend> so everyone understands the group.
• <datalist> suggests values but still allows free typing.