HTML Number Input: min, max, step, Dezimalzahlen und valueAsNumber
HTML input type="number" akzeptiert Mengen, die verglichen oder erhöht werden können. min und max legen den Bereich fest, und step legt gültige Intervalle fest. Das Zulassen von Dezimalzahlen erfordert die Berücksichtigung sowohl des Intervalls als auch seiner Basis; zahlenähnliche Telefonnummern oder Postleitzahlen benötigen in der Regel einen anderen Eingabetyp.
min · max · step
min und max verhindern nicht unbedingt das Eingeben von Zahlen außerhalb des Bereichs. Selbst wenn ein ungültiger Wert eingegeben werden kann, wird die normale Formularübermittlung durch die Validierung blockiert. Fügen Sie required hinzu, wenn der Wert nicht leer sein darf.
Die Schrittgrundlage ist ein gültiger min-Wert, falls vorhanden, ansonsten ein gültiges HTML-Value-Attribut, oder 0, wenn keines vorhanden ist. Gültige Werte sind eine ganze Zahl von Schritten von dieser Basis. Das Standardintervall ist 1, aber eine dezimale Basis kann gültige Dezimalwerte ergeben, sodass der Standard nicht universell Dezimalzahlen verbietet.
| Konfiguration | Beispiele für gültige Werte | Vorsicht |
|---|---|---|
min="0" step="1" |
0, 1, 2 |
0.5 passt nicht in das Intervall. |
min="0" step="0.01" |
1, 1.2, 1.23 |
1.234 passt nicht. Dies erzwingt keine Anzeige mit zwei Dezimalstellen. |
min="0" step="3" |
0, 3, 6, 9 |
Vielfache von drei ausgehend von null. |
min="1" step="3" |
1, 4, 7, 10 |
Die Basis ist eins, daher unterscheiden sich diese von Vielfachen von drei. |
step="any" |
Verschiedene Dezimalwerte innerhalb des Bereichs | Entfernt die Schrittbeschränkung; andere Bereichs- und Erfordernisbeschränkungen bleiben bestehen. |
Vergleich von Ganzzahl- und Dezimalwert-Eingaben in einem Beispiel
Speichern Sie diesen vollständigen Code als number.html und öffnen Sie ihn in einem Browser. Ohne einen Server vergleichen Sie die Validierung, übermittelte Zeichenfolgen und JavaScript-Zahlenwerte für Menge und Gewicht. Diese Übung definiert das Gewicht als 0–100 kg in Schritten von 0,01 kg.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Zahlenbereiche und Schritte</title>
<style>
body { margin: 24px; font-family: sans-serif; }
label { display: block; margin: 16px 0 6px; }
input { width: 12rem; max-width: 100%; box-sizing: border-box; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
</head>
<body>
<h1>Menge und Gewicht eingeben</h1>
<form id="demo">
<label for="quantity">Menge (1–10, ganze Einheiten)</label>
<input id="quantity" name="quantity" type="number"
min="1" max="10" step="1" value="2" required>
<label for="weight">Gewicht (0–100 kg, Schritte von 0,01 kg)</label>
<input id="weight" name="weight" type="number"
min="0" max="100" step="0.01" value="1.25" required>
<p><button type="submit">Werte anzeigen</button>
<button type="reset">Zurücksetzen</button></p>
</form>
<pre id="result" aria-live="polite"></pre>
<script>
const form = document.querySelector('#demo');
const quantity = document.querySelector('#quantity');
const weight = document.querySelector('#weight');
const result = document.querySelector('#result');
form.addEventListener('submit', (event) => {
event.preventDefault();
result.textContent = JSON.stringify({
formData: [...new FormData(form).entries()],
numbers: { quantity: quantity.valueAsNumber, weight: weight.valueAsNumber }
}, null, 2);
});
form.addEventListener('input', () => { result.textContent = ''; });
form.addEventListener('reset', () => { result.textContent = ''; });
</script>
</body>
</html>- Senden Sie die Anfangswerte.
formData(Zeichenketten):"2","1.25";numbers(Zahlen):2,1.25. - Setzen Sie die Menge auf 11 und senden Sie sie, um die maximale Validierung auszulösen. Setzen Sie sie auf 2,5 für die Schrittvalidierung oder löschen Sie sie für die Pflichtfeldvalidierung. Stellen Sie die Menge auf 2 zurück.
- Ein Gewicht von 1,23 wird übermittelt, aber 1,234 passt nicht in das Intervall. Die feste Dezimalstellenformatierung unterscheidet sich von gültigen numerischen Intervallen.
- Ändern Sie nur die Menge von
step="1"zustep="3"und öffnen Sie die Datei erneut. Damin="1", der Anfangswert 2 ungültig ist, aber 4 gültig ist. Stellen Sie anschließend den Schritt wieder auf 1 zurück. - Zurücksetzen setzt die Menge auf 2 und das Gewicht auf 1,25 zurück und löscht das Ergebnis.
Unterscheiden Sie numerisch aussehende Bezeichner
Telefonnummern, Postleitzahlen und Mitgliedskennungen müssen oft als ursprünglicher String beibehalten werden und nicht arithmetisch behandelt werden. Führende Nullen oder Bindestriche können wichtig sein. Ziehen Sie type="tel" für Telefonnummern und type="text" inputmode="numeric" für numerisch aussehende Bezeichner in Betracht. inputmode deutet auf eine Tastatur hin; es ist keine numerische Validierungsregel.
Zahleingaben verwenden nicht maxlength oder pattern, um die Ziffernanzahl oder reguläre Ausdrucksmuster einzuschränken. Legen Sie die Breite stattdessen mit CSS anstelle von size fest. Browser unterscheiden sich im Verhalten der Zeichen-Eingabe, bei den Aufwärts-/Abwärtspfeilen und der Anzeige des Dezimaltrennzeichens, daher sollte man sich nicht auf ein bestimmtes Erscheinungsbild oder Sperrverhalten verlassen.
Verarbeiten Sie Zahlen in JavaScript und auf dem Server
input.value und gewöhnliche mit Formularen übermittelte Werte sind Strings. Verwenden Sie valueAsNumber für eine Zahl; es gibt NaN zurück, wenn leer oder nicht konvertierbar. Die Konvertierung eines leeren Strings mit Number() ergibt null, daher sollte ein leerer Wert zuerst unterschieden werden, wenn er etwas anderes als 0 bedeutet.
Allein eine Browser-Validierung macht einen Wert nicht vertrauenswürdig. Validieren Sie auch auf dem Server das numerische Format, die Endlichkeit, den Bereich und den Schritt. Für Berechnungen, die eine Dezimalgenauigkeit erfordern, wie z.B. Beträge, berücksichtigen Sie den binären Gleitpunktfehler von JavaScript und verwenden Sie Ganzzahlen in der kleinsten Währungseinheit oder einen geeigneten Dezimalansatz.
Die MDN-Zahleneingabe-Referenz erklärt Attribute und die Regeln zur Schritt-Basis.
