Skip to main content

HTML Forms

Forms collect user input. Accessible forms connect every control to a visible label and provide instructions and errors that do not rely on placeholders or colour.

Basic form

<form action="register.php" method="post">
  <div class="form-group">
    <label for="username">Username</label>
    <p id="username-help">Use 3–50 letters, numbers or underscores.</p>
    <input id="username" name="username"
           autocomplete="username"
           aria-describedby="username-help"
           maxlength="50" required>
  </div>

  <div class="form-group">
    <label for="password">Password</label>
    <input id="password" name="password"
           type="password"
           autocomplete="new-password"
           required>
  </div>

  <button type="submit">Create account</button>
</form>

The label’s for value matches the input’s id. The name identifies the value submitted to PHP.

Useful input types

<input type="email" name="email">
<input type="number" name="capacity" min="1" max="100">
<input type="date" name="event_date">
<input type="file" name="dataset" accept=".csv,text/csv">

Input types and HTML constraints help users, but PHP must validate every submitted value again.

<fieldset>
  <legend>Preferred output</legend>
  <label><input type="radio" name="output" value="table"> Table</label>
  <label><input type="radio" name="output" value="chart"> Chart</label>
</fieldset>

Use fieldset and legend for a related group.

Error summary

<div role="alert">
  <p>Please correct the following:</p>
  <ul>
    <li>Capacity must be from 1 to 100.</li>
  </ul>
</div>

Preserve valid values after an error when safe, and never return passwords to the form.

GET or POST

Use GET for non-sensitive searches and filters that may be bookmarked. Use POST for registration, login, file upload and operations that change stored data.

Check

  • Every control has an associated label.
  • Instructions remain visible.
  • Appropriate input types and autocomplete values are used.
  • PHP repeats validation.
  • Errors are specific and accessible.
  • Forms contain only fictional data.
Back to top