HTML forms that work for everyone

Most student project forms work for the developer and nobody else. These habits fix that, and none of them needs JavaScript.

Every input needs a label

<form action="/register" method="post">
  <label for="email">College email</label>
  <input id="email" name="email" type="email" autocomplete="email" required>
  <label for="year">Year of study</label>
  <select id="year" name="year" required>
    <option value="">Choose…</option>
    <option>1</option><option>2</option><option>3</option><option>4</option>
  </select>
  <fieldset>
    <legend>Preferred session</legend>
    <label><input type="radio" name="session" value="morning" required> Morning</label>
    <label><input type="radio" name="session" value="evening"> Evening</label>
  </fieldset>
  <button type="submit">Register</button>
</form>

• The for attribute of a label must match the id of its input. Clicking the label then focuses the input, and screen readers announce the label.
• A placeholder is not a label. It disappears as soon as you type.
• The name attribute is what the server receives; without it, the value is not sent at all.

Pick the right input type

• type="email", "tel", "number", "date", "url": phones show the right keyboard and browsers check the format.
• autocomplete values (email, name, tel, postal-code) let browsers fill the form for the user.
• Use number only for real quantities. A phone number or a roll number is text with a pattern, not a number to add up.

Built-in validation

• required, minlength, maxlength, min, max and pattern are checked before the form submits, with messages in the user's language.
• Always validate again on the server. Anyone can switch off the browser's checks.

Group related choices

Radio buttons and checkboxes that answer one question belong in a fieldset with a legend, as above. A screen reader then reads "Preferred session, Morning, radio button" instead of just "Morning".