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

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

Wert

Eine Zahl, die den Wert der in das Eingabefeld eingegebenen Zahl 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ätzliche Attribute

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

list

Der Wert des list-Attributs ist die id eines <datalist>-Elements, das sich im gleichen Dokument befindet. Das <datalist> bietet eine Liste vordefinierter Werte zur Benutzerwahl für diese Eingabe an. 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 eingeben.

max

Der maximal akzeptierte Wert für diese Eingabe. Wenn der in das Element eingegebene value diesen Wert überschreitet, scheitert das Element an der Einschränkungsvalidierung. Ist der Wert des max-Attributs keine Zahl, hat das Element keinen Maximalwert.

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

min

Der minimal akzeptierte Wert für diese Eingabe. Wenn der value des Elements darunter liegt, scheitert das Element an der Einschränkungsvalidierung. Wenn für min ein Wert 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.

placeholder

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

Wenn der Inhalt des Steuerelements eine Richtung (LTR oder RTL) hat, aber der Placeholder in der entgegengesetzten Richtung dargestellt werden muss, können Sie die Unicode-bidirectional-Algorithmus-Formatierungszeichen verwenden, um die Richtung innerhalb des Placeholders zu überschreiben; siehe Wie man Unicode-Steuerzeichen für bidi-Text verwendet für weitere Informationen.

readonly

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

step

Das step-Attribut ist eine Zahl, die die Granularität angibt, an die der Wert angepasst werden muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die eine ganze Anzahl von Schritten von der Schrittbasis entfernt sind, sind gültig. Die Schrittbasis ist min, falls angegeben, sonst value oder 0, falls keiner angegeben ist.

Der Standard-Schrittwert für Eingaben vom Typ number ist 1, wobei nur ganze Zahlen eingegeben werden dürfen—es sei denn, die Schrittbasis ist keine ganze Zahl.

Ein String-Wert von any bedeutet, dass kein Schritt impliziert wird und jeder Wert zulässig ist (abgesehen von anderen Einschränkungen, wie etwa min und max).

Verwendung von Zahleneingaben

Der number-Eingabetyp sollte nur für inkrementelle Zahlen verwendet werden, insbesondere wenn das Inkrementieren und Dekrementieren mit Spinbuttons zur Verbesserung der Benutzererfahrung beiträgt. Der number-Eingabetyp ist nicht geeignet für Werte, die zwar nur aus Zahlen bestehen, aber im eigentlichen Sinne keine Zahlen sind, wie beispielsweise Postleitzahlen in vielen Ländern oder Kreditkartennummern. Für nicht-numerische Eingaben sollten Sie einen anderen Eingabetyp in Erwägung ziehen, wie etwa <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 helfen, die Arbeit beim Erstellen der Benutzeroberfläche und der Logik für die Eingabe von Zahlen in ein Formular zu vereinfachen. Wenn Sie eine Zahleneingabe mit dem richtigen type-Wert number erstellen, erhalten Sie eine automatische Validierung, dass der eingegebene Text eine Zahl ist, und üblicherweise eine Reihe von Auf- und Ab-Buttons, um den Wert zu erhöhen oder zu verringern.

Mobile Browser verbessern die Benutzererfahrung weiter, indem sie eine spezielle Tastatur anzeigen, die besser für die Eingabe von Zahlen geeignet ist, wenn der Benutzer versucht, einen Wert einzugeben.

Eine einfache Zahleneingabe

In ihrer einfachsten 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 angesehen, wenn sie leer ist und wenn eine einzelne Zahl eingegeben wird, anderweitig jedoch als ungültig. Wenn das required-Attribut verwendet wird, wird die Eingabe nicht mehr als gültig angesehen, wenn sie leer ist.

Platzhalter

Manchmal ist es hilfreich, einen Kontext-Hinweis darauf zu geben, in welcher Form die Eingabedaten vorliegen sollten. Dies kann besonders wichtig sein, wenn das Seitendesign keine beschreibenden Bezeichnungen für jedes <input> bietet. Hier kommen Placeholders ins Spiel. Ein Placeholder ist ein Wert, der meistens verwendet wird, um einen Hinweis auf das zu erwartende Format der Eingabe zu geben value. Er wird in der Bearbeitungsbox angezeigt, wenn der value des Elements "" ist. Sobald Daten in das Feld eingegeben werden, verschwindet der Placeholder; wenn das Feld geleert wird, erscheint der Placeholder wieder.

Hier haben wir eine number-Eingabe mit dem Placeholder "Mehrfach von 10". Beachten Sie, wie der Placeholder verschwindet und wieder erscheint, während Sie den Inhalt des Bearbeitungsfelds manipulieren.

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

Schritteinstellung steuern

Standardmäßig erhöhen und verringern die für Sie bereitgestellten Auf- und Ab-Buttons den Wert um 1. Sie können dies ändern, indem Sie ein step-Attribut angeben, das einen Wert als Betrag der Schritte akzeptiert. Unser obiges Beispiel enthält einen Placeholder, der besagt, dass der Wert ein Vielfaches von 10 sein sollte, deshalb macht es Sinn, einen step-Wert von 10 hinzuzufügen:

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

