HTML Form Controls

Build complete forms with labels, dropdown lists, multi-line text boxes, grouped radio buttons and checkboxes, suggestion lists and output fields.

Lesson 20 of 44Intermediate15 min read

A text box and a submit button are enough for a search form, but most real forms need more: a dropdown to choose a country, a large box to write a message, radio buttons to pick a delivery option, and checkboxes to choose extras. HTML provides a form control for each of these jobs, and they all work without any JavaScript.

Every control needs a label. The <label> element connects visible text to its field, so clicking the text focuses the field and screen readers announce what each field is for. Related controls, such as a set of radio buttons, belong in a <fieldset> with a <legend> that describes the group.

In this lesson you'll build forms with <select> and <option>, <textarea>, checkboxes and radio buttons, <fieldset>, <datalist> for typing suggestions and <output> for showing a result. Together with the input types lesson and the validation lesson, this gives you everything needed for sign-in, contact, checkout and survey forms.

Labels

HTML
<label for="email">Email address</label>
<input id="email" name="email" type="email">

<label>Phone <input name="phone" type="tel"></label>
  • The for attribute matches the field's id. Alternatively, put the field inside the label.
  • The name attribute is the key used when the form is sent: email=ada@example.com.
  • Placeholder text is not a replacement for a label: it disappears when you type and is often low contrast.

Dropdowns, text areas and suggestions

ElementUse forKey attributes
<select> with <option>Choosing from a fixed listvalue, selected, multiple, size
<optgroup label="...">Grouping long option listslabel
<textarea>Multi-line text such as messagesrows, cols, maxlength
<datalist>Suggestions while typing in an inputlinked with the input's list attribute
<output>Showing a calculated resultfor, name

An <option>'s value is what gets sent; the text between the tags is what the user sees. A <datalist> suggests values but still lets users type anything else.

Radio buttons, checkboxes and fieldsets

  • Radio buttons (type="radio") let users pick one option. Buttons in the same group share the same name.
  • Checkboxes (type="checkbox") allow any number of choices, including none.
  • Add checked to pre-select a choice.
  • Wrap each group in a <fieldset>, with a <legend> as its first child: the legend is read out together with each option, so screen-reader users hear "Delivery, Standard" instead of just "Standard".

HTML Form Controls Syntax

Form control syntax

<label for="size">Size</label>
<select id="size" name="size">
  <option value="s">Small</option>
  <option value="m" selected>Medium</option>
</select>
<label for="msg">Message</label>
<textarea id="msg" name="message" rows="4"></textarea>
<fieldset>
  <legend>Delivery</legend>
  <label><input type="radio" name="delivery" value="std" checked> Standard</label>
  <label><input type="radio" name="delivery" value="exp"> Express</label>
</fieldset>
<label><input type="checkbox" name="gift"> Gift wrap</label>
<input list="cities" name="city"><datalist id="cities"><option value="Leeds"></datalist>

HTML Form Controls Summary

  • Every field needs a <label>, linked with for and id or by nesting.
  • <select> and <option> make dropdowns; <optgroup> groups options.
  • <textarea> holds multi-line text; <datalist> suggests values while typing.
  • Radio buttons share a name and allow one choice; checkboxes allow many.
  • Group related controls in <fieldset> with a <legend>.

HTML Form Controls Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

A contact form

<form>
  <p>
    <label for="name">Your name</label><br>
    <input id="name" name="name" autocomplete="name">
  </p>
  <p>
    <label for="topic">Topic</label><br>
    <select id="topic" name="topic">
      <option value="">Choose a topic</option>
      <option value="order">My order</option>
      <option value="returns">Returns</option>
      <option value="other">Something else</option>
    </select>
  </p>
  <p>
    <label for="message">Message</label><br>
    <textarea id="message" name="message" rows="4" cols="36" maxlength="500"></textarea>
  </p>
  <button type="submit">Send</button>
</form>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 3 to 4for and id link the label to the input.
  2. Lines 8 to 13A dropdown; the first option is a prompt with an empty value.
  3. Line 17rows sets the visible height and maxlength limits the message to 500 characters.
Example 2

Delivery options with fieldsets

<form>
  <fieldset>
    <legend>Delivery speed</legend>
    <label><input type="radio" name="delivery" value="standard" checked> Standard (3 to 5 days)</label><br>
    <label><input type="radio" name="delivery" value="express"> Express (next day)</label>
  </fieldset>
  <fieldset>
    <legend>Extras</legend>
    <label><input type="checkbox" name="extras" value="gift"> Gift wrap</label><br>
    <label><input type="checkbox" name="extras" value="card"> Add a card</label>
  </fieldset>
