<input type="number">

In Browsern, die keine Eingaben vom Typ number unterstützen, fällt ein number-Eingabefeld auf den Typ text zurück.

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

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

Neben den allgemein von allen <input>-Typen unterstützten Attributen 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. Der <datalist> stellt eine Liste vordefinierter Werte bereit, die dem Benutzer für diese Eingabe vorgeschlagen werden. Werte in der Liste, die nicht mit dem type kompatibel sind, werden in den vorgeschlagenen Optionen nicht aufgenommen. Die bereitgestellten Werte sind Vorschläge und keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.

Der maximal zu akzeptierende Wert für diese Eingabe. Wenn der in das Element eingegebene value diesen übersteigt, schlägt die Constraint-Validierung 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 minimal zu akzeptierende Wert für diese Eingabe. Wenn der value des Elements kleiner ist als dieser, schlägt die Constraint-Validierung fehl. Wenn ein Wert für min angegeben wird, der keine gültige Zahl ist, hat die Eingabe keinen minimalen Wert.

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

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

Wenn der Inhalt der Steuerung eine Richtung hat (LTR oder RTL), der Platzhalter jedoch in der entgegengesetzten Richtung angezeigt werden muss, können Sie Zeichen des Unicode-Bidirektionalitätsalgorithmus verwenden, um die Richtung innerhalb des Platzhalters außer Kraft zu setzen; siehe Anleitung zur Verwendung von Unicode-Steuerzeichen für bidirektionalen Text für weitere Informationen.

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

Das step-Attribut ist eine Zahl, die die Granularität angibt, der der Wert entsprechen muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die der Grundlage für Schritte (min, falls angegeben, value andernfalls, und einem entsprechendem Standardwert, falls keiner der beiden angegeben ist) entsprechen, sind gültig.

Ein Zeichenfolgenwert von any bedeutet, dass keine Schritte impliziert sind und jeder Wert erlaubt ist (abgesehen von anderen Einschränkungen, wie min und max).

Der Standardschrittwert für number-Eingaben ist 1, das heißt, es können nur ganze Zahlen eingegeben werden—es sei denn, die Basis für die Schritte ist keine ganze Zahl.

Der Eingabetyp number sollte nur für inkrementelle Zahlen verwendet werden, insbesondere wenn das Erhöhen und Verringern der Schaltflächen zur Verbesserung der Benutzererfahrung beiträgt. Der Eingabetyp number ist nicht geeignet für Werte, die zufällig nur aus Zahlen bestehen, aber streng genommen keine Zahl sind, wie Postleitzahlen in vielen Ländern oder Kreditkartennummern. Für nicht numerische Eingaben ziehen Sie bitte einen anderen Eingabetyp in Betracht, z.B. <input type="tel"> oder einen anderen <input>-Typ mit dem inputmode Attribut:

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

<input type="number">-Elemente können Ihnen die Arbeit erleichtern, wenn Sie die Benutzeroberfläche und Logik für die Eingabe von Zahlen in ein Formular erstellen. 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 Paar Auf- und Abwärts-Schaltflächen, um den Wert zu erhöhen und zu verringern.

Mobile Browser helfen weiter bei der Benutzererfahrung, indem sie eine spezielle Tastatur anzeigen, die besser geeignet ist, um Nummern einzugeben, wenn der Benutzer versucht, einen Wert einzugeben.

In ihrer grundlegendsten Form kann eine Zahleneingabe 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 Zahleneingabe wird als gültig betrachtet, wenn sie leer ist und wenn eine einzelne Zahl eingegeben wird, andernfalls ist sie 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 kontextbezogenen Hinweis zu geben, in welcher Form die Eingabedaten vorliegen sollten. Dies kann besonders wichtig sein, wenn das Seitendesign keine beschreibenden Labels für jede <input>-Eingabe 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 value annehmen sollte. Er wird im Bearbeitungsfeld angezeigt, wenn der value des Elements "" ist. Sobald Daten in das Feld eingegeben werden, verschwindet der Platzhalter; wird das Feld geleert, erscheint der Platzhalter erneut.

Hier haben wir eine number-Eingabe mit dem Platzhalter "Mehrfaches von 10". Beachten Sie, wie der Platzhalter verschwindet und wieder erscheint, wenn Sie den Inhalt des Bearbeitungsfelds verändern.

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

Standardmäßig werden die auf und abwärts gewechselten Schaltflächen zur Erhöhung und Verringerung der Nummer den Wert um 1 ändern. Sie können dies ändern, indem Sie ein step-Attribut angeben, das als Wert eine Zahl hat, die die Schrittgröße angibt. Unser obiges Beispiel enthält einen Platzhalter, der besagt, dass der Wert ein Vielfaches von 10 sein sollte, sodass es sinnvoll ist, einen step-Wert von 10 hinzuzufügen:

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

In diesem Beispiel werden die auf und abwärts wechselnden Schaltflächen den Wert um jeweils 10 erhöhen und verringern, nicht um 1. Sie können aber manuell eine Zahl eingeben, die kein Vielfaches von 10 ist, aber sie wird als ungültig betrachtet.

