web-dev-qa-db-fra.com

Quel attribut de formulaire html5 devrait être utilisé pour un code postal?

Est-il préférable d'utiliser un attribut 'text' avec une limite du nombre de caractères, ou puis-je utiliser un attribut number dans une entrée pour un code postal?.

J'essaie juste de comprendre tous les attributs avec les formulaires en html5 .

htmlhtml5formsvalidation
24
homer5677

Tu peux essayer ça

<Label>Zip Code</Label><input type="text" pattern="[0-9]{5}" title="Five digit Zip code" />
38
Md Johirul Islam

«Devrait» est un mot fort, mais il y a en fait une déclaration de classe «devrait» sur des problèmes comme celui-ci. HTML5 CR dit à propos de input type=number : 

Remarque: L'état type = nombre n'est pas approprié pour les entrées composées uniquement de nombres mais ne représentant pas à proprement parler un nombre. Par exemple, ce serait inapproprié pour les numéros de carte de crédit ou codes postaux américains. Un moyen simple de déterminer s’il faut utiliser type = nombre est à considérer si cela aurait du sens pour l'entrée contrôle pour avoir une interface de spinbox (par exemple, avec les flèches "haut" et "bas" ).

Cela signifie que le seul élément réalisable à cette fin est input type=text, lors de l'utilisation de constructions intégrées. Vous pouvez utiliser l'attribut maxlength pour définir le nombre maximal de caractères (fonctionne sur tous les navigateurs), ainsi qu'un attribut pattern qui spécifie également les caractères et combinaisons autorisés. sa valeur dépend naturellement du type de code postal à utiliser. Pour les adresses postales internationales, vous ne devriez probablement pas utiliser ni pattern ni même maxlength, car les formats varient.

11
Jukka K. Korpela

Si vous avez des utilisateurs internationaux que vous allez autoriser alphanumériques via type = "text"

Exemple: les codes postaux du Royaume-Uni sont au format AA9A 9AA 

9 = un nombre quelconque 

A = n'importe quelle lettre 

5
Andrew M

Pour autoriser Zip + 4:

<input type="text" placeholder="Zip Code" title="Please enter a Zip Code" pattern="^\s*?\d{5}(?:[-\s]\d{4})?\s*?$">

Pour être convivial pour l'utilisateur, cela autorise également les espaces avant/après la chaîne, ce que le développeur devra couper le côté serveur.

2
Satyen

<input type="tel" pattern="[0-9]*" placeholder="Zip Code" max="99999" />

Tapez set tel pour afficher le pavé numérique, les motifs sauf les valeurs 0 à 9 et max pour empêcher les valeurs supérieures aux codes postaux américains à 7 chiffres.

1
Kevin N.

"Best" est subjectif/contextuel. Mais - du point de vue de la convivialité, Zach Leatherman a étudié les entrées numériques multiples en 2016 et a spécifiquement traité l’entrée Zip.

L'objectif était de faire apparaître des "claviers à grand nombre" sur les appareils mobiles. Cela peut sembler insignifiant, mais faciliter la saisie des formulaires dans les formulaires de paiement en ligne est un objectif important.

Il semble qu'un jour l'attribut inputmode="numeric" conviendra pour les entrées Zip. Mais pour le moment, seul Chrome/Android le prend en charge (Firefox l’a derrière un drapeau).

Zach a développé une petite bibliothèque appelée numeric-input dans le cadre de son paquetage formcore qui implémentera le meilleur scénario possible pour le navigateur utilisé.

N'oubliez pas que la bibliothèque a quelques années et que le comportement du navigateur a peut-être changé depuis.

0
mac9416

Mon point de vue offre diverses options, mais je pense que le meilleur est déjà présenté par Md Johorul Islam: l'attribut pattern.

Les options:

  • Utilisez une expression régulière (le motif attribute);
  • Utilisez un contrôle de masque personnalisé (jQuery), tel que masque jQuery ;
  • Pour les plates-formes où cela n'est pas pris en charge, utilisez type=text avec un maxlength.

Remarque: malgré ces options: toujours valider le côté serveur!

0
Patrick Hofman

Vous pouvez utiliser l'un ou l'autre et le formulaire fonctionnera. Cependant, il pourrait être préférable d'utiliser un numéro, car, par exemple, les appareils mobiles invoqueraient une disposition de clavier différente - avec des chiffres et des caractères d'assistance au lieu du clavier alphanum complet.

Mais si vous pensez que le fait de définir un type plutôt qu'un autre offrira un niveau de sécurité supérieur, vous vous trompez. Peu importe le type que vous mettez, il vous offrira non sécurité. Chaque entrée de formulaire doit également être vérifiée sur le serveur - c'est là que se déroule le véritable contrôle de sécurité. La vérification que vous effectuez dans le navigateur est davantage une question d’UI/UX.

Voici un article de Nice sur différents types d'entrée: http://html5doctor.com/html5-forms-input-types/

0
Shomz