<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 ein number-Eingabefeld auf den Typ text zurück.

Eine Zahl, die den in das Eingabefeld eingegebenen Wert darstellt. Sie können einen Standardwert für das Eingabefeld festlegen, indem Sie eine Zahl innerhalb des value-Attributs einfügen, 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> stellt eine Liste vordefinierter Werte bereit, die dem Benutzer für diese Eingabe vorgeschlagen werden sollen. Alle Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht in die vorgeschlagenen Optionen aufgenommen. Die angegebenen Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.

Der maximal akzeptierte Wert für diese Eingabe. Überschreitet der in das Element eingegebene value diesen Wert, schlägt das Element in der Einschränkungsvalidierung 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 minimal akzeptierte Wert für diese Eingabe. Wenn der value des Elements kleiner ist als dieser Wert, schlägt das Element in der Einschränkungsvalidierung fehl. Wenn ein nicht gültiger Zahlenwert für min angegeben wird, 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 im Feld erwartet werden. Es sollte ein Wort oder eine kurze Phrase sein, die den erwarteten Datentyp demonstriert, anstatt eine erklärende Botschaft. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt des Steuerungselements eine Richtung (LTR oder RTL) hat, der Platzhalter jedoch in der entgegengesetzten Richtung dargestellt werden muss, können Sie die Unicode-Bidirektional-Algorithmus-Formatierungszeichen verwenden, um die Richtung im Platzhalter zu überschreiben; siehe Anleitung zur Verwendung von Unicode-Steuerungen für bidi-Text für weitere Informationen.

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

Das step-Attribut ist eine Zahl, die die Granularität spezifiziert, der der Wert entsprechen muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die gleich dem Basiswert für das Schrittdesign (falls angegeben, value ansonsten, und ein entsprechender Standardwert, wenn keiner dieser Werte bereitgestellt wird) sind gültig.

Ein Zeichenfolgenwert von any bedeutet, dass kein Schritt angedeutet wird und jeder Wert zulässig ist (vorbehaltlich anderer Einschränkungen, wie min und max).

Der Standardwert für number-Eingaben ist 1, wodurch nur ganze Zahlen zulässig sind—es sei denn, die Schrittbasis ist keine ganze Zahl.

Der number-Eingabetyp sollte nur für inkrementelle Zahlen verwendet werden, insbesondere dann, wenn Spinbutton-Inkrementierung und -Dekrementierung zur Benutzererfahrung beitragen. Der number-Eingabetyp ist nicht geeignet für Werte, die zufällig nur aus Zahlen bestehen, aber streng genommen keine Zahlen sind, wie z.B. Postleitzahlen in vielen Ländern oder Kreditkartennummern. Für nicht-numerische Eingaben sollten Sie bei Bedarf einen anderen Eingabetyp verwenden, wie 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 helfen, Ihre Arbeit beim Erstellen der Benutzeroberfläche und 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 in der Regel ein Set von Hoch- und Runtertasten zur Erhöhung und Verminderung des Wertes.

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

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 wurde, aber ansonsten ungültig ist. 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 darauf zu geben, in welcher Form die Eingabedaten vorliegen sollen. Dies kann besonders wichtig sein, wenn das Seitendesign keine beschreibenden Beschriftungen 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 vorliegen soll. Er wird innerhalb der Bearbeitungsbox angezeigt, wenn der value des Elements "" ist. Sobald Daten in die Box eingegeben werden, verschwindet der Platzhalter; wenn die Box geleert wird, erscheint der Platzhalter wieder.

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

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

Standardmäßig schrittweise die bereitgestellten Hoch- und Runtertasten den Wert um 1 nach oben oder unten. Sie können dies ändern, indem Sie ein step-Attribut bereitstellen, das als Wert eine Zahl angibt, die die Schrittweite angibt. Unser obiges Beispiel enthält einen Platzhalter, der besagt, dass der Wert ein Vielfaches von 10 sein sollte, also 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 Hoch- und Runterschrittpfeile den Wert jedes Mal 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 min- und max-Attribute 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 Hoch- und Runtertasten nicht unter 0 oder über 100 gehen. Sie können immer noch manuell eine Zahl außerhalb dieser Grenzen eingeben, aber sie wird als ungültig angesehen.

