checkout_form.html en HTML

Un checkout: campos agrupados, los tokens de autocomplete correctos y errores unidos a sus 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>

Cómo funciona

1. Cada fieldset es una sola idea, con un legend que la nombra.
2. Los tokens de autocomplete son lo que deja al navegador llenar todo.
3. El texto de error se conecta con aria-describedby, no solo se pone cerca.

El intento, en números

Líneas

81

Caracteres a escribir

2066

Tokens

511

Ritmo de tres estrellas

80 tpm

Al ritmo de tres estrellas de 80 tokens por minuto, este intento toma unos 383 segundos.

Escribe este fragmento

Paso 2 de 2 en Bis; paso 25 de 25 en Formularios y entradas.

← Anterior