<input type="number">

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

In Browsern, die Eingaben vom Typ number nicht unterstützen, wird ein number-Input auf den Typ text zurückgesetzt.

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

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

Zusätzlich zu den von allen <input>-Typen üblicherweise 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> bietet eine Liste vordefinierter Werte, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle Werte in der Liste, die nicht mit dem type kompatibel 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 angeben.

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

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 als dieser ist, schlägt die Einschränkungsvalidierung des Elements fehl. Wenn ein Wert für min angegeben wird, der keine gültige Zahl ist, hat die Eingabe keinen Minimalwert.

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

Das placeholder-Attribut ist ein String, der dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Informationen in dem Feld erwartet werden. Es sollte ein Wort oder ein kurzer Satz sein, der den erwarteten Datentyp zeigt, anstatt einer erklärenden Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt der Steuerung eine Richtung (LTR oder RTL) hat, der Platzhalter jedoch in der entgegengesetzten Richtung dargestellt werden muss, können Sie die Unicode-Bidi-Algo-Formatierungszeichen verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; Weitere Informationen finden Sie unter Wie man Unicode-Steuerelemente für Bidirektionalen Text verwendet.

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

Das step-Attribut ist eine Zahl, die die Granularität angibt, an die sich der Wert halten muss, oder der spezielle Wert any, der unten beschrieben ist. Nur Werte, die gleich dem Ausgangspunkt für das Stufen (min falls angegeben, value ansonsten und ein entsprechender Standardwert, wenn keiner von diesen angegeben ist) sind gültig.

Ein String-Wert von any bedeutet, dass keine Stufung impliziert wird und jeder Wert erlaubt ist (abgesehen von anderen Einschränkungen wie min und max).

Der Standard-Stufenwert für number-Eingaben ist 1, sodass nur ganze Zahlen eingegeben werden können—es sei denn, der Stufenbasiswert ist keine ganze Zahl.

Der number-Input-Typ sollte nur für inkrementelle Zahlen verwendet werden, insbesondere wenn das inkrementieren und dekrementieren mit Schaltflächen die Benutzererfahrung verbessert. Der number-Input-Typ ist nicht geeignet für Werte, die zufällig nur aus Zahlen bestehen, aber eigentlich keine Nummer sind, wie Postleitzahlen in vielen Ländern oder Kreditkartennummern. Für nicht-numerische Eingaben sollten Sie einen anderen Input-Typ in Betracht ziehen, wie zum Beispiel <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 Ihre Arbeit vereinfachen, 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 erstellen, erhalten Sie eine automatische Validierung, dass der eingegebene Text eine Zahl ist, und normalerweise ein Set an Aufwärts- und Abwärtspfeil-Schaltflächen, um den Wert zu erhöhen oder zu verringern.

Mobile Browser helfen zusätzlich bei der Benutzererfahrung, indem sie eine spezielle Tastatur anzeigen, die besser zum Eingeben von Zahlen geeignet ist, wenn der Benutzer versucht, einen Wert einzugeben.

In ihrer einfachsten Form kann eine Nummerneingabe wie folgt 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, 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 erscheinen sollen. Dies kann besonders wichtig sein, wenn das Seitendesign keine beschreibenden Labels für jedes <input> bietet. Hier kommen Platzhalter ins Spiel. Ein Platzhalter ist ein Wert, der am häufigsten verwendet wird, um einen Hinweis darauf zu geben, in welchem Format die Eingabe value sein sollte. Er wird innerhalb des Eingabefeldes angezeigt, wenn der value des Elements "" ist. Sobald Daten in das Feld eingegeben werden, verschwindet der Platzhalter; und wenn das Feld geleert wird, 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, während Sie den Inhalt des Eingabefeldes manipulieren.

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

Standardmäßig erhöhen und verringern die bereitgestellten Auf- und Abwärtspfeil-Schaltflächen den Wert um 1. Sie können dies ändern, indem Sie ein step-Attribut angeben, das als 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 ist es sinnvoll, einen step-Wert von 10 hinzuzufügen:

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

In diesem Beispiel sollten Sie feststellen, dass die Auf- und Abwärtspfeile den Wert jedes Mal um 10 erhöhen und verringern, nicht um 1. Sie können weiterhin 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 minimalen und maximalen Wert anzugeben, den das Feld haben kann. Geben wir unserem Beispiel einen Mindestwert von 0 und einen Höchstwert 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 Abwärtspfeile nicht zulassen, dass Sie unter 0 oder über 100 gehen. Sie können weiterhin manuell eine Zahl eingeben, die außerhalb dieser Grenzen liegt, aber sie wird als ungültig betrachtet.

