HTML + CSSChamps

Code OTP à 6 chiffres

Six cases pour un code à usage unique qui passent seules à la suivante ; la case active pulse doucement.

Réglages

16px
1x

Code

<div class="uv-in2o"><input maxlength="1" inputmode="numeric"><input maxlength="1" inputmode="numeric"><input maxlength="1" inputmode="numeric"><input maxlength="1" inputmode="numeric"><input maxlength="1" inputmode="numeric"><input maxlength="1" inputmode="numeric"></div>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Plus dans Champs

Où l’utiliser

C’est l’écran qui suit « Nous vous avons envoyé un code » : la double authentification d’une application bancaire, la confirmation du numéro à l’inscription ou la vérification de l’e-mail avant de changer de mot de passe. Chaque case prend un chiffre, les lettres sont ignorées et la touche retour recule. Un champ OTP en HTML, CSS et un peu de JavaScript.

Coller un code complet depuis un SMS ne remplit que la première case dans cette version : ajoutez le collage si vos utilisateurs copient souvent leurs codes. Sur mobile, le pavé numérique s’ouvre tout seul.