web-dev-qa-db-de.com

Welches html5-Formularattribut sollte für eine Postleitzahl verwendet werden?

Ist es am besten, ein 'Text'-Attribut mit einer Begrenzung der Zeichenanzahl zu verwenden, oder kann ich ein Zahlenattribut in einer Eingabe für eine Postleitzahl verwenden.

Ich versuche einfach, die verschiedenen Attribute mit den Formularen in html5 . Cheers zu verstehen

24
homer5677

Sie können es versuchen

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

„Sollte“ ist ein starkes Wort, aber es gibt tatsächlich eine „Sollte“ -Klassenaussage zu solchen Problemen. HTML5 CR sagt über input type=number

Hinweis: Der Status type = number ist nicht geeignet für Eingaben, die nur aus Zahlen bestehen, aber nicht streng eine .__ sind. Nummer. Beispielsweise wäre es für Kreditkartennummern ungeeignet oder US-Postleitzahlen. Eine einfache Methode zur Bestimmung, ob .__ verwendet werden soll. type = number gibt an, ob es für die Eingabe sinnvoll ist Steuerung, um eine Spinbox-Schnittstelle zu haben (z. B. mit den Pfeilen nach oben und nach unten).

Das bedeutet, dass das einzig mögliche Element input type=text ist, wenn eingebaute Konstrukte verwendet werden. Mit dem maxlength-Attribut können Sie die maximale Anzahl von Zeichen festlegen (funktioniert in allen Browsern) und zusätzlich ein pattern-Attribut, das auch die zulässigen Zeichen und Kombinationen angibt. Ihr Wert hängt natürlich von den zu verwendenden Postleitzahlstypen ab. Für internationale Postadressen sollten Sie wahrscheinlich keine pattern oder gar maxlength verwenden, da die Formate variieren.

11

Wenn Sie internationale Benutzer haben, möchten Sie alphanumerisch über type = "text" zulassen.

Beispiel: Britische Postleitzahlen werden als AA9A 9AA formatiert 

9 = eine beliebige Anzahl 

A = beliebiger Buchstabe 

5
Andrew M

So erlauben Sie Zip + 4:

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

Um dem Benutzer freundlich zu sein, erlaubt dies auch Leerzeichen vor/nach der Zeichenfolge, die der Entwickler serverseitig abschneiden muss.

2
Satyen

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

Geben Sie set tel ein, um den numerischen Tastenblock anzuzeigen. Muster mit Ausnahme der Werte 0-9 und max.

1
Kevin N.

"Best" ist subjektiv/kontextuell. Aus Sicht der Benutzerfreundlichkeit hat Zach Leatherman im Jahr 2016 nummerische Eingaben studiert und speziell die Zip-Eingaben angesprochen.

Das Ziel war es, "große Tastaturen" auf mobilen Geräten erscheinen zu lassen. Dies mag unbedeutend erscheinen, aber die Erleichterung der Formulareingabe in E-Commerce-Checkout-Formularen ist ein wichtiges Ziel.

Es scheint, dass eines Tages das inputmode="numeric"-Attribut für Zip-Eingaben geeignet ist. Aber jetzt - nur Chrome/Android unterstützt es (Firefox hat es hinter einer Flagge).

Zach entwickelte eine kleine Bibliothek namens numerische Eingabe als Teil seines formcore - Pakets, die den bestmöglichen Fall für den verwendeten Browser implementiert.

Denken Sie daran, dass die Bibliothek ein paar Jahre alt ist und sich das Browserverhalten seitdem geändert hat.

0
mac9416

Mein POV bietet verschiedene Optionen, aber ich denke, das Beste hat Md Johorul Islam bereits gegeben: das pattern-Attribut.

Die Optionen:

  • Verwenden Sie einen regulären Ausdruck (das Muster attribute);
  • Verwenden Sie ein benutzerdefiniertes (jQuery) Maskensteuerelement, z. B. jQuery-Maske ;
  • Verwenden Sie für Plattformen, auf denen dies nicht unterstützt wird, type=text mit einer maxlength.

Hinweis: Trotz dieser Optionen: Server immer überprüfen!

0
Patrick Hofman

Sie können beide verwenden und das Formular wird funktionieren. Die Verwendung von number ist jedoch möglicherweise eine bessere Idee, da mobile Geräte beispielsweise ein anderes Tastaturlayout aufrufen würden - mit Zahlen und Hilfszeichen anstelle der vollständigen alphanumatischen Tastatur.

Wenn Sie jedoch davon ausgehen, dass die Einstellung eines Typs im Gegensatz zu einem anderen eine höhere Sicherheit bietet, liegen Sie falsch. Egal für welchen Typ Sie sich entscheiden, er bietet Ihnen keine Sicherheit. Jede Formulareingabe muss auch auf dem Server überprüft werden - hier findet die eigentliche Sicherheitsüberprüfung statt. Die Überprüfung, die Sie im Browser durchführen, ist eher eine Sache der Benutzeroberfläche/UX.

Hier ist ein schöner Artikel über verschiedene Eingabetypen: http://html5doctor.com/html5-forms-input-types/

0
Shomz