Ein Problem mit Nummerneingaben ist, dass ihre Schrittweite standardmäßig 1 ist. Wenn Sie versuchen, eine Zahl mit einem Dezimalwert einzugeben, der keine ganze Zahl ist (wie "1.1"), wird sie als ungültig angesehen. Beachten Sie, dass Werte wie "1.0" als gültig angesehen werden, da sie numerisch äquivalent zu ganzen Zahlen sind. Wenn Sie Werte mit Dezimalstellen eingeben möchten, müssen Sie dies im step-Wert widerspiegeln (zum Beispiel step="0.01" um Dezimalstellen bis auf zwei Stellen zuzulassen). 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 Dezimalen bis 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 Formen von Größenattributen wie size. Sie müssen auf CSS zurückgreifen, um die Größe dieser Steuerungen zu ändern.

Zum Beispiel, um die Breite der Eingabe nur so weit anzupassen, dass sie eine dreistellige Zahl zulässt, können wir unser HTML ändern, um eine id hinzuzufügen und unseren Platzhalter zu verkürzen, da das Feld zu schmal für den bisher verwendeten Text 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 verengen:

#number {
  width: 3em;
}

Das Ergebnis sieht so aus:

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

<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 Validierungsmerkmalen von number-Eingaben erwähnt, aber lassen Sie uns sie jetzt zusammenfassen:

• <input type="number">-Elemente machen jeden Eintrag ungültig, der keine Zahl ist (oder leer, es sei denn, required ist angegeben).
• Sie können das required-Attribut verwenden, um einen leeren Eintrag 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 Schriftsätze zu beschränken (zum Beispiel Vielfache von 10).
• Sie können die min- und max-Attribute verwenden, um gültige Werte auf untere und obere Schranken zu beschränken.

Das folgende Beispiel zeigt alle oben genannten Funktionen sowie die Verwendung von etwas CSS, um gültige und ungültige Symbole basierend auf dem Wert des input als generierten Inhalt auf dem benachbarten <span>-Element anzuzeigen, als visuellen Indikator für die Gültigkeit.

<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 abzusenden — z.B. kein 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, die der Browser Ihnen gibt, bei unterschiedlichen Werttypen abweichen.

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 benutzen wir die :invalid und :valid Pseudoklassen, um ein entsprechendes ungültiges oder gültiges Symbol als generierten Inhalt auf dem benachbarten <span>-Element anzuzeigen, als visuellen Hinweis auf die Gültigkeit.

Wir bringen es auf einem separaten <span>-Element an, um mehr Flexibilität zu bieten. Einige Browser zeigen generierte Inhalte auf einigen Typen von Formulareingaben nicht sehr effektiv an. (Lesen Sie zum Beispiel den Abschnitt zum <input type="date">-Validation.)

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

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

Die implizite Rolle für das <input type="number">-Element ist spinbutton. Wenn das Spinbutton für Ihr Formularsteuerungselement keine wichtige Funktion ist, ziehen Sie in Betracht, nicht type="number" zu verwenden. Stattdessen können Sie inputmode="numeric" zusammen mit einem pattern-Attribut verwenden, 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. Außerdem gibt es keine explizite Rückmeldung darüber, was sie falsch machen, wenn sie versuchen, etwas einzugeben, das keine Zahl ist.

Ziehen Sie auch die Verwendung des autocomplete-Attributs in Betracht, um Benutzern zu helfen, Formulare schneller und mit weniger Fehlern auszufüllen. Zum Beispiel, um das automatische Ausfüllen eines Feldes für die Postleitzahl zu aktivieren, setzen Sie autocomplete="postal-code".

Wir haben bereits erwähnt, dass der Standard-inkrement ein 1 ist, und Sie können das step-Attribut verwenden, um Dezimaleingaben zuzulassen. Sehen wir uns das genauer an.

Im folgenden Beispiel handelt es sich um ein Formular zur Eingabe der Größe des Benutzers. Es akzeptiert standardmäßig einen Wert in Metern, Sie können jedoch den entsprechenden Knopf betätigen, um das Formular anzupassen, damit es stattdessen die Eingabe in Fuß und Zoll akzeptiert. Die Eingabe für die Höhe in Metern akzeptiert Dezimalstellen bis zu zwei Stellen.

Der HTML-Code sieht folgendermaßen 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>

Sie werden feststellen, dass wir viele der Attribute verwenden, die wir bereits früher im Artikel angesehen haben. Da wir eine Meterhöhe in Zentimetern akzeptieren möchten, haben wir den step-Wert auf 0.01 gesetzt, damit 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 initial durch style="display: none;" verborgen, sodass die Eingabe in Metern der Standard-Eingabetyp ist.

Nun zum CSS. Dies sieht der Validierungsstil, den wir zuvor gesehen haben, sehr ähnlich; 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"]');

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 button ein Event-Listener hinzugefügt, um den Umschaltmechanismus zu steuern. Dies beinhaltet das Ändern der class des Buttons und das <label>, sowie das Aktualisieren der Display-Werte der beiden Eingabesets, wenn der Knopf gedrückt wird.

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

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