Decirle a alguien qué salió mal en HTML

Un mensaje de error sin conexión con su campo es un mensaje que nadie escucha.

<div class="field">
  <label for="email">Email</label>
  <input type="email" id="email" name="email"
         aria-describedby="email-hint email-error"
         aria-invalid="true" required>
  <p id="email-hint" class="hint">We only use this for receipts.</p>
  <p id="email-error" class="error" role="alert">
    Enter an address with an @ in it.
  </p>
</div>

Cómo funciona

1. aria-describedby une el mensaje con el input que falló.
2. aria-invalid marca el campo mismo, y así se anuncia el estado.
3. Pon el mensaje junto al campo, no solo arriba del formulario.

El intento, en números

Líneas

10

Caracteres a escribir

329

Tokens

71

Ritmo de tres estrellas

75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 57 segundos.

Escribe este fragmento

Paso 3 de 5 en Validación y envío; paso 21 de 25 en Formularios y entradas.

← Anterior Siguiente →