checkout_form.html in HTML

A checkout: grouped fields, the right autocomplete tokens, and errors tied to the inputs.

<form action="/checkout" method="post" class="checkout">
  <h1>Checkout</h1>

  <fieldset>
    <legend>Contact</legend>

    <div class="field">
      <label for="email">Email</label>
      <input type="email" id="email" name="email" required
             autocomplete="email" aria-describedby="email-hint">
      <p id="email-hint" class="hint">The receipt goes here.</p>
    </div>

    <div class="field">
      <label for="phone">Phone (optional)</label>
      <input type="tel" id="phone" name="phone" autocomplete="tel"
             inputmode="tel">
    </div>
  </fieldset>

  <fieldset>
    <legend>Delivery address</legend>

    <div class="field">
      <label for="name">Full name</label>
      <input type="text" id="name" name="name" required
             autocomplete="name">
    </div>

    <div class="field">
      <label for="line1">Address</label>
      <input type="text" id="line1" name="line1" required
             autocomplete="address-line1" aria-invalid="true"
             aria-describedby="line1-error">
      <p id="line1-error" class="error" role="alert">
        Enter a street and a number.
      </p>
    </div>

    <div class="field">
      <label for="city">City</label>
      <input type="text" id="city" name="city" required
             autocomplete="address-level2">
    </div>

    <div class="field">
      <label for="postcode">Postcode</label>
      <input type="text" id="postcode" name="postcode" required
             autocomplete="postal-code" inputmode="numeric"
             pattern="[0-9]{5}" title="Five digits">
    </div>

    <div class="field">
      <label for="country">Country</label>
      <select id="country" name="country" autocomplete="country">
        <option value="GB">United Kingdom</option>
        <option value="US" selected>United States</option>
      </select>
    </div>
  </fieldset>

  <fieldset>
    <legend>Delivery speed</legend>
    <label><input type="radio" name="speed" value="standard" checked>
      Standard, 3 days</label>
    <label><input type="radio" name="speed" value="express">
      Express, tomorrow</label>
  </fieldset>

  <label>
    <input type="checkbox" name="terms" value="yes" required>
    I have read the <a href="/terms">terms</a>
  </label>

  <footer class="actions">
    <button type="submit">Pay now</button>
    <button type="submit" formaction="/basket" formnovalidate>
      Back to basket
    </button>
  </footer>
</form>

How it works

1. Each fieldset is one idea, with a legend that names it.
2. The autocomplete tokens are what let a browser fill the whole thing.
3. The error text is connected with aria-describedby, not just placed nearby.

The run, in numbers

Lines

81

Characters to type

2066

Tokens

511

Three-star pace

80 tpm

At the three-star pace of 80 tokens a minute, this run takes about 383 seconds.

Type this snippet

Step 2 of 2 in Encore, step 25 of 25 in Forms & inputs.

← Previous