In diesem Beispiel sollten Sie feststellen, dass die Schrittpfeile 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 angesehen.

Minimale und maximale Werte angeben

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

<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-Buttons Ihnen nicht erlauben, unter 0 oder über 100 zu gehen. Sie können weiterhin manuell eine Zahl außerhalb dieser Grenzen eingeben, aber sie wird als ungültig angesehen.

Dezimalwerte zulassen

Ein Problem bei Zahleneingaben ist, dass ihre Schrittgröße standardmäßig 1 ist. Wenn Sie versuchen, eine Zahl mit einem Dezimalwert einzugeben, die 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 Bruchteilen eingeben möchten, müssen Sie dies im step-Wert reflektieren (z. B. step="0.01", um Dezimalzahlen bis zwei Dezimalstellen zuzulassen). Hier ein einfaches Beispiel:

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

Sehen Sie, dass dieses Beispiel einen beliebigen Wert zwischen 0.0 und 10.0 zulässt, 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.

Eingabegröße steuern

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

Um zum Beispiel 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 ändern, um eine id hinzuzufügen und unseren Placeholder zu kürzen, da das Feld für den bisher verwendeten Text zu schmal 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 so aus:

Vorgeschlagene Werte anbieten

Sie können eine Liste von Standardoptionen bereitstellen, aus denen der Benutzer auswä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. Jeder option-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>

Validierung

Wir haben bereits einige Validierungsfunktionen von number-Eingaben erwähnt, aber lassen Sie uns diese jetzt zusammenfassen:

• <input type="number">-Elemente machen automatisch jede Eingabe ungültig, die keine Zahl ist (oder leer, es sei denn, required ist spezifiziert).
• Sie können das required-Attribut verwenden, um eine leere Eingabe ungültig zu machen. (Anders ausgedrückt, 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 enthält alle oben genannten Merkmale und verwendet etwas CSS, um gültige und ungültige Symbole je nach input-Wert 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 einzusenden — z. B. ohne Wert, mit einem Wert unter 0 oder über 100, mit einem Wert, der kein Vielfaches von 10 ist, oder einem nicht-numerischen Wert — und sehen Sie, wie sich die Fehlermeldungen des Browsers je nach Fehler 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 platzieren es auf einem separaten <span>-Element für zusätzliche Flexibilität. Einige Browser zeigen generierten Inhalt auf bestimmten Formulareingaben nicht sehr effektiv an. (Lesen Sie zum Beispiel den Abschnitt über die <input type="date">-Validierung.)

Pattern-Validierung

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

Der Grund dafür ist, dass Zahleneingaben nicht gültig sind, wenn sie etwas anderes als Zahlen enthalten, und Sie die minimale und maximale Anzahl gültiger Ziffern mit den min- und max-Attributen einschränken können (wie oben erläutert).

Barrierefreiheit

Die implizite Rolle für das <input type="number">-Element ist spinbutton. Wenn der Spinbutton keine wichtige Funktion für Ihr Formularelement darstellt, sollten Sie erwägen, type="number" nicht zu verwenden. Stattdessen sollten Sie inputmode="numeric" zusammen mit einem pattern-Attribut verwenden, das die Zeichen auf Zahlen und zugehörige Zeichen einschränkt. Mit <input type="number"> besteht das Risiko, dass Benutzer versehentlich eine Zahl erhöhen, während sie versuchen, etwas anderes zu tun. Darüber hinaus gibt es kein explizites Feedback darüber, was Benutzer falsch machen, wenn sie versuchen, etwas anderes als eine Zahl einzugeben.

Berücksichtigen Sie auch die Verwendung des autocomplete-Attributs, um Benutzern zu helfen, Formulare schneller und mit weniger Fehlern auszufüllen. Um beispielsweise die automatische Vervollständigung bei einem Postleitzahlenfeld zu aktivieren, setzen Sie autocomplete="postal-code".

Beispiele

Wir haben bereits behandelt, dass das Inkrement standardmäßig 1 ist, und Sie das step-Attribut verwenden können, um Dezimal-Eingaben zu ermöglichen. Lassen Sie uns einen genaueren Blick darauf werfen.

Im folgenden Beispiel ist ein Formular zur Eingabe der Körpergröße des Benutzers vorhanden. Es ist standardmäßig auf die Eingabe einer Körpergröße in Metern eingestellt, aber Sie können auf die entsprechende Schaltfläche klicken, um das Formular so zu ändern, dass es Fuß und Zoll akzeptiert. Die Eingabe für die Körpergröße in Metern akzeptiert Dezimalstellen bis zu zwei Nachkommastellen.

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 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 Placeholder für diese Eingabe bereitgestellt.

Wir haben die Fuß- und Zolleingaben zu Beginn mit style="display: none;" versteckt, sodass Meter die Standard-Eingabeart 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"]');

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 Ereignislistener zu der button-Steuerung hinzugefügt. Dies beinhaltet das Ändern der class und des <label> der Schaltfläche sowie das Aktualisieren der Anzeige der beiden Eingabemengen, wenn die Schaltfläche gedrückt wird.

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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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