Numéro de carte avec aperçu
Pendant la saisie, la carte au-dessus affiche le numéro, regroupe les chiffres par quatre et détecte la marque.
Réglages
Code
<div class="uv-icd"><div class="cd" aria-hidden="true"><span class="ch"></span><span class="br">Carte</span><span class="nb">•••• •••• •••• ••••</span><span class="nm">Lucía Martín</span></div><label for="uv-icd-in">Numéro de carte</label><div class="fd"><input id="uv-icd-in" inputmode="numeric" autocomplete="cc-number" placeholder="1234 5678 9012 3456" maxlength="19"><span class="tg">Carte</span></div></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
Voir tout : ChampsOù l’utiliser
Les formulaires de paiement rassurent davantage quand on voit ce qu'on tape sur quelque chose qui ressemble à sa carte. Ce champ regroupe le numéro par quatre pendant la saisie, le reflète sur un aperçu de carte brillant avec puce et nom, et détecte Visa, Mastercard ou Amex dès les premiers chiffres, en changeant les couleurs et l'étiquette de marque.
Au focus, la carte s'incline un peu et un reflet la traverse. Le champ ouvre le clavier numérique sur mobile et utilise autocomplete cc-number, les gestionnaires de mots de passe peuvent donc le remplir.