Wert des HTML-Attributs <input type="number">

Probieren Sie es aus

<label for="tentacles">Number of tentacles (10-100):</label>

<input type="number" id="tentacles" name="tentacles" min="10" max="100" />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

Wert

Eine Zahl, die den in das Eingabefeld eingegebenen Wert darstellt. Sie können einen Standardwert festlegen, indem Sie dem Attribut value eine Zahl zuweisen:

<input id="number" type="number" value="42" />

Zusätzliche Attribute

Zusätzlich zu den Attributen, die alle <input>-Typen üblicherweise unterstützen, unterstützen Eingabefelder vom Typ number die folgenden Attribute.

list

Der Wert des Attributs list ist die id eines <datalist>-Elements im selben Dokument. Das <datalist>-Element stellt eine Liste vordefinierter Werte bereit, die Benutzern für dieses Eingabefeld vorgeschlagen werden. Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht als Optionen vorgeschlagen. Die bereitgestellten Werte sind Vorschläge, keine Vorgaben: Benutzer können einen Wert aus der Liste auswählen oder einen anderen Wert eingeben.

max

Der höchste für dieses Eingabefeld zulässige Wert. Wenn der in das Element eingegebene value diesen Wert überschreitet, schlägt die Constraint-Validierung fehl. Ist der Wert des Attributs max keine Zahl, hat das Element keinen Höchstwert.

Dieser Wert muss größer oder gleich dem Wert des Attributs min sein.

min

Der niedrigste für dieses Eingabefeld zulässige Wert. Wenn der value des Elements darunter liegt, schlägt die Constraint-Validierung fehl. Wird für min ein Wert angegeben, der keine gültige Zahl ist, hat das Eingabefeld keinen Mindestwert.

Dieser Wert muss kleiner oder gleich dem Wert des Attributs max sein.

placeholder

Das Attribut placeholder ist eine Zeichenfolge, die Benutzern einen kurzen Hinweis darauf gibt, welche Art von Information im Feld erwartet wird. Es sollte ein Wort oder eine kurze Wortgruppe sein, die den erwarteten Datentyp veranschaulicht, statt einer ausführlichen Erklärung. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt des Steuerelements eine Schreibrichtung hat (LTR oder RTL), der Platzhalter aber in der entgegengesetzten Richtung angezeigt werden soll, können Sie Formatierungszeichen des bidirektionalen Unicode-Algorithmus verwenden, um die Schreibrichtung innerhalb des Platzhalters zu ändern. Weitere Informationen finden Sie unter Unicode-Steuerzeichen für bidirektionalen Text verwenden.

readonly

Ein boolesches Attribut, das angibt, dass Benutzer dieses Feld nicht bearbeiten können. Sein value kann jedoch weiterhin durch JavaScript-Code geändert werden, der die Eigenschaft value von HTMLInputElement direkt setzt.

step

Das Attribut step ist eine Zahl, die die Schrittweite festlegt, der der Wert entsprechen muss, oder der nachfolgend beschriebene Sonderwert any. Gültig sind nur Werte, die vom Ausgangswert aus eine ganze Anzahl von Schritten entfernt sind. Als Ausgangswert dient min, falls angegeben, andernfalls value oder 0, wenn keines von beiden angegeben ist.

Die Standardschrittweite für number-Eingabefelder ist 1. Dadurch sind nur ganze Zahlen zulässig – es sei denn, der Ausgangswert ist keine ganze Zahl.

Der Zeichenfolgenwert any bedeutet, dass keine Schrittweite vorgegeben ist und jeder Wert zulässig ist, sofern keine anderen Einschränkungen wie min und max gelten.

Zahleneingabefelder verwenden

Der Eingabetyp number sollte nur für Zahlen verwendet werden, die schrittweise erhöht oder verringert werden können, insbesondere wenn Schritt-Pfeile die Benutzerfreundlichkeit verbessern. Für Werte, die zwar nur aus Ziffern bestehen, aber im eigentlichen Sinne keine Zahlen sind – etwa Postleitzahlen in vielen Ländern oder Kreditkartennummern –, ist der Eingabetyp number nicht geeignet. Erwägen Sie für solche Eingaben einen anderen Eingabetyp, beispielsweise <input type="tel">, oder einen anderen <input>-Typ mit dem Attribut inputmode:

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="number">-Elemente können die Erstellung der Benutzeroberfläche und der Logik für die Zahleneingabe in ein Formular vereinfachen. Wenn Sie ein Eingabefeld mit dem passenden type-Wert number erstellen, wird automatisch geprüft, ob der eingegebene Text eine Zahl ist. In der Regel werden außerdem Schaltflächen zum schrittweisen Erhöhen und Verringern des Werts angezeigt.

