Forms That Work

Forms connect people to an application. Native controls provide keyboard behavior, mobile input modes, validation, and accessibility semantics before any JavaScript is added.

Labels and controls

Pair every control with a visible label. Matching for and id values makes the label clickable and gives the control an accessible name.

01<form action="/subscribe" method="post">
02  <label for="email">Email address</label>
03  <input id="email" name="email" type="email" autocomplete="email" required />
04  <button type="submit">Join the list</button>
05</form>

The name becomes the submitted field name. Pick the most specific input type so devices can offer the right keyboard and browsers can validate the format.

Group related choices

01<fieldset>
02  <legend>Preferred study time</legend>
03  <label><input type="radio" name="study-time" value="morning" /> Morning</label>
04  <label><input type="radio" name="study-time" value="evening" /> Evening</label>
05</fieldset>

Use fieldset and legend when several controls answer one question. A button inside a form submits by default, so write type="button" for buttons with a different purpose.

Validation and feedback

HTML constraints such as required, minlength, min, and pattern improve the first line of validation. The server must still validate every submitted value.

01<label for="display-name">Display name</label>
02<input id="display-name" name="displayName" minlength="2" maxlength="40" aria-describedby="name-help" required />
03<p id="name-help">Use 2–40 characters.</p>

Keep this

Start with native controls, label everything, group related fields, choose accurate types, and validate again on the server.