<input type="number">

Bei Browsern, die Eingaben vom Typ number nicht unterstützen, wird eine number-Eingabe auf den Typ text zurückgesetzt.

Eine Zahl, die den in das Eingabefeld eingegebenen Wert darstellt. Sie können einen Standardwert für die Eingabe festlegen, indem Sie eine Zahl im value-Attribut angeben, wie folgt:

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

Zusätzlich zu den Attributen, die allgemein von allen <input>-Typen unterstützt werden, unterstützen Eingaben vom Typ number diese Attribute.

Der Wert des List-Attributs ist die id eines <datalist>-Elements, das sich im selben Dokument befindet. Das <datalist> bietet eine Liste vordefinierter Werte, die dem Benutzer als Vorschläge für diese Eingabe angeboten werden. Alle Werte in der Liste, die mit dem type inkompatibel sind, werden nicht in die vorgeschlagenen Optionen aufgenommen. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert eingeben.

Der maximale Wert, der für diese Eingabe akzeptiert wird. Wenn der in das Element eingegebene value diesen übersteigt, schlägt die Einschränkungsvalidierung fehl. Wenn der Wert des max-Attributs keine Zahl ist, hat das Element keinen maximalen Wert.

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

Der minimale Wert, der für diese Eingabe akzeptiert wird. Wenn der value des Elements kleiner ist, schlägt die Einschränkungsvalidierung fehl. Wenn ein Wert für min angegeben wird, der keine gültige Zahl ist, hat die Eingabe keinen Mindestwert.

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

Das placeholder-Attribut ist ein String, der dem Benutzer einen kurzen Hinweis gibt, welche Art von Informationen im Feld erwartet werden. Es sollte ein Wort oder eine kurze Phrase sein, die den erwarteten Datentyp zeigt, anstatt eine erklärende Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt der Steuerung eine Richtung (LTR oder RTL) hat, aber der Platzhalter in der entgegengesetzten Richtung präsentiert werden muss, können Sie Unicode-Bidirektionalitäts-Algorithmus-Formatierungszeichen verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; siehe Anleitung zur Verwendung von Unicode-Steuerelementen für bidirektionalen Text für weitere Informationen.

Ein boolesches Attribut, das, wenn es vorhanden ist, bedeutet, dass dieses Feld nicht vom Benutzer bearbeitet werden kann. Sein value kann jedoch weiterhin durch direktes Setzen der HTMLInputElement value-Eigenschaft über JavaScript geändert werden.

Das step-Attribut ist eine Zahl, die die Granularität angibt, die der Wert einhalten muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die der Grundlage für das Schrittmaß (min falls angegeben, value andernfalls und ein geeigneter Standardwert, wenn keiner von diesen angegeben wurde) entsprechen, sind gültig.

Ein Stringwert von any bedeutet, dass kein Schrittmaß impliziert wird und jeder Wert erlaubt ist (unter Ausschluss anderer Einschränkungen wie min und max).

Der Standard-Schrittwert für number-Eingaben ist 1, wodurch nur Ganzzahlen eingegeben werden können—es sei denn, die Grundlage für das Schrittmaß ist keine Ganzzahl.

Der number-Eingabetyp sollte nur für inkrementelle Zahlen verwendet werden, insbesondere wenn das Inkrementieren und Dekrementieren über Spinbutton nützlich für die Benutzerfreundlichkeit ist. Der number-Eingabetyp ist nicht geeignet für Werte, die nur aus Zahlen bestehen, aber streng genommen keine Zahl sind, wie z.B. Postleitzahlen in vielen Ländern oder Kreditkartennummern. Für nicht-numerische Eingaben ziehen Sie die Verwendung eines anderen Eingabetyps in Betracht, wie z.B. <input type="tel"> oder eines anderen <input>-Typs mit dem inputmode-Attribut:

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

<input type="number">-Elemente können Ihnen helfen, Ihre Arbeit beim Erstellen der Benutzeroberfläche und der Logik für die Eingabe von Zahlen in ein Formular zu vereinfachen. Wenn Sie eine Nummerneingabe mit dem richtigen type-Wert number erstellen, erhalten Sie eine automatische Validierung, dass der eingegebene Text eine Zahl ist, und in der Regel ein Set von Aufwärts- und Abwärtsschaltflächen, um den Wert zu erhöhen beziehungsweise zu verringern.

Mobile Browser helfen zusätzlich durch die Anzeige einer speziellen Tastatur, die besser für die Eingabe von Zahlen geeignet ist, wenn der Benutzer versucht, einen Wert einzugeben.

In seiner grundlegendsten Form kann eine Nummerneingabe so implementiert werden:

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

Eine Nummerneingabe wird als gültig angesehen, wenn sie leer ist und wenn eine einzelne Zahl eingegeben wird, ist aber in anderen Fällen ungültig. Wenn das required-Attribut verwendet wird, wird die Eingabe nicht mehr als gültig angesehen, wenn sie leer ist.