Mobile Browser verbessern die Benutzerfreundlichkeit zusätzlich, indem sie eine für die Zahleneingabe besser geeignete Tastatur anzeigen, wenn Benutzer einen Wert eingeben möchten.

Ein einfaches Zahleneingabefeld

In seiner einfachsten Form lässt sich ein Zahleneingabefeld so implementieren:

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

Ein Zahleneingabefeld gilt als gültig, wenn es leer ist oder eine einzelne Zahl enthält; andernfalls ist es ungültig. Wird das Attribut required verwendet, ist ein leeres Eingabefeld nicht mehr gültig.

Platzhalter

Manchmal ist ein Hinweis direkt im Eingabefeld hilfreich, der zeigt, welches Format die Eingabe haben soll. Das kann besonders wichtig sein, wenn die Seitengestaltung keine aussagekräftige Beschriftung für jedes <input>-Element vorsieht. Hier kommen Platzhalter ins Spiel. Ein Platzhalter ist ein Wert, der meist einen Hinweis auf das erwartete Format des value gibt. Er wird im Eingabefeld angezeigt, wenn der value des Elements "" ist. Sobald Daten eingegeben werden, verschwindet der Platzhalter; wird das Feld geleert, erscheint er erneut.

Hier verwenden wir ein number-Eingabefeld mit dem Platzhalter „Multiple of 10“. Beachten Sie, wie der Platzhalter verschwindet und wieder erscheint, wenn Sie den Inhalt des Eingabefelds ändern.

<input type="number" placeholder="Multiple of 10" />

Schrittweite festlegen

Standardmäßig erhöhen oder verringern die bereitgestellten Pfeilschaltflächen den Wert jeweils um 1. Sie können dies ändern, indem Sie das Attribut step angeben. Sein Wert ist eine Zahl, die die Schrittweite festlegt. Der Platzhalter im vorherigen Beispiel weist darauf hin, dass der Wert ein Vielfaches von 10 sein soll. Daher ist es sinnvoll, step auf 10 zu setzen:

<input type="number" placeholder="multiple of 10" step="10" />

In diesem Beispiel erhöhen und verringern die Pfeilschaltflächen den Wert bei jeder Betätigung um 10 statt um 1. Sie können weiterhin manuell eine Zahl eingeben, die kein Vielfaches von 10 ist; sie gilt dann jedoch als ungültig.

Mindest- und Höchstwerte festlegen

Mit den Attributen min und max können Sie einen Mindest- und einen Höchstwert für das Feld festlegen. Geben wir unserem Beispiel etwa den Mindestwert 0 und den Höchstwert 100:

<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />

In dieser überarbeiteten Version verhindern die Pfeilschaltflächen, dass Sie einen Wert unter 0 oder über 100 einstellen. Sie können weiterhin manuell eine Zahl außerhalb dieser Grenzen eingeben; sie gilt dann jedoch als ungültig.

Dezimalwerte zulassen

Bei Zahleneingabefeldern beträgt die Schrittweite standardmäßig 1. Wenn Sie eine Zahl mit Nachkommastellen eingeben, die keine ganze Zahl ist (etwa „1.1“), gilt sie als ungültig. Werte wie „1.0“ gelten hingegen als gültig, da sie numerisch einer ganzen Zahl entsprechen. Wenn Sie Werte mit Nachkommastellen zulassen möchten, müssen Sie dies im Wert von step berücksichtigen (beispielsweise mit step="0.01", um zwei Nachkommastellen zuzulassen). Hier ist ein einfaches Beispiel:

<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />

Dieses Beispiel erlaubt Werte zwischen 0.0 und 10.0 mit bis zu zwei Nachkommastellen. „9.52“ ist beispielsweise gültig, „9.521“ hingegen nicht.

Wenn Sie beliebige Dezimalwerte zulassen möchten, können Sie step auf "any" setzen.

Größe des Eingabefelds festlegen

<input>-Elemente vom Typ number unterstützen keine Attribute zur Größenfestlegung für Formularelemente wie size. Um die Größe dieser Steuerelemente zu ändern, müssen Sie CSS verwenden.

