<input>-Elemente des Typsnumber werden verwendet, um Benutzern die Eingabe einer Zahl zu ermöglichen. Sie beinhalten eine eingebaute Validierung, um nicht-numerische Eingaben abzulehnen.

Der Browser kann entscheiden, Stepper-Pfeile bereitzustellen, die es dem Benutzer ermöglichen, den Wert mit der Maus oder durch Tippen mit einem Fingerspitzenklick zu erhöhen oder zu verringern.

Probieren Sie es aus

<label for="tentacles">Number of tentacles (10-100):</label><input type="number" 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 des Typsnumber nicht unterstützen, wird einnumber-Eingabefeld auf den Typtext zurückgesetzt.

Wert

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 desvalue-Attributs einschließen, wie folgt:

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

Zusätzliche Attribute

Zusätzlich zu den von allen<input>-Typen unterstützten Attributen unterstützen Eingaben des Typsnumber folgende Attribute.

list

Der Wert des list-Attributs ist dieid eines<datalist>-Elements, das sich im selben Dokument befindet. Das<datalist> bietet eine Liste von vordefinierten Werten, die dem Benutzer für diese Eingabe vorgeschlagen werden können. Alle Werte in der Liste, die mit demtype nicht kompatibel sind, werden in den vorgeschlagenen Optionen nicht berücksichtigt. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.

max

Der maximale akzeptierte Wert für diese Eingabe. Wenn der in das Element eingegebenevalue diesen überschreitet, schlägt das Element bei derEinschrä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.

min

Der minimale akzeptierte Wert für diese Eingabe. Wenn dervalue des Elements kleiner ist als dieser, schlägt das Element bei derEinschränkungsvalidierung fehl. Wenn für min ein Wert angegeben wird, der keine gültige Zahl ist, hat das Eingabefeld keinen Minimalwert.

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

placeholder

Dasplaceholder-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 die erwartete Art von Daten veranschaulicht, anstatt einer erklärenden Nachricht. Der Text darf keine Wagenrücklaufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt des Steuerungselements eine Richtungsgleichheit (LTR oderRTL) aufweist, der Platzhalter jedoch in der entgegengesetzten Richtung angezeigt werden muss, können Sie Unicode-Bidi-Algorithmus-Formatierungszeichen verwenden, um die Richtung im Platzhalter zu überschreiben; sieheAnleitung zur Verwendung von Unicode-Kontrollelementen für Bidi-Text für weitere Informationen.

readonly

Ein Boolesches Attribut, das, falls vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Seinvalue kann jedoch weiterhin direkt durch JavaScript-Code durch Setzen derHTMLInputElementvalue-Eigenschaft geändert werden.

step

Dasstep-Attribut ist eine Zahl, die die Granularität festlegt, die der Wert einhalten muss, oder der spezielle Wertany, der unten beschrieben wird. Nur Werte, die eine ganze Zahl von Schritten vom Schrittbasiswert entfernt sind, sind gültig. Der Schrittbasiswert istmin, falls angegeben, sonstvalue oder0, wenn keiner angegeben ist.

Der Standard-Schrittwert fürnumber-Eingaben ist1, was nur ganzzahlige Eingaben zulässt - es sei denn, die Schrittbasis ist keine ganze Zahl.

Ein Zeichenfolgewert vonany bedeutet, dass kein Schritt gefordert wird und jeder Wert erlaubt ist (abgesehen von anderen Einschränkungen, wiemin undmax).

Verwendung von Nummereingaben

Dernumber Eingabetyp sollte nur für inkrementelle Zahlen verwendet werden, insbesondere wenn das Inkrementieren und Dekrementieren durch Spinbutton hilfreich für die Benutzererfahrung ist. Dernumber Eingabetyp ist nicht geeignet für Werte, die nur aus Zahlen bestehen, aber streng genommen keine Zahl sind, wie z.B. Postleitzahlen in vielen Ländern oder Kreditkartennummern. Für nicht-numerische Eingaben sollten Sie in Betracht ziehen, einen anderen Eingabetyp zu verwenden, wie<input type="tel"> oder einen anderen<input>-Typ mit deminputmode-Attribut:

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

<input type="number">-Elemente können Ihre Arbeit vereinfachen, wenn Sie die Benutzeroberfläche und die Logik für die Eingabe von Zahlen in ein Formular erstellen. Wenn Sie eine Nummerneingabe mit dem richtigentype Wertenumber erstellen, erhalten Sie eine automatische Validierung, dass der eingegebene Text eine Zahl ist, und normalerweise eine Reihe von Auf- und Ab-Tasten, um den Wert zu erhöhen und 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 Nummerneingabe

In ihrer grundlegendsten Form kann eine Nummerneingabe so implementiert werden:

