HTML Form Elements: Complete Reference

HTML Form Elements

HTML forms are the primary mechanism for collecting user input on the web. The <form> element contains interactive controls that allow users to submit data to a server or process it client-side.

Essential Form Elements

<form> — The container for all form controls:

<form action="/submit" method="post" novalidate>
  <!-- form controls here -->
</form>

<input> — The most versatile form element with 22+ types:

<input type="text" name="username" required>
<input type="email" name="email" placeholder="you@example.com">
<input type="password" name="pass" minlength="8">
<input type="number" name="age" min="0" max="150">
<input type="date" name="birthday">
<input type="file" name="avatar" accept="image/*">
<input type="checkbox" name="agree" value="yes">
<input type="radio" name="color" value="red">
<input type="range" name="volume" min="0" max="100">
<input type="color" name="theme">

<textarea> — Multi-line text input:

<textarea name="message" rows="4" cols="50" maxlength="500"></textarea>

<select> and <option> — Dropdown menus:

<select name="country">
  <optgroup label="Europe">
    <option value="de">Germany</option>
    <option value="fr">France</option>
  </optgroup>
</select>

Grouping and Labels

Always associate labels with form controls:

<fieldset>
  <legend>Contact Information</legend>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</fieldset>

Modern Form Elements

• <datalist> — Autocomplete suggestions for input fields
• <output> — Display calculation results
• <progress> — Show task completion
• <meter> — Display scalar measurements within a known range