Forms & Inputs

Forms collect data: logins, searches, checkouts, contact requests. This is where HTML shines as an interactive technology — and where accessibility and built-in validation save you (and your users) enormous effort.

Your first working form

<form action="/subscribe" method="post">
  <label for="email">E-mail address</label>
  <input type="email" id="email" name="email"
         placeholder="you@example.com" required autocomplete="email">

  <button type="submit">Subscribe</button>
</form>

Expected output: a label, a text box, and a Subscribe button. Submitting without an @ triggers the browser's own validation message — no JavaScript needed.

How a form submits

• action — the URL that receives the data.
• method — post for creating/sending data, get for searches and filters (data appears in the URL).
• name on every control — without a name, the field is not submitted. This is the #1 beginner bug.

Labels are non-negotiable

The <label> does two things: it shows the field's purpose, and clicking it focuses the input. Connect it with for = the input's id (not the name!):

<!-- Correct pairing -->
<label for="username">Username</label>
<input type="text" id="username" name="username">

<!-- Or implicit wrapping -->
<label>Username <input type="text" name="username"></label>

The input type gallery

type changes both the mobile keyboard and the built-in validation:

Radio groups and checkboxes

<fieldset>
  <legend>Choose a plan</legend>

  <input type="radio" id="free" name="plan" value="free" checked>
  <label for="free">Free — ₹0</label>

  <input type="radio" id="pro" name="plan" value="pro">
  <label for="pro">Pro — ₹499/mo</label>
</fieldset>

<input type="checkbox" id="terms" name="terms" required>
<label for="terms">I agree to the Terms of Service</label>

• <fieldset> + <legend> group related controls — screen readers announce the group name with each option.
• Radio buttons sharing the same name form one exclusive group.

Multi-line text and dropdowns

<label for="bio">Tell us about yourself</label>
<textarea id="bio" name="bio" rows="5" maxlength="500"></textarea>

<label for="country">Country</label>
<select id="country" name="country">
  <optgroup label="Asia">
    <option value="in" selected>India</option>
    <option value="np">Nepal</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="de">Germany</option>
  </optgroup>
</select>

Golden rule: always include an empty <option value="">Select…</option> (or use required) so users are not silently stuck with the first country.

Built-in validation attributes

<input type="text" name="username"
       minlength="3" maxlength="20" required>

<input type="number" name="age" min="13" max="120" step="1">

<input type="text" name="pincode" pattern="[0-9]{6}"
       title="Enter a 6-digit PIN code">

These produce free, native, localised error messages. JavaScript validation is for nicer UX — never the only line of defence. Server-side validation is mandatory regardless (client checks can always be bypassed).

Real-life example: a checkout form

<form action="/orders" method="post">
  <fieldset>
    <legend>Contact</legend>
    <label for="name">Full name</label>
    <input id="name" name="name" type="text" required autocomplete="name">

    <label for="phone">Phone</label>
    <input id="phone" name="phone" type="tel" required
           pattern="[0-9]{10}" title="10-digit mobile number" autocomplete="tel">
  </fieldset>

  <fieldset>
    <legend>Delivery</legend>
    <label for="address">Street address</label>
    <textarea id="address" name="address" rows="3" required autocomplete="street-address"></textarea>

    <label for="slot">Delivery slot</label>
    <select id="slot" name="slot" required>
      <option value="">Choose a slot</option>
      <option value="morning">Morning (8–11 AM)</option>
      <option value="evening">Evening (5–8 PM)</option>
    </select>
  </fieldset>

  <label><input type="checkbox" name="gift" value="1"> Add a gift wrap (+₹50)</label>
  <button type="submit">Place order</button>
</form>

Notice autocomplete hints (name, tel, street-address) — they let browsers autofill correctly, which measurably increases conversion on mobile.

Common mistakes

• id without matching label for (or labels with no input) — keyboard users cannot reach the field's description.
• Missing name — field data silently disappears on submit.
• Placeholder as label — placeholders vanish on typing, fail contrast checks, and are not reliably announced. Always keep a real label.
• Radio buttons without <fieldset> — options become hard to interpret out of context.
• Relying on type="number" for codes — PINs, OTPs, and phone numbers with leading zeros belong to type="text" with inputmode="numeric".

Best practices

• Ask for the minimum: every extra field costs conversions.
• Explain errors next to the field, and explain how to fix them.
• Use autocomplete attributes for identity/contact fields.
• Make buttons explicit: "Place order", not "Submit".
• Test the whole form with only the keyboard (Tab / Shift+Tab / Enter).

What's next?

Layout pages semantically with Semantic HTML5 Elements, embed clips with Multimedia, or review HTML Accessibility for form-specific a11y rules.