<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, fällt eine number-Eingabe auf den Typ text zurück.

Eine Zahl, die den Wert der in das Eingabefeld eingegebenen Zahl repräsentiert. Sie können einen Standardwert für die Eingabe festlegen, indem Sie eine Zahl in das value Attribut einfügen, wie folgt:

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

Zusätzlich zu 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 gleichen Dokument befindet. Die <datalist> bietet eine Liste von vordefinierten Werten als Vorschläge für diese Eingabe an. Alle in der Liste enthaltenen Werte, die nicht mit dem type kompatibel sind, sind nicht in den vorgeschlagenen Optionen enthalten. 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 weniger als dieser beträgt, 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 Mindestwert.

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 in das Feld eingegeben werden sollen. Es sollte ein Wort oder eine kurze Phrase sein, die den erwarteten Datentyp demonstriert, 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 entgegengesetzter Richtung dargestellt werden muss, können Sie Unicode-Bidirektionalitätsformatierungszeichen verwenden, um die Richtung im Platzhalter außer Kraft zu setzen; siehe Anleitung zur Verwendung von Unicode-Steuerungen für bidi-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 immer noch durch direktes Setzen der HTMLInputElement value Eigenschaft durch JavaScript-Code 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 gleich der Basis für das Übersteigen sind (min falls angegeben, value sonst, und ein geeigneter Standardwert, wenn keiner von diesen bereitgestellt ist) sind gültig.

Ein String-Wert von any bedeutet, dass kein Schritt impliziert ist, und jeder Wert ist erlaubt (vorbehaltlich anderer Einschränkungen, wie etwa min und max).

Der standardmäßige Step-Wert für Eingaben vom Typ number ist 1, was nur das Eingeben von Ganzzahlen erlaubt — es sei denn, die Basis für das Übersteigen ist keine Ganzzahl.

Der number Eingabetyp sollte nur für inkrementelle Zahlen verwendet werden, besonders dann, wenn das Inkrementieren und Dekrementieren mit Spinbuttons zur Benutzererfahrung beitragen. Der number Eingabetyp ist nicht geeignet für Werte, die zufällig nur aus Zahlen bestehen, aber genau genommen keine Zahl sind, wie z.B. Postleitzahlen in vielen Ländern oder Kreditkartennummern. Für nicht-numerische Eingaben sollten Sie einen anderen Eingabetyp in Betracht ziehen, bspw. <input type="tel"> oder eine andere <input> Art 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 zum Eingeben von Zahlen in ein Formular erstellen. Wenn Sie eine Zahleneingabe mit dem richtigen type Wert number erstellen, erhalten Sie eine automatische Validierung, dass der eingegebene Text eine Zahl ist, und in der Regel einen Satz auf- und abwärts gehenden Tasten, um den Wert zu erhöhen oder zu verringern.

Mobile Browser erleichtern das Benutzererlebnis zusätzlich, indem sie eine spezielle Tastatur anzeigen, die besser für die Eingabe von Zahlen geeignet ist, wenn der Benutzer versucht, einen Wert einzugeben.

In der 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 oder 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 erklärenden Labels für jedes <input> bietet. Hier kommen Platzhalter ins Spiel. Ein Platzhalter ist ein Wert, der meistens verwendet wird, um einen Hinweis auf das Format zu geben, das die Eingabe haben sollte. 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 eine number Eingabe mit dem Platzhalter "Multiplikator von 10". Beachten Sie, wie der Platzhalter verschwindet und wieder auftaucht, wenn Sie den Inhalt des Bearbeitungsfeldes ändern.

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

Standardmäßig bewirken die bereitgestellten Aufwärts- und Abwärtstasten, dass der Wert um 1 erhöht oder verringert wird. Sie können dies ändern, indem Sie ein step Attribut bereitstellen, das einen Zahlenwert angibt, der die Schrittgröße festlegt. 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 sollten Sie feststellen, dass die auf- und abwärts gerichteten Schritt-Tasten den Wert jedes Mal um 10 erhöhen oder 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 min und max Attribute verwenden, um einen Mindest- und Höchstwert festzulegen, 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 sollten Sie feststellen, dass die auf- und abwärts gerichteten Schritt-Tasten es 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 mit Zahleneingaben ist, dass die Schrittgröße standardmäßig 1 ist. Wenn Sie versuchen, eine Zahl mit einem Dezimalwert einzugeben, die keine Ganzzahl ist (z.B. "1.1"), wird sie als ungültig angesehen. Beachten Sie, dass Werte wie "1.0" als gültig angesehen werden, da sie numerisch gleichwertig zu Ganzzahlen sind. Wenn Sie Werte mit Bruchteilen eingeben möchten, müssen Sie dies im step Wert reflektieren (z.B. step="0.01", um Dezimalstellen auf zwei Dezimalstellen zuzulassen). Hier ist ein einfaches Beispiel:

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