</form>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 2 to 3The fieldset draws a box around the group, and the legend names it.
  2. Lines 4 to 5Both radio buttons share name="delivery", so only one can be chosen.
  3. Line 4checked selects Standard by default.
  4. Lines 9 to 10Checkboxes allow none, one or both extras.
Example 3

Suggestions and a live result

<form oninput="total.value = Number(qty.value) * 4.5">
  <label for="city">City</label>
  <input id="city" name="city" list="city-list">
  <datalist id="city-list">
    <option value="Leeds">
    <option value="London">
    <option value="Manchester">
  </datalist>
  <p>
    <label for="qty">Mugs at £4.50</label>
    <input id="qty" name="qty" type="number" value="2" min="1">
    = £<output name="total" for="qty">9</output>
  </p>
</form>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 3list connects the input to the datalist, so suggestions appear while typing.
  2. Lines 4 to 8Users can pick a suggestion or type a different city.
  3. Line 1When any field changes, a short script updates the output.
  4. Line 12<output> displays the calculated total.

Common HTML Form Controls Mistakes

Placeholder instead of a label

Don't
<input name="email" placeholder="Email">
Do
<label for="email">Email</label>
<input id="email" name="email" placeholder="you@example.com">

The placeholder vanishes as you type, leaving no label at all.

Radio buttons with different names

Don't
<input type="radio" name="size-s" value="s"> Small
<input type="radio" name="size-m" value="m"> Medium
Do
<input type="radio" name="size" value="s"> Small
<input type="radio" name="size" value="m"> Medium

With different names, both can be selected at once.

Text in the value attribute of textarea

Don't
<textarea name="bio" value="Tell us about yourself"></textarea>
Do
<textarea name="bio">Tell us about yourself</textarea>

A textarea's starting text goes between its tags; it has no value attribute.

HTML Form Controls in Real Projects

Forms in real products

Checkout pages use selects for country and card expiry, radio buttons for delivery speed and checkboxes for marketing consent. Support pages use textareas for messages, and search boxes on travel sites use datalist-style suggestions. Accessible, well-labelled forms are also a legal requirement for many public-sector and e-commerce sites.

HTML Form Controls Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Link the label to the input.

<label ="city">City</label>
<input id="" name="city">
Multiple choiceeasy

Which element creates a multi-line text box?

Multiple choicemedium

What makes several radio buttons work as one group?

Multiple choicemedium

What is a legend used for?

Fix the bugmedium

Fix the form: the labels aren't linked to their fields, and the two size options can both be selected.

<form>
  <label>Email</label>
  <input id="email" name="email">
  <input type="radio" name="small" value="s"> Small
  <input type="radio" name="medium" value="m"> Medium
</form>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The email label points to the input
  • Both radios share one name
  • Each radio is inside a label

HTML Form Controls Quiz

5 questions to check what you learned.

  1. Which element creates a dropdown list?

    • dropdown
    • list
    • select
    • option alone

  2. What is sent to the server for a selected option?

    • Its value attribute (or its text if there's no value)
    • The visible text always
    • Its index
    • Nothing

  3. How do checkboxes differ from radio buttons?

    • Checkboxes allow one choice
    • They're identical
    • Radio buttons can't be pre-selected
    • Checkboxes allow several choices; radio buttons allow one per group

  4. What does a datalist provide?

    • Suggestions while typing, without restricting the value
    • A fixed list users must choose from
    • A table of data
    • Validation messages

  5. Why shouldn't a placeholder replace a label?

    • Placeholders aren't valid HTML
    • Placeholders are sent with the form
    • It disappears when typing and is often hard to read, leaving the field unlabelled
    • Screen readers ignore labels

HTML Form Controls Challenge

A pizza order form

Build a form with:

  1. A <select name="size"> with at least three options and a linked <label>
  2. A <fieldset> with a <legend> and two radio buttons sharing name="crust"
  3. A <textarea name="notes"> with a linked label
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • A size select with 3+ options and a label
  • A fieldset with a legend
  • Two radios named crust
  • A labelled notes textarea

Related HTML topics

19FormsCollect information from visitors with accessible, well-labelled forms.21Input TypesThe right input type gives better phone keyboards, pickers and built-in checks.22Form ValidationCheck user input before it's sent with built-in validation attributes such as required, minlength, pattern, min and max, style valid and invalid fields, and use form attributes like action, method and autocomplete.
Esc
↑↓ to navigateEnter to open