Wenn das Eingabefeld beispielsweise nur so breit sein soll, wie für eine dreistellige Zahl nötig ist, können wir unserem HTML eine id hinzufügen und den Platzhalter kürzen, da das Feld für den bisher verwendeten Text zu schmal wäre:

<input
  type="number"
  placeholder="x10"
  step="10"
  min="0"
  max="100"
  id="number" />

Anschließend fügen wir CSS hinzu, um die Breite des Elements mit dem id-Selektor #number zu verringern:

#number {
  width: 3em;
}

Das Ergebnis sieht so aus:

Vorgeschlagene Werte anbieten

Sie können eine Liste vordefinierter Optionen bereitstellen, aus denen Benutzer auswählen können. Geben Sie dazu das Attribut list an. Sein Wert ist die id eines <datalist>-Elements, das für jeden vorgeschlagenen Wert ein <option>-Element enthält. Der value jedes option-Elements ist der entsprechende Wertvorschlag für das Zahleneingabefeld.

<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers" />
<span class="validity"></span>

<datalist id="defaultNumbers">
  <option value="10045678"></option>
  <option value="103421"></option>
  <option value="11111111"></option>
  <option value="12345678"></option>
  <option value="12999922"></option>
</datalist>

Validierung

Wir haben bereits mehrere Validierungsfunktionen von number-Eingabefeldern erwähnt. Hier sind sie noch einmal im Überblick:

• <input type="number">-Elemente behandeln jede Eingabe, die keine Zahl ist, automatisch als ungültig. Eine leere Eingabe ist zulässig, sofern nicht required angegeben ist.
• Mit dem Attribut required können Sie eine leere Eingabe für ungültig erklären. Das Eingabefeld muss dann ausgefüllt werden.
• Mit dem Attribut step können Sie gültige Werte auf bestimmte Schritte beschränken, beispielsweise auf Vielfache von 10.
• Mit den Attributen min und max können Sie untere und obere Grenzen für gültige Werte festlegen.

Das folgende Beispiel zeigt alle genannten Funktionen. Zusätzlich verwendet es CSS, um je nach Wert des input-Elements ein Symbol für gültige oder ungültige Eingaben anzuzeigen:

<form>
  <div>
    <label for="balloons">Number of balloons to order (multiples of 10):</label>
    <input
      id="balloons"
      type="number"
      name="balloons"
      step="10"
      min="0"
      max="100"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" />
  </div>
</form>

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

Versuchen Sie, das Formular mit verschiedenen ungültigen Eingaben abzusenden: ohne Wert, mit einem Wert unter 0 oder über 100, mit einem Wert, der kein Vielfaches von 10 ist, oder mit einem nicht numerischen Wert. Beachten Sie, wie sich die Fehlermeldungen des Browsers unterscheiden.

Das in diesem Beispiel verwendete CSS lautet:

div {
  margin-bottom: 10px;
}

input:invalid + span::after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  content: "✓";
  padding-left: 5px;
}

Hier verwenden wir die Pseudoklassen :invalid und :valid, um auf dem benachbarten <span>-Element ein passendes Symbol als generierten Inhalt anzuzeigen. Es dient als visueller Hinweis auf die Gültigkeit der Eingabe.

Für mehr Flexibilität platzieren wir das Symbol auf einem separaten <span>-Element. Einige Browser zeigen generierte Inhalte bei bestimmten Arten von Formulareingaben nicht zuverlässig an. Lesen Sie dazu beispielsweise den Abschnitt zur Validierung von <input type="date">.

Validierung anhand eines Musters

<input type="number">-Elemente unterstützen das Attribut pattern nicht, um eingegebene Werte anhand eines bestimmten regulären Ausdrucks zu prüfen.

Der Grund dafür ist, dass Zahleneingabefelder ohnehin ungültig sind, wenn sie etwas anderes als Zahlen enthalten. Außerdem können Sie den zulässigen Zahlenbereich mit den Attributen min und max begrenzen, wie oben erläutert.

Barrierefreiheit

Die implizite Rolle des Elements <input type="number"> ist spinbutton. Wenn diese Funktion für Ihr Formularsteuerelement nicht wichtig ist, sollten Sie type="number" besser nicht verwenden. Nutzen Sie stattdessen inputmode="numeric" zusammen mit einem pattern-Attribut, das die Eingabe auf Ziffern und zugehörige Zeichen beschränkt. Bei <input type="number"> besteht die Gefahr, dass Benutzer eine Zahl versehentlich erhöhen, obwohl sie etwas anderes tun möchten. Außerdem erhalten sie keine ausdrückliche Rückmeldung darüber, was sie falsch machen, wenn sie etwas eingeben, das keine Zahl ist.