Sie sehen, dass dieses Beispiel einen beliebigen Wert zwischen 0.0 und 10.0 mit Dezimalstellen bis zu zwei Stellen zulässt. Zum Beispiel ist "9.52" gültig, aber "9.521" 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 Formattribute wie size, um die Größe zu ändern. Sie müssen auf CSS zurückgreifen, um die Größe dieser Steuerelemente zu ändern.

Um beispielsweise die Breite der Eingabe so anzupassen, dass sie nur so breit ist, wie es nötig ist, um eine dreistellige Zahl einzugeben, können wir unser HTML so ändern, dass ein id hinzugefügt wird und unseren Platzhalter verkürzen, da das Feld zu schmal für den bisher verwendeten Text ist:

<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 folgendermaßen aus:

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

<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 für number Eingaben erwähnt, aber lassen Sie uns diese nun überprüfen:

• <input type="number"> Elemente machen automatisch jeden Eintrag ungültig, der keine Zahl ist (oder leer ist, 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 Menge von Schritten zu beschränken (z.B. Vielfache von 10).
• Sie können die min und max Attribute verwenden, um gültige Werte auf untere und obere Grenzen zu beschränken.

Das folgende Beispiel zeigt alle oben genannten Funktionen sowie die Verwendung einiger CSS, um je nach dem input Wert 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 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 sich die Fehlermeldungen des Browsers mit den verschiedenen Optionen 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 für die Gültigkeit.

Wir fügen es zu einem separaten <span> Element für zusätzliche Flexibilität hinzu. Einige Browser zeigen generierten Inhalt nicht sehr effektiv auf einigen Typen von Formular-Eingaben an. (Lesen Sie zum Beispiel den Abschnitt über <input type="date"> Validierung.)

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

Die Begründung dafür ist, dass Zahleneingaben nicht gültig sind, wenn sie etwas anderes als Zahlen enthalten, und Sie können die minimale und maximale Anzahl an gültigen Ziffern mit den min und max Attributen beschränken (wie oben erklärt).

Die implizite Rolle für das <input type="number"> Element ist spinbutton. Wenn die Spinbutton-Funktion kein wichtiger Bestandteil Ihrer Formularsteuerung ist, sollten Sie nicht type="number" verwenden. Stattdessen sollten 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 die Gefahr, dass Benutzer versehentlich eine Zahl erhöhen, wenn sie etwas anderes tun wollen. Darüber hinaus gibt es keine expliziten Feedbacks, wenn Benutzer versuchen, etwas anderes als eine Zahl einzugeben.

Überlegen Sie auch, das autocomplete Attribut zu nutzen, um Benutzern zu helfen, Formulare schneller und mit weniger Fehlern auszufüllen. Beispielsweise können Sie für ein Postleitzahlenfeld autocomplete="postal-code" setzen, um die Autovervollständigung zu aktivieren.

Wir haben bereits erwähnt, dass die Inkrementgröße standardmäßig 1 ist, und Sie das step Attribut verwenden können, um Dezimalwerte zuzulassen. Schauen wir genauer hin.

Im folgenden Beispiel ist ein Formular zur Eingabe der Körpergröße des Benutzers. Es akzeptiert standardmäßig eine Größe in Metern, aber Sie können die entsprechende Schaltfläche drücken, um das Formular zu ändern, sodass es stattdessen Fuß und Zoll akzeptiert. Die Eingabe für die Größe in Metern akzeptiert Dezimalstellen bis zwei Stellen.

Das HTML 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 sehen, dass wir viele der Attribute verwenden, die wir bereits früher im Artikel untersucht haben. Da wir eine Metergröße in Zentimetern akzeptieren wollen, 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 Zoll-Eingaben zunächst mit style="display: none;" ausgeblendet, sodass Meter der Standard-Eingabetyp ist.

Nun zum CSS. Dies sieht sehr ähnlich zu der Validierungsstyling aus, die wir vorher 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"]');

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 = "";
  }
});

Nachdem wir einige Variablen deklariert haben, wird ein Event-Listener zur Steuerung des Umschaltmechanismus zu der button hinzugefügt. Dies umfasst das Ändern der Button-class und <label>, sowie das Aktualisieren der Anzeige-Werte der beiden Eingabe-Sets beim Drücken der Button.

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

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