Patrones y mensajes propios en HTML

Una expresión regular sobre el campo, revisada antes de enviar nada.

<label for="sku">Product code</label>
<input type="text" id="sku" name="sku"
       pattern="[A-Z]{2}-[0-9]{3}"
       title="Two letters, a hyphen, three digits"
       placeholder="TS-001" required>

<label for="pin">PIN</label>
<input type="text" id="pin" name="pin" pattern="[0-9]{4}"
       inputmode="numeric" autocomplete="one-time-code"
       title="Four digits">

Cómo funciona

1. pattern debe coincidir con el valor completo; no hacen falta anclas.
2. title es lo que muestra el navegador cuando el patrón falla.
3. inputmode elige el teclado en pantalla sin cambiar la validación.

El intento, en números

Líneas

10

Caracteres a escribir

337

Tokens

68

Ritmo de tres estrellas

75 tpm

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

Escribe este fragmento

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

← Anterior Siguiente →