Erwägen Sie auch die Verwendung des Attributs autocomplete, damit Benutzer Formulare schneller und mit geringerem Fehlerrisiko ausfüllen können. Um beispielsweise das automatische Ausfüllen eines Postleitzahlenfelds zu aktivieren, setzen Sie autocomplete="postal-code".

Beispiele

Wir haben bereits erläutert, dass die Schrittweite standardmäßig 1 beträgt und Sie mit dem Attribut step Dezimaleingaben zulassen können. Sehen wir uns das genauer an.

Das folgende Beispiel zeigt ein Formular zur Eingabe der Körpergröße. Standardmäßig wird die Größe in Metern eingegeben. Mit einem Klick auf die entsprechende Schaltfläche können Sie das Formular so umstellen, dass es stattdessen Fuß und Zoll akzeptiert. Das Eingabefeld für Meter lässt zwei Nachkommastellen zu.

Das HTML sieht so aus:

<form>
  <div class="metersInputGroup">
    <label for="meters">Enter your height — meters:</label>
    <input
      id="meters"
      type="number"
      name="meters"
      step="0.01"
      min="0"
      placeholder="e.g. 1.78"
      required />
    <span class="validity"></span>
  </div>
  <div class="feetInputGroup">
    <span>Enter your height — </span>
    <label for="feet">feet:</label>
    <input id="feet" type="number" name="feet" min="0" step="1" />
    <span class="validity"></span>
    <label for="inches">inches:</label>
    <input id="inches" type="number" name="inches" min="0" max="11" step="1" />
    <span class="validity"></span>
  </div>
  <div>
    <input
      type="button"
      class="meters"
      value="Enter height in feet and inches" />
  </div>
  <div>
    <input type="submit" value="Submit form" />
  </div>
</form>

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

Wie Sie sehen, verwenden wir viele der Attribute, die wir bereits weiter oben im Artikel betrachtet haben. Da wir bei der Meterangabe Zentimeter berücksichtigen möchten, haben wir step auf 0.01 gesetzt, damit Werte wie 1.78 nicht als ungültig gelten. Außerdem haben wir für dieses Eingabefeld einen Platzhalter angegeben.

Die Eingabefelder für Fuß und Zoll haben wir zunächst mit style="display: none;" ausgeblendet, sodass Meter die Standardeinheit ist.

Kommen wir nun zum CSS. Es ähnelt stark der bereits gezeigten Gestaltung für die Validierung; hier gibt es nichts Besonderes.

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Und schließlich das JavaScript:

const metersInputGroup = document.querySelector(".metersInputGroup");
const feetInputGroup = document.querySelector(".feetInputGroup");
const metersInput = document.querySelector("#meters");
const feetInput = document.querySelector("#feet");
const inchesInput = document.querySelector("#inches");
const switchBtn = document.querySelector('input[type="button"]');

feetInputGroup.style.display = "none"; // Hide feet/inches inputs initially

switchBtn.addEventListener("click", () => {
  if (switchBtn.getAttribute("class") === "meters") {
    switchBtn.setAttribute("class", "feet");
    switchBtn.value = "Enter height in meters";

    metersInputGroup.style.display = "none";
    feetInputGroup.style.display = "block";

    feetInput.setAttribute("required", "");
    inchesInput.setAttribute("required", "");
    metersInput.removeAttribute("required");

    metersInput.value = "";
  } else {
    switchBtn.setAttribute("class", "meters");
    switchBtn.value = "Enter height in feet and inches";

    metersInputGroup.style.display = "block";
    feetInputGroup.style.display = "none";

    feetInput.removeAttribute("required");
    inchesInput.removeAttribute("required");
    metersInput.setAttribute("required", "");

    feetInput.value = "";
    inchesInput.value = "";
  }
});

Nach der Deklaration einiger Variablen wird der Schaltfläche button ein Event-Listener hinzugefügt, der das Umschalten steuert. Beim Betätigen der Schaltfläche werden ihre class und ihr <label> geändert und die Anzeigewerte der beiden Eingabegruppen aktualisiert.

(Beachten Sie, dass wir hier nicht zwischen Metern und Fuß/Zoll umrechnen. Eine echte Webanwendung würde dies wahrscheinlich tun.)

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Leitfaden für HTML-Formulare
• <input>
• <input type="tel">