HTML Input type=number: min, max, step, Validierung | We.Inc
Teste input type=number live: Setze min, max und step, lies valueAsNumber und jedes Validity-Flag, entferne den Spinner und erfahre, wann inputmode=numeric das bessere Feld ist.
Verwende input type="number" für echte Mengen wie ein Alter, einen Preis oder eine Anzahl. min und max legen den erlaubten Bereich fest, step legt die Schrittweite fest (standardmäßig 1, oder any für beliebige Dezimalzahlen), und valueAsNumber liefert dir eine Zahl oder NaN, wenn das Feld leer ist. Für Kartennummern und Postleitzahlen verwendest du stattdessen type="text" mit inputmode="numeric".
Attribute eines Zahlenfelds
Attribut
Beispiel
Wirkung
min="0"
Kleinere Werte bestehen die Validierung nicht (rangeUnderflow)
max="10"
Größere Werte bestehen die Validierung nicht (rangeOverflow)
step="0.01" or step="any"
Standard ist 1; Werte außerhalb der Schrittweite sind ungültig (stepMismatch)
Ein leeres Feld ist ungültig (valueMissing)
list="sizes"
Schlägt Werte aus einer datalist vor
placeholder="e.g. 2"
Hinweis, der angezeigt wird, solange das Feld leer ist, niemals ein Label
Zahlenfelder wirken einfach, aber die Regeln zu Schrittweiten, leeren Werten und dem Spinner bringen viele ins Straucheln. Setze die Attribute im Tester, tippe irgendetwas in das Feld und sieh zu, wie sich der Rohwert, die geparste Zahl und jedes Validity-Flag beim Tippen aktualisieren.
Gib Werte für min, max und step ein. Lass ein Feld leer, um das Attribut wegzulassen.
Tippe in das Testfeld oder nutze die Pfeiltasten und den Spinner.
Lies value, valueAsNumber und die Validity-Flags im Bereich daneben.
Kopiere das erzeugte HTML, sobald sich das Feld so verhält, wie du willst.
Kombiniere das Feld immer mit einem sichtbaren label-Element; ein Placeholder verschwindet, sobald jemand tippt.
Lies valueAsNumber, statt value selbst zu parsen, und prüfe auf NaN, bevor du den Wert verwendest.
Validiere noch einmal auf dem Server. Browserprüfungen helfen den Nutzern, aber jeder kann ein Formular auch ohne sie absenden.
Für Geldbeträge akzeptiert step="0.01" Cent; für beliebige Dezimalzahlen nutzt du step="any".
Verzichte auf type="number" bei Feldern wie Telefonnummern, Kartennummern und Postleitzahlen, bei denen ein Spinner keinen Sinn ergibt.
Häufige Fragen
Warum lehnt mein Zahlenfeld 1.5 ab?
Die Standardschrittweite ist 1, daher sind nur ganze Zahlen gültig, es sei denn, die Basis der Schrittweite ist keine ganze Zahl. Füge step="0.5", step="0.01" oder step="any" hinzu, um Dezimalzahlen zu akzeptieren.
Was liefert valueAsNumber bei einem leeren Feld?
NaN. Die Eigenschaft value liefert im selben Fall einen leeren String. Du kannst valueAsNumber auch setzen, um eine Zahl zurück in das Feld zu schreiben.
Wie entferne ich die Pfeile aus einem Zahlenfeld?
Setze appearance: textfield auf das Eingabefeld. Die Pfeiltasten nach oben und unten ändern den Wert trotzdem, weil appearance nur das Aussehen ändert. WebKit und Blink zeichnen die Spin-Buttons außerdem über Pseudo-Elemente, die das Beispiel unten ebenfalls ausblendet.
Sollte ich type=number oder inputmode=numeric verwenden?
Nutze type="number", wenn der Wert eine echte Menge ist und ein Spinner hilft. Nutze type="text" mit inputmode="numeric" und einem pattern für Ziffernfolgen wie Kartennummern oder Postleitzahlen, die Kennungen sind und keine Beträge.
Ist ein leeres Zahlenfeld gültig?
Ja, solange es nicht das Attribut required hat. Ein Zahlenfeld gilt als gültig, wenn es leer ist oder eine einzelne gültige Zahl enthält.
So funktioniert die Validierung
Der Browser prüft das Feld gegen min, max und step und setzt für jede verletzte Regel ein Flag im validity-Objekt. Solange ein Flag gesetzt ist, wird das Formular nicht abgesendet, und mit :invalid kannst du das Feld gestalten.
Enthält das Feld Text, den der Browser nicht in eine Zahl umwandeln kann, wird validity.badInput true. Prüfe dieses Flag oder valueAsNumber auf NaN, bevor du dem gelesenen Wert vertraust; der Tester zeigt genau, was dein Browser meldet.
Barrierefreiheit und Mobilgeräte
Ein Zahlenfeld wird Hilfstechnologien als spinbutton angezeigt. Wenn schrittweises Erhöhen und Verringern für den Wert nicht sinnvoll ist, vermeidet ein Textfeld mit inputmode="numeric" versehentliche Änderungen durch das Mausrad oder die Pfeiltasten.
Frag dich, ob der Wert ein Betrag ist, zu dem man etwas addieren oder von dem man etwas abziehen könnte. Wenn ja, nimm ein Zahlenfeld; wenn es ein Code ist, der zufällig Ziffern enthält, nimm Text.
Welches Feld für welche Zahl
type=number im Vergleich zu einem numerischen Textfeld
Daten
Feld
Warum
Menge, Alter, Gäste
type="number" min max
Ein echter Betrag; Spinner und Bereichsprüfung helfen
Preisfeld mit dezimaler Schrittweite und Styling für ungültige Werte
Gib 4.999 oder eine negative Zahl ein, und der Rahmen wird rot, weil der Wert gegen die Schrittweite oder das Minimum verstößt.
Die Spinner-Buttons ausblenden
appearance: textfield entfernt die Pfeile; die WebKit-Pseudo-Elemente decken Browser ab, die sie trotzdem zeichnen. Die Pfeiltasten funktionieren weiter.
Feld nur für Ziffern ohne Spinner
inputmode deutet auf eine Zifferntastatur hin, das pattern prüft auf fünf Ziffern, und führende Nullen bleiben erhalten.
Die Zahl in JavaScript sicher lesen
valueAsNumber erspart das Parsen von Strings, und die Validity-Prüfung fängt Werte außerhalb des Bereichs oder der Schrittweite ab.