Manchmal ist es hilfreich, einen kontextabhängigen Hinweis zu bieten, welche Form die Eingabedaten haben sollten. Das kann besonders wichtig sein, wenn das Seitendesign keine Beschreibungen für jedes <input> bietet. Hier kommen Platzhalter ins Spiel. Ein Platzhalter ist ein Wert, der am häufigsten verwendet wird, um einen Hinweis auf das Format zu geben, das die Eingabe haben sollte value. Er wird im Bearbeitungsfeld angezeigt, wenn der value des Elements "" ist. Sobald Daten in das Feld eingegeben werden, verschwindet der Platzhalter; wenn das Feld geleert wird, erscheint der Platzhalter erneut.

Hier haben wir ein number-Eingabefeld mit dem Platzhalter "Multiple of 10". Beachten Sie, wie der Platzhalter verschwindet und wieder erscheint, wenn Sie die Inhalte des Bearbeitungsfeldes manipulieren.

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

Standardmäßig werden die Auf- und Ab-Tasten, die Ihnen zum Erhöhen und Verringern der Zahl bereitgestellt werden, den Wert um 1 erhöhen bzw. verringern. Sie können dies ändern, indem Sie ein step-Attribut bereitstellen, das als seinen Wert eine Zahl angibt, die die Schrittmenge spezifiziert. Unser obiges Beispiel enthält einen Platzhalter, der besagt, dass der Wert ein Vielfaches von 10 sein sollte, daher macht es Sinn, einen step-Wert von 10 hinzuzufügen:

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

In diesem Beispiel werden Sie feststellen, dass die Auf- und Ab-Schritte-Tasten den Wert jeweils um 10 erhöhen und verringern, nicht um 1. Sie können immer noch manuell eine Zahl eingeben, die kein Vielfaches von 10 ist, aber sie wird als ungültig angesehen.

Sie können die Attribute min und max verwenden, um einen Mindest- und Höchstwert anzugeben, den das Feld haben kann. Zum Beispiel geben wir unserem Beispiel ein Minimum von 0 und ein Maximum von 100:

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

In dieser aktualisierten Version sollten Sie feststellen, dass die Auf- und Ab-Schritt-Schaltflächen es Ihnen nicht erlauben, unter 0 oder über 100 zu gehen. Sie können immer noch manuell eine Zahl außerhalb dieser Grenzen eingeben, aber sie wird als ungültig angesehen.

Ein Problem bei Nummerneingaben ist, dass ihre Schrittgröße standardmäßig 1 ist. Wenn Sie versuchen, eine Zahl mit einem Dezimalwert einzugeben (wie "1,0"), wird sie als ungültig angesehen. Wenn Sie einen Wert eingeben möchten, der Dezimalzahlen erfordert, müssen Sie dies im step-Wert widerspiegeln (z.B. step="0.01", um Dezimalstellen auf zwei Dezimalstellen zu erlauben). Hier ist ein einfaches Beispiel:

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

Sehen Sie, dass dieses Beispiel jeden Wert zwischen 0.0 und 10.0 erlaubt, mit Dezimalstellen bis zu zwei Stellen. Zum Beispiel ist "9.52" gültig, aber "9.521" ist es nicht.

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

<input>-Elemente vom Typ number unterstützen keine Form-Attributgrößen wie size. Um die Größe dieser Steuerungen zu ändern, müssen Sie auf CSS zurückgreifen.

Zum Beispiel, um die Breite der Eingabe so anzupassen, dass sie nur so breit ist, wie nötig, um eine dreistellige Zahl einzugeben, können wir unser HTML anpassen, indem wir eine id hinzufügen und unseren Platzhalter kürzen, da das Feld zu schmal für den bisher verwendeten Text sein wird:

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

Dann fügen wir etwas CSS hinzu, um die Breite des Elements mit dem id-Selektor #number zu verkleinern:

#number {
  width: 3em;
}

Das Ergebnis sieht so aus:

Sie können eine Liste von Standardoptionen bereitstellen, aus denen der Benutzer wählen kann, indem Sie das list-Attribut angeben, das als Wert die id eines <datalist> enthält, das wiederum ein <option>-Element pro vorgeschlagenem Wert enthält. Der value jedes option ist der entsprechende vorgeschlagene Wert für das Zahlen-Eingabefeld.

<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>

Wir haben bereits einige Validierungsfunktionen von number-Eingaben erwähnt, aber lassen Sie uns sie nun überprüfen:

• <input type="number">-Elemente invalidieren automatisch jede Eingabe, die keine Zahl ist (oder leer, es sei denn, required ist angegeben).
• Sie können das required-Attribut verwenden, um eine leere Eingabe als ungültig zu machen. (Mit anderen Worten, die Eingabe muss ausgefüllt sein.)
• Sie können das step-Attribut verwenden, um gültige Werte auf einen bestimmten Satz von Schritten zu beschränken (z.B. Vielfache von 10).
• Sie können die Attribute min und max verwenden, um gültige Werte auf untere und obere Grenzen zu beschränken.

Das folgende Beispiel zeigt alle oben genannten Funktionen sowie die Verwendung von etwas CSS, um gültige und ungültige Symbole anzuzeigen, abhängig vom input-Wert:

<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>

Versuchen Sie, das Formular mit verschiedenen ungültigen Werten einzugeben — z.B. keinen Wert; ein Wert unter 0 oder über 100; ein Wert, der kein Vielfaches von 10 ist; oder ein nicht-numerischer Wert — und sehen Sie, wie die Fehlermeldungen des Browsers bei verschiedenen Werten unterscheiden.

Das auf dieses Beispiel angewendete CSS sieht wie folgt aus:

div {
  margin-bottom: 10px;
}

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

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

Hier verwenden wir die :invalid- und :valid-Pseudoklassen, um ein entsprechendes ungültiges oder gültiges Symbol als generierten Inhalt auf dem angrenzenden <span>-Element anzuzeigen, als visuellen Indikator für die Gültigkeit.

Wir setzen es auf ein separates <span>-Element für zusätzliche Flexibilität. Einige Browser zeigen generierten Inhalt nicht sehr effektiv auf einigen Typen von Formulareingaben an. (Lesen Sie zum Beispiel den Abschnitt über die <input type="date">-Validierung.)

<input type="number">-Elemente unterstützen nicht die Verwendung des pattern-Attributs, um eingegebene Werte einem bestimmten Regex-Muster anzupassen.

Der Grund dafür ist, dass Nummerneingaben nicht gültig sind, wenn sie etwas anderes als Zahlen enthalten, und Sie können die minimale und maximale Anzahl gültiger Ziffern mithilfe der Attribute min und max beschränken (wie oben erläutert).

Die implizite Rolle für das <input type="number">-Element ist spinbutton. Wenn spinbutton kein wichtiges Merkmal für Ihre Formularsteuerung ist, ziehen Sie in Betracht, nicht type="number" zu verwenden. Stattdessen verwenden Sie inputmode="numeric" zusammen mit einem pattern-Attribut, das die Zeichen auf Zahlen und zugehörige Zeichen beschränkt. Mit <input type="number"> besteht das Risiko, dass Benutzer versehentlich eine Zahl erhöhen, wenn sie versuchen, etwas anderes zu tun. Zudem gibt es, wenn Nutzer versuchen, etwas einzugeben, das keine Zahl ist, kein explizites Feedback darüber, was sie falsch machen.

Überlegen Sie auch, das autocomplete-Attribut zu verwenden, um Benutzern zu helfen, Formulare schneller und mit weniger Fehlern auszufüllen. Zum Beispiel, um Autofill für ein Postleitzahlenfeld zu aktivieren, setzen Sie autocomplete="postal-code".

Wir haben bereits behandelt, dass die Inkrementgröße standardmäßig 1 ist, und Sie das step-Attribut verwenden können, um dezimale Eingaben zu erlauben. Schauen wir uns das genauer an.

Im folgenden Beispiel ist ein Formular zum Eingeben der Körpergröße des Benutzers. Es akzeptiert standardmäßig eine Größe in Metern, aber Sie können den entsprechenden Button klicken, um das Formular auf Fuß und Zoll umzustellen. Die Eingabe für die Größe in Metern erlaubt Dezimalstellen bis zu zwei Stellen.

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" style="display: none;">
    <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>

Sie werden sehen, dass wir viele der Attribute verwenden, die wir bereits früher im Artikel behandelt haben. Da wir einen Meterwert in Zentimetern akzeptieren möchten, haben wir den step-Wert auf 0.01 gesetzt, sodass Werte wie 1.78 nicht als ungültig angesehen werden. Wir haben auch einen Platzhalter für diese Eingabe bereitgestellt.

Wir haben die Fuß- und Zolleingaben anfänglich mit style="display: none;" versteckt, sodass Meter der Standards-Eingabetyp ist.

Nun zum CSS. Es sieht sehr ähnlich wie das Validierungsstyling aus, das wir zuvor gesehen haben; nichts Bemerkenswertes hier.

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"]');

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 ein Eventlistener zum button hinzugefügt, um den Umschaltmechanismus zu steuern. Dies umfasst das Wechseln der class und des <label> des Buttons sowie das Aktualisieren der Anzeige der beiden Sets von Eingaben, wenn der Button gedrückt wird.

(Beachten Sie, dass wir hier nicht zwischen Meter und Fuß/Zoll konvertieren, was eine echte Webanwendung wohl tun würde.)

• Leitfaden zu HTML-Formularen
• <input>
• <input type="tel">
• Artikel: Warum Gov.UK den Eingabetyp für Zahlen geändert hat