<label for="ticketNum">Number of tickets you would like to buy:</label><input type="number" name="ticketNum" value="0" />

Eine Nummerneingabe wird als gültig angesehen, wenn sie leer ist und wenn eine einzelne Zahl eingegeben wird, aber ansonsten ungültig ist. Wenn dasrequired-Attribut verwendet wird, wird die Eingabe nicht mehr als gültig angesehen, wenn sie leer ist.

Platzhalter

Manchmal ist es hilfreich, einen kontextbezogenen Hinweis zu geben, welches Format die Eingabedaten haben sollen. Dies kann besonders wichtig sein, wenn das Seitendesign keine beschreibenden Etiketten für jedes<input> bietet. Hier kommenPlatzhalter ins Spiel. Ein Platzhalter ist ein Wert, der am häufigsten verwendet wird, um einen Hinweis auf das Format zu geben, das die Eingabe haben soll. Er wird innerhalb des Bearbeitungsfeldes angezeigt, wenn dervalue des Elements"" ist. Sobald die Daten in das Feld eingegeben werden, verschwindet der Platzhalter; wenn das Feld geleert wird, erscheint der Platzhalter wieder.

Hier haben wir einenumber Eingabe mit dem Platzhalter "Vielzahl von 10". Beachten Sie, wie der Platzhalter verschwindet und wieder erscheint, während Sie den Inhalt des Bearbeitungsfeldes manipulieren.

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

Kontrolle der Schrittgröße

Standardmäßig steigen und fallen die bereitgestellten Auf- und Ab-Tasten für die Schrittzahl bei der Standardnummerneingabe um 1. Sie können dies ändern, indem Sie einstep-Attribut angeben, welches eine Zahl als Schrittgröße enthält. Unser obiges Beispiel enthält einen Platzhalter, der sagt, dass der Wert ein Vielfaches von 10 sein sollte, daher ergibt es Sinn, einenstep Wert von10 hinzuzufügen:

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

In diesem Beispiel sollten Sie feststellen, dass die Auf- und Ab-Steppfeile den Wert jeweils um 10 erhöhen bzw. verringern und nicht um 1. Sie können immer noch manuell eine Zahl eingeben, die kein Vielfaches von 10 ist, aber diese wird als ungültig angesehen.

Festlegen von minimalen und maximalen Werten

Sie können diemin- undmax-Attribute verwenden, um einen minimalen und maximalen Wert festzulegen, den das Feld haben kann. Zum Beispiel, lassen Sie uns unserem Beispiel ein Minimum von0 und ein Maximum von100 geben:

<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-Steppfeile es nicht zulassen, unter 0 oder über 100 zu gelangen. Sie können immer noch manuell eine Zahl außerhalb dieser Grenzen eingeben, aber sie wird als ungültig angesehen.

Erlauben von Dezimalwerten

Ein Problem mit Nummerneingaben ist, dass ihr Schrittwert 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 mit ganzen Zahlen gleichwertig sind. Wenn Sie Werte mit Dezimalstellen eingeben möchten, müssen Sie dies imstep 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" />

In diesem Beispiel ist jeder Wert zwischen0.0 und10.0 zulässig, wobei Dezimalstellen auf zwei Stellen erlaubt sind. Zum Beispiel ist "9.52" gültig, aber "9.521" nicht.

Wenn Sie beliebige Dezimalwerte zulassen möchten, können Sie denstep Wert auf"any" setzen.

Kontrolle der Eingabegröße

<input>-Elemente vom Typnumber unterstützen keine Größeneinstellungen wie dassize-Attribut. Sie müssen aufCSS zurückgreifen, um die Größe dieser Elemente zu ändern.

Zum Beispiel, um die Breite der Eingabe anzupassen, damit sie nur so breit ist, wie es nötig ist, um eine dreistellige Zahl einzugeben, können wir unser HTML so ändern, dass es eineid enthält und unseren Platzhalter verkü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"  />

Dann fügen wir etwas CSS hinzu, um die Breite des Elements mit demid Selektor#number zu reduzieren:

#number {  width: 3em;}

Das Ergebnis sieht dann so aus:

Anbieten von vorgeschlagenen Werten

Sie können eine Liste von Standardoptionen bereitstellen, aus denen der Benutzer auswählen kann, indem Sie daslist-Attribut angeben, das denid eines<datalist> enthält, das seinerseits ein<option>-Element pro Vorschlag enthält. Dervalue des jeweiligenoption ist der entsprechende Vorschlagswert für das Eingabefeld.

<input type="number" name="ticketNum" list="defaultNumbers" /><span></span><datalist>  <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 eine Anzahl von Validierungsfunktionen dernumber Eingaben erwähnt, aber lassen Sie uns diese nun zusammenfassen:

