Building Forms

Forms are how HTML collects input from a visitor: search boxes, login screens, checkout pages.

A basic form

<form action="/submit" method="POST">
  <label for="username">Username</label>
  <input type="text" id="username" name="username" required />

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

  <label for="plan">Plan</label>
  <select id="plan" name="plan">
    <option value="free">Free</option>
    <option value="pro">Pro</option>
  </select>

  <button type="submit">Sign Up</button>
</form>

• action is the URL the data is sent to; method is usually GET (data in the URL, for searches/filters) or POST (data in the request body, for anything that changes data).
• Every <input> needs a matching <label>, connected by for on the label and id on the input. This isn't cosmetic, screen reader users rely on it, and it lets sighted users click the label text to focus the field.

Input types matter

<input type="text" />
<input type="email" />
<input type="password" />
<input type="number" min="0" max="100" />
<input type="checkbox" />
<input type="radio" name="tier" value="free" />
<input type="date" />

Each type changes both the on-screen keyboard/widget shown (especially on mobile) and what the browser validates automatically, type="email" alone gives you free client-side validation for a well-formed address.