Il campo OTP sembra una fila di caselle, ma sotto c’è un unico <input> nativo. Compilazione automatica da SMS (autocomplete="one-time-code"), incolla, password manager, moduli e screen reader vedono tutti un normale campo di testo.
I codici incollati vengono ripuliti, così «123-456» e «123 456» funzionano entrambi, e i caratteri che il pattern non consente vengono rifiutati. Su Android, webOtp compila il codice dall’SMS appena arriva.
Verifica
(completed) scatta quando si riempie l’ultima casella. Imposta aria-invalid sull’input per rifiutare un codice: le caselle diventano rosse e vibrano.
Try 123456, or anything else.
Lettere, gruppi e mascheratura
pattern="alphanumeric" accetta anche le lettere, [groups] aggiunge i separatori e masked disegna dei puntini.