Ein Problem bei Zahleneingaben 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 betrachtet. 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 Dezimalstellen auf zwei Nachkommastellen zuzulassen). Hier ist ein einfaches Beispiel:

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

Sehen Sie, dass dieses Beispiel alle Werte zwischen 0.0 und 10.0 zulässt, mit Dezimalstellen auf zwei Stellen. 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 Form-Sizing-Attribute wie size. Sie müssen auf CSS zurückgreifen, um die Größe dieser Steuerelemente zu ändern.

Zum Beispiel, um 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 aufzunehmen und unseren Platzhalter zu kürzen, da das Feld für den 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 Selektor #number zu verringern:

#number {
  width: 3em;
}

Das Ergebnis sieht so aus:

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

<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 schon einige Validierungsfunktionen von number-Eingaben erwähnt. Lassen Sie uns diese nun noch einmal zusammenfassen:

• <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 einen bestimmten Satz 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 und verwendet zusätzlich etwas CSS, um je nach Wert der input ein gültiges oder ungültiges Icon 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 einzugeben – 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 ändern.

Das auf dieses Beispiel angewandte 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-Pseudoklassen, um ein entsprechendes ungültiges oder gültiges Icon als erzeugten Inhalt auf dem angrenzenden <span>-Element anzuzeigen, als visueller Indikator für Gültigkeit.

Wir setzen es auf ein separates <span>-Element für mehr Flexibilität. Einige Browser zeigen generierten Inhalt nicht sehr effektiv auf einigen Typen von Formulareingaben an. (Lesen Sie beispielsweise den Abschnitt zur <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 Zahleneingaben nicht gültig sind, wenn sie etwas anderes als Zahlen enthalten, und Sie können die Mindest- und Höchstanzahl gültiger Ziffern mithilfe der min- und max-Attribute (wie oben erklärt) beschränken.

Die implizite Rolle für das <input type="number">-Element ist spinbutton. Wenn das Spinbutton keine wichtige Funktion für Ihre Form-Steuerung ist, sollten Sie in Erwägung ziehen, type="number" nicht zu verwenden. Verwenden Sie stattdessen inputmode="numeric" zusammen mit einem pattern-Attribut, das die Zeichen auf Zahlen und zugehörige Zeichen beschränkt. Bei <input type="number"> besteht das Risiko, dass Benutzer versehentlich eine Zahl inkrementieren, wenn sie etwas anderes tun wollen. Außerdem erhalten Benutzer, die versuchen, etwas anderes als eine Zahl einzugeben, kein klares Feedback, was sie falsch machen.

Erwägen Sie auch die Verwendung des autocomplete-Attributs, um Benutzern zu helfen, Formulare schneller und mit weniger Fehlern auszufüllen. Zum Beispiel, um die Autofill-Funktion auf einem Postleitzahlenfeld zu aktivieren, setzen Sie autocomplete="postal-code".

Wir haben bereits behandelt, dass der Inkrementstandard 1 ist und Sie das step-Attribut verwenden können, um dezimale Eingaben zuzulassen. Lassen Sie uns das genauer betrachten.

Im folgenden Beispiel ist ein Formular zur Eingabe der Körpergröße des Benutzers. Es ist standardmäßig auf die Eingabe einer Größe in Metern eingestellt, aber Sie können den entsprechenden Button klicken, um das Formular zu ändern, damit es Fuß und Zoll akzeptiert. Die Eingabe für die Größe in Metern akzeptiert 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 betrachtet haben. Da wir einen Meterwert 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 zunächst mit style="display: none;" versteckt, sodass Meter der Standard-Eingabetyp ist.

Nun zum CSS. Dies sieht dem Validierungsstyling sehr ähnlich, 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 = "";
  }
});

Nachdem einige Variablen deklariert wurden, wird ein Event-Listener auf den button hinzugefügt, um den Umschaltmechanismus zu steuern. Dies beinhaltet das Ändern der class und des <label> des Buttons und das Aktualisieren der Anzeige der beiden Eingabesets, wenn der Button gedrückt wird.

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

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