HTML Form Elements Explained

HTML gives you a surprisingly small toolbox for building forms — about a dozen elements. Learn what each one is for and you can build almost any form on the web, from a one-field search box to a multi-page application.

This guide walks through every form element, what it does, and when to reach for it.

1. <form> — the container

The <form> element wraps all your fields and defines what happens on submit.

<form action="https://api.formclick.io/submit" method="POST">
  …
</form>

Its key attributes are action (where data is sent), method (GET or POST) and enctype (set to multipart/form-data for file uploads). See HTML Form Attributes Explained for the full list.

2. <label> — the field's name

A label describes a field. Linking it with for/id means clicking the text focuses the field, and screen readers announce it.

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

<!-- Or wrap the input — no for/id needed -->
<label>
  <input type="checkbox" name="terms" required>
  I agree to the terms
</label>

Every visible field should have a label. Placeholders are hints, not labels.

3. <input> — the workhorse

One element, more than twenty behaviours, controlled by the type attribute: text, email, password, number, tel, url, date, checkbox, radio, file, range, color, hidden and more.

<input type="text"     name="city">
<input type="email"    name="email">
<input type="date"     name="start_date">
<input type="checkbox" name="newsletter" value="yes">
<input type="hidden"   name="source" value="pricing-page">

Input is a void element — it has no closing tag. Every type is covered in our HTML Input Types: Complete Guide.

4. <textarea> — long text

For messages, comments and anything longer than a line. Unlike <input>, its default value goes between the tags.

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" maxlength="1000"
          placeholder="Tell us a little about your project"></textarea>

Use rows to set the starting height. In CSS, resize: vertical stops people dragging it wider than your layout.

5. <select>, <option> and <optgroup> — dropdowns

<label for="country">Country</label>
<select id="country" name="country" required>
  <option value="">Select a country…</option>
  <optgroup label="Europe">
    <option value="de">Germany</option>
    <option value="fr">France</option>
  </optgroup>
  <optgroup label="Asia">
    <option value="in">India</option>
    <option value="jp">Japan</option>
  </optgroup>
</select>

• The value is what's submitted; the text is what people see.
• An empty first option plus required forces a real choice.
• Add multiple to allow several selections (though checkboxes are usually friendlier).
• With fewer than about five options, radio buttons are faster to use than a dropdown.

6. <button> — actions

<button type="submit">Create account</button>
<button type="reset">Clear form</button>
<button type="button" onclick="addRow()">Add another</button>

Always set type. A button inside a form defaults to submit, so a "Show password" button without type="button" will accidentally submit your form. Prefer <button> over <input type="submit"> — it can contain icons and other HTML.

7. <fieldset> and <legend> — grouping

Group related controls under a caption. This is essential for radio buttons and checkboxes, because the legend gives the group its question.

<fieldset>
  <legend>Preferred contact method</legend>
  <label><input type="radio" name="contact_by" value="email" checked> Email</label>
  <label><input type="radio" name="contact_by" value="phone"> Phone</label>
  <label><input type="radio" name="contact_by" value="sms"> SMS</label>
</fieldset>

A neat bonus: <fieldset disabled> disables every control inside it at once.

8. <datalist> — suggestions

Gives a text input a list of suggestions while still allowing free typing — a lightweight autocomplete with zero JavaScript.

<label for="framework">Framework</label>
<input id="framework" name="framework" list="frameworks">
<datalist id="frameworks">
  <option value="React">
  <option value="Vue">
  <option value="Svelte">
  <option value="Angular">
</datalist>

9. <output> — calculated results

Displays the result of a calculation or user action, and is announced by screen readers when it changes.

<label for="qty">Seats</label>
<input type="range" id="qty" name="qty" min="1" max="50" value="5"
       oninput="seats.value = qty.value">
<output id="seats" for="qty">5</output> seats

10. <progress> and <meter> — indicators

Not inputs, but handy in forms. <progress> shows how far through a task someone is (perfect for multi-step forms); <meter> shows a value within a known range, like password strength.

<progress value="2" max="4">Step 2 of 4</progress>

<meter min="0" max="100" low="40" high="75" optimum="100" value="60">60%</meter>

Putting it all together

<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <label for="name">Name</label>
  <input id="name" name="name" required>

  <label for="team">Team size</label>
  <select id="team" name="team_size">
    <option>1–10</option>
    <option>11–50</option>
    <option>51+</option>
  </select>

  <fieldset>
    <legend>Interested in</legend>
    <label><input type="checkbox" name="interest" value="forms"> Forms</label>
    <label><input type="checkbox" name="interest" value="integrations"> Integrations</label>
  </fieldset>

  <label for="notes">Anything else?</label>
  <textarea id="notes" name="notes" rows="4"></textarea>

  <button type="submit">Request a demo</button>
</form>

Quick reference

Element	Use it for
form	Wrapping fields and defining submission
label	Naming every field
input	Single values of almost any type
textarea	Multi-line text
select / option	Choosing from a longer list
button	Submitting and other actions
fieldset / legend	Grouping related fields
datalist	Suggestions for a text input
output	Live calculated values
progress / meter	Progress and gauges

Next, learn which type to choose for each field in HTML Input Types: Complete Guide.