• <input type="number">-Elemente machen automatisch jede Eingabe ungültig, die keine Zahl ist (oder leer, außer wennrequired angegeben ist).
• Sie können dasrequired-Attribut verwenden, um eine leere Eingabe ungültig zu machen. (Mit anderen Worten, die Eingabemuss ausgefüllt werden.)
• Sie können dasstep-Attribut verwenden, um gültige Werte auf eine bestimmte Anzahl von Schritten zu beschränken (z.B. Vielfache von 10).
• Sie können diemin- undmax-Attribute verwenden, um gültige Werte auf untere und obere Grenzen zu beschränken.

Das folgende Beispiel zeigt alle oben genannten Funktionen und verwendet CSS, um bei gültigen und ungültigen Eingaben Icons anzuzeigen:

<form>  <div>    <label for="balloons">Number of balloons to order (multiples of 10):</label>    <input           type="number"      name="balloons"      step="10"      min="0"      max="100"      required />    <span></span>  </div>  <div>    <input type="submit" />  </div></form>

Versuchen Sie, das Formular mit verschiedenen ungültigen Werten zu übermitteln – 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 des Browsers sich mit den einzelnen Werten 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 Icon als generierten Inhalt auf dem angrenzenden<span>-Element anzuzeigen, als visuelles Gültigkeitssignal.

Wir setzen es auf ein separates<span> Element für zusätzliche Flexibilität. Einige Browser zeigen generierten Inhalt nicht sehr effektiv bei einigen Arten von Formulareingaben an. (Lesen Sie zum Beispiel den Abschnitt über die<input type="date">-Validierung.)

Muster-Validierung

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

Der Grund dafür ist, dass Nummerneingaben nicht gültig sein werden, wenn sie etwas anderes als Zahlen enthalten, und Sie können die minimale und maximale Anzahl gültiger Ziffern mithilfe dermin- undmax-Attribute einschränken (wie oben erläutert).

Barrierefreiheit

Die impliziteRolle für das<input type="number"> Element istspinbutton. Wenn der Spinbutton kein wichtiges Merkmal für Ihre Formularkontrolle ist, sollten Sie in Betracht ziehen,type="number"nicht zu verwenden. Verwenden Sie stattdesseninputmode="numeric" zusammen mit einempattern-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 versuchen, etwas anderes zu tun. Außerdem, wenn Benutzer versuchen, etwas einzugeben, was keine Zahl ist, gibt es kein explizites Feedback darüber, was sie falsch machen.

Berücksichtigen Sie auch die Verwendung desautocomplete-Attributs, um Benutzern zu helfen, Formulare schneller und mit weniger Fehlern auszufüllen. Beispielsweise können Sie für eine Postleitzahl dasautocomplete="postal-code" setzen, um die Autovervollständigung zu aktivieren.

Beispiele

Wir haben bereits erwähnt, dass der Standardwert für das Inkrement1 ist und dass Sie dasstep-Attribut verwenden können, um dezimale Eingaben zuzulassen. Lassen Sie uns einen genaueren Blick darauf werfen.

Im folgenden Beispiel ist ein Formular zur Eingabe der Körpergröße des Benutzers. Es akzeptiert standardmäßig eine Höhe in Metern, aber Sie können auf die entsprechende Taste klicken, um das Formular auf Fuß und Zoll umzustellen. Die Eingabe für die Höhe in Metern erlaubt Dezimalstellen bis auf zwei Nachkommastellen.

Das HTML sieht so aus:

<form>  <div>    <label for="meters">Enter your height — meters:</label>    <input           type="number"      name="meters"      step="0.01"      min="0"      placeholder="e.g. 1.78"      required />    <span></span>  </div>  <div>    <span>Enter your height — </span>    <label for="feet">feet:</label>    <input type="number" name="feet" min="0" step="1" />    <span></span>    <label for="inches">inches:</label>    <input type="number" name="inches" min="0" max="11" step="1" />    <span></span>  </div>  <div>    <input      type="button"           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 früher im Artikel betrachtet haben. Da wir einen Meterwert in Zentimetern akzeptieren möchten, haben wir denstep-Wert auf0.01 gesetzt, damit Werte wie1.78 nicht als ungültig betrachtet werden. Wir haben auch einen Platzhalter für diese Eingabe bereitgestellt.

Wir haben die Fuß- und Zolleingaben zunächst mitstyle="display: none;" ausgeblendet, damit Meter die Standard-Eingabeart bleibt.

Nun zum CSS. Es sieht sehr ähnlich aus wie das Validierungsstyling, das wir zuvor gesehen haben; hier gibt es nichts Besonders.

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