+34

Te enviaremos un código por SMS

HTML + CSSChamps

Téléphone avec indicatif pays

Un sélecteur de pays avec drapeau et indicatif collé au numéro, qui se regroupe par trois chiffres.

Réglages

16px
1x

Code

<div class="uv-iph"><label for="uv-iph-in">Téléphone</label><div class="fd"><span class="cc"><span class="fl" aria-hidden="true">🇪🇸</span><select aria-label="Indicatif"><option value="+34" data-f="🇪🇸" selected>Espagne +34</option><option value="+52" data-f="🇲🇽">Mexique +52</option><option value="+54" data-f="🇦🇷">Argentine +54</option><option value="+44" data-f="🇬🇧">Royaume-Uni +44</option><option value="+49" data-f="🇩🇪">Allemagne +49</option><option value="+33" data-f="🇫🇷">France +33</option></select><b>+34</b><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10l5 5 5-5"/></svg></span><input id="uv-iph-in" type="tel" inputmode="tel" autocomplete="tel-national" placeholder="612 345 678"></div><p class="ht">Nous t’enverrons un code par SMS</p></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 : Champs

Où l’utiliser

Les inscriptions internationales ont besoin de l'indicatif à côté du numéro, pas dans une étape séparée. Ici, un select natif est posé invisible sur un drapeau et un indicatif, donc le toucher ouvre le sélecteur du système sur mobile ; choisir un pays fait apparaître le nouveau drapeau et place le focus sur le numéro, formaté par groupes de trois.

Le select étant natif, il est accessible et rapide sur tous les appareils. Ajoute ou retire des pays dans la liste et explique sous le champ pourquoi tu demandes le numéro.