HTML Forms

Building robust, accessible forms with validation

Form Elements

html

// Comprehensive Form
<form action="/api/register" method="POST" novalidate>
  <fieldset>
    <legend>Personal Info</legend>

    <label for="name">Full Name</label>
    <input type="text" id="name" name="name" required
           autocomplete="name" minlength="2" />

    <label for="email">Email</label>
    <input type="email" id="email" name="email" required
           autocomplete="email" placeholder="you@example.com" />

    <label for="phone">Phone</label>
    <input type="tel" id="phone" name="phone"
           pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
           placeholder="123-456-7890" />
  </fieldset>

  <fieldset>
    <legend>Preferences</legend>

    <label for="role">Role</label>
    <select id="role" name="role">
      <option value="">Select...</option>
      <option value="dev">Developer</option>
      <option value="design">Designer</option>
    </select>

    <label>
      <input type="checkbox" name="newsletter" />
      Subscribe to newsletter
    </label>

    <label for="bio">Bio</label>
    <textarea id="bio" name="bio" rows="4" maxlength="500"></textarea>

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

  <output name="result"></output>
  <button type="submit">Register</button>
  <button type="reset">Clear</button>
</form>

Form Element Reference

<form> — Container. action = URL, method = GET/POST
<input> — Text, email, password, number, date, file, checkbox, radio, range, color
<textarea> — Multi-line text input
<select> / <option> — Dropdown menu
<label> — Associates text with a form control (use for= attribute)
<button> — Submit, reset, or custom button
<fieldset> / <legend> — Groups related controls with a caption
<datalist> — Predefined options for autocomplete
<output> — Result of a calculation or user action

💬 Why is the label element important?

Labels are critical for accessibility: (1) Screen readers announce what each field is for, (2) Clicking a label focuses/toggles its associated control, (3) It provides a larger click target on mobile.