Sie können die min und max-Attribute verwenden, um einen Mindest- und Höchstwert anzugeben, den das Feld haben kann. Beispielsweise 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 werden die Schritte-Pfeiltasten nicht unter 0 oder über 100 hinausgehen. Sie können weiterhin manuell eine Zahl eingeben, die außerhalb dieser Grenzen liegt, aber sie wird als ungültig betrachtet.

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

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

In diesem Beispiel ist jeder Wert zwischen 0.0 und 10.0 zulässig, mit Dezimalstellen auf 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 Formulargrößenattribute wie size. Sie müssen auf CSS zurückgreifen, um die Größe dieser Steuerelemente zu ändern.

Wenn Sie beispielsweise die Breite der Eingabe so anpassen möchten, dass sie nur so breit ist, dass eine dreistellige Zahl eingegeben werden kann, können wir unser HTML ändern, um eine id einzuschließen, und unseren Platzhalter verkürzen, da das Feld für den von uns bisher verwendeten Text zu schmal 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 verringern:

#number {
  width: 3em;
}

Das Ergebnis sieht dann so aus:

Sie können eine Liste mit Standardoptionen bereitstellen, aus denen der Benutzer auswählen kann, indem Sie das list-Attribut angeben, das den Wert der id eines <datalist> enthält, der wiederum ein <option>-Element pro vorgeschlagener Wert enthält. Jedes option-Elemente value 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 eine Reihe von Validierungsfunktionen von number-Eingaben erwähnt, aber lassen Sie uns diese nun noch einmal durchgehen:

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

Das folgende Beispiel zeigt alle oben genannten Funktionen sowie die Verwendung einiger CSS, um je nach dem Wert der input-Eingabe gültige und ungültige Symbole 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>

Versuchen Sie, das Formular mit verschiedenen ungültigen Werten zu übermitteln — zum Beispiel ohne Wert, einem Wert unter 0 oder über 100, einem Wert, der kein Vielfaches von 10 ist, oder einem nicht-numerischen Wert — und sehen Sie, wie sich die vom Browser gelieferten Fehlermeldungen unterschiedlicher Werte unterscheiden.

Das auf dieses Beispiel angewendete CSS ist wie folgt:

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-Pseudo-Klassen, um ein entsprechendes ungültiges oder gültiges Symbol als generierten Inhalt auf dem angrenzenden <span>-Element anzuzeigen, als visuellen Indikator der Gültigkeit.

Wir haben es auf ein separates <span>-Element gesetzt, um mehr Flexibilität zu erhalten. Einige Browser zeigen generierten Inhalt auf einigen Arten von Formulareingaben nicht sehr effektiv an. (Lesen Sie zum Beispiel den Abschnitt zur <input type="date">-Validierung).

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

Der Grund dafür ist, dass Zahleneingaben ungültig sind, wenn sie außer Zahlen etwas enthalten, und Sie die Mindest- und Höchstzahl gültiger Ziffern mit den min- und max-Attributen (wie oben erklärt) einschränken können.

Die implizite Rolle für das <input type="number">-Element ist spinbutton. Wenn das Spinbutton keine wichtige Funktion für Ihr Formularelement ist, ziehen Sie in Betracht, nicht type="number" zu verwenden. Verwenden Sie stattdessen inputmode="numeric" zusammen mit einem pattern-Attribut, das die Zeichen auf Zahlen und zugehörige Zeichen begrenzt. Bei <input type="number"> besteht das Risiko, dass Benutzer versehentlich eine Zahl erhöhen, wenn sie etwas anderes tun wollen. Wenn Benutzer versuchen, etwas einzugeben, das keine Zahl ist, gibt es kein direktes Feedback darüber, was sie falsch machen.

Erwägen Sie auch, das autocomplete-Attribut zu verwenden, um Benutzern zu helfen, Formulare schneller und mit weniger Fehlern auszufüllen. Um beispielsweise die automatische Befüllung eines PLZ-Feldes zu aktivieren, setzen Sie das Attribut auf autocomplete="postal-code".

Wir haben bereits behandelt, dass der Standardinkrement 1 ist und Sie das step-Attribut verwenden können, um Dezimalwerte zuzulassen. Schauen wir uns das etwas genauer an.

Im folgenden Beispiel befindet sich ein Formular zur Eingabe der Körpergröße des Benutzers. Es ist standardmäßig auf die Eingabe einer Größe in Metern ausgelegt, aber Sie können den entsprechenden Button klicken, um das Formular auf die Eingabe in Fuß und Zoll umzuschalten. Die Eingabe für die Höhe 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 sehen, dass wir viele der Attribute verwenden, die wir im Artikel zuvor betrachtet 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 zunächst mit style="display: none;" versteckt, sodass Meter der Standard-Eingabetyp ist.

Nun zum CSS. Dies sieht sehr ähnlich aus wie die Validierungsstile, die 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 Ereignislistener zu dem button hinzugefügt, um den Umschaltmechanismus zu steuern. Dies ist ziemlich einfach und beinhaltet hauptsächlich das Ändern der class und des <label> des Buttons sowie das Aktualisieren der Anzeigewerte der beiden Eingabemengen, wenn der Button gedrückt wird.

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

• HTML-Formulare Leitfaden
• <input>
• <input type="tel">
• Kompatibilität von CSS-Eigenschaften
• Artikel: Warum Gov.UK den Eingabetyp für Zahlen geändert hat