<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 in die Eingabe eingegebenen Wert darstellt. Sie können einen Standardwert für die Eingabe festlegen, indem Sie eine Zahl innerhalb des value-Attributs angeben, wie unten gezeigt:

<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 im selben Dokument. Die <datalist> bietet eine Liste von vordefinierten Werten, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht zu den vorgeschlagenen Optionen hinzugefügt. 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 Wert überschreitet, schlägt das Element bei 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 minimale Wert, der für diese Eingabe akzeptiert wird. Wenn der value des Elements kleiner ist als dieser, schlägt das Element bei der Einschränkungsvalidierung fehl. Wenn ein Wert für min angegeben ist, 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 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 Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Falls der Inhalt der Steuerung eine Richtung (LTR oder RTL) hat, aber der Platzhalter in der entgegengesetzten Richtung präsentiert werden soll, können Sie Zeichen zur Formatierung des Unicode-bidirektionalen Algorithmus verwenden, um die Richtung des Platzhalters zu überschreiben; siehe Wie man Unicode-Steuerzeichen für bidi-Text verwendet für weitere Informationen.

Ein Boolean-Attribut, das, falls vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch immer noch durch direktem Setzen des value-Eigenschaft im HTMLInputElement mittels JavaScript 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 eine ganze Anzahl von Schritten vom Schritt-Basiswert entfernt sind, sind gültig. Der Schritt-Basiswert ist min, falls angegeben, ansonsten value oder 0, falls keiner angegeben ist.

Der Standardschrittwert für number-Eingaben ist 1, wodurch nur Ganzzahlen eingegeben werden dürfen — es sei denn, die Basis des Schritts ist keine Ganzzahl.

Ein Zeichenfolgenwert von any bedeutet, dass kein Schritt impliciert wird und jeder Wert erlaubt ist (mit Ausnahme anderer Einschränkungen, wie min und max).

Der number-Eingabetyp sollte nur für inkrementelle Zahlen verwendet werden, insbesondere wenn die Inkrementierung und Dekrementierung mit der Spinbutton-Funktion für die Benutzererfahrung hilfreich sind. Der number-Eingabetyp ist nicht geeignet für Werte, die zufällig nur aus Zahlen bestehen, aber streng genommen keine Zahlen sind, wie Postleitzahlen in vielen Ländern oder Kreditkartennummern. Für nicht-numerische Eingaben sollten Sie einen anderen Eingabetyp verwenden, 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, Ihre Arbeit bei der Erstellung der Benutzeroberfläche und Logik zum Eingeben 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 Up- und Down-Tasten, um den Wert zu erhöhen oder zu verringern.

Mobile Browser unterstützen die Benutzererfahrung zusätzlich, indem sie eine spezielle Tastatur anzeigen, die besser geeignet ist, um Zahlen einzugeben, sobald der Benutzer einen Wert eingeben möchte.

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, 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 kontextuellen Hinweis zu bieten, in welcher Form die eingegebenen Daten vorliegen sollen. Das 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 auf das Format zu geben, das die Eingabe annehmen soll value. 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 wieder.

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

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

Standardmäßig erhöhen und verringern die bereitgestellten Auf- und Abwärts-Schaltflächen den Wert jeweils um 1. Sie können dies ändern, indem Sie ein step-Attribut bereitstellen, das als Wert eine Zahl zur Angabe der Schrittmenge vorgibt. 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 die Auf- und Abwärts-Pfeile den Wert jeweils um 10 und nicht um 1 erhöhen und verringern. Sie können immer noch manuell eine Zahl eingeben, die kein Vielfaches von 10 ist, aber diese wird als ungültig angesehen.

Sie können die Attribute min und max verwenden, um einen minimalen und maximalen Wert festzulegen, den das Feld haben kann. Geben wir zum Beispiel 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-Schaltflächen nicht zulassen, dass Sie unter 0 oder über 100 gehen. Sie können immer noch manuell eine Zahl eingeben, die außerhalb dieser Grenzen liegt, aber diese wird als ungültig angesehen.

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

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

Sehen Sie, dass dieses Beispiel einen Wert zwischen 0.0 und 10.0 mit Dezimalstellen bis zu zwei Stellen erlaubt. 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-Attributgrößen wie size. Sie müssen CSS verwenden, um die Größe dieser Steuerelemente zu ändern.

Zum Beispiel, um die Breite der Eingabe so anzupassen, dass nur eine dreistellige Zahl eingegeben werden kann, können wir unser HTML ändern, um eine id einzuschließen und unseren Platzhalter zu verkürzen, da das Feld für den Text, den wir bisher verwendet haben, 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 verengen:

#number {
  width: 3em;
}

Das Ergebnis sieht so aus:

Sie können eine Liste mit Standardoptionen bereitstellen, aus denen 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 jeder option ist der entsprechende vorgeschlagene Wert für das Zahleneingabefeld.

<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 zusammenfassen:

• <input type="number">-Elemente werden automatisch als ungültig angesehen, wenn sie etwas anderes als eine Zahl enthalten (oder leer sind, es sei denn required ist angegeben).
• Sie können das required-Attribut verwenden, um eine leere Eingabe 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 Attribute min und max verwenden, um gültige Werte auf untere und obere Grenzen zu beschränken.

Das folgende Beispiel zeigt alle oben genannten Funktionen sowie die Verwendung von etwas CSS, um je nach 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 abzuschicken — 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 mit unterschiedlichen Eingaben variieren.

Das auf dieses Beispiel angewandte 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-Pseudo-Klassen, um ein entsprechendes ungültiges oder gültiges Symbol als generierten Inhalt auf dem angrenzenden <span>-Element anzuzeigen, als visuelle Anzeige der Gültigkeit.

Wir setzen es auf ein separates <span>-Element für zusätzliche Flexibilität. Einige Browser zeigen generierten Inhalt bei einigen Arten von Formulareingaben nicht sehr effektiv an. (Lesen Sie zum Beispiel den Abschnitt über die <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 Zahlen-Eingaben nicht gültig sind, wenn sie etwas anderes als Zahlen enthalten, und Sie die minimale und maximale Anzahl gültiger Ziffern mit den Attributen min und max (wie oben erklärt) einschränken können.

Die implizite Rolle für das <input type="number">-Element ist spinbutton. Wenn die Spinbutton-Funktion für Ihre Formsteuerung nicht wichtig 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. Bei <input type="number"> besteht das Risiko, dass Benutzer versehentlich eine Zahl inkrementieren, während sie versuchen, etwas anderes zu tun. Wenn Benutzer etwas eingeben, das keine Zahl ist, gibt es zudem kein explizites Feedback darüber, was sie falsch machen.

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

Wir haben bereits erwähnt, dass der Standard-Inkrementwert 1 ist und dass Sie das step-Attribut verwenden können, um Dezimaleingaben zu ermöglichen. Lassen Sie uns einen genaueren Blick darauf werfen.

Im folgenden Beispiel befindet sich ein Formular zur Eingabe der Körpergröße des Benutzers. Standardmäßig wird die Eingabe der Größe in Metern akzeptiert, aber Sie können den entsprechenden Button klicken, um das Formular so zu ändern, dass es stattdessen Fuß und Zoll akzeptiert. Die Eingabe für die Größe in Metern akzeptiert Dezimalzahlen 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">
    <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 im Artikel zuvor betrachtet haben. Da wir einen Meterwert in Zentimetern akzeptieren möchten, haben wir den step-Wert auf 0.01 festgelegt, sodass Werte wie 1.78 nicht als ungültig angesehen werden. Wir haben auch einen Platzhalter für diese Eingabe bereitgestellt.

Wir haben die Füße- und Zoll-Eingaben initial versteckt, indem wir style="display: none;" verwenden, sodass Meter der Standardeingabetyp ist.

Nun zum CSS. Dies sieht sehr ähnlich aus wie das Validierungsstyling, das wir bereits gesehen haben; hier ist nichts Bemerkenswertes.

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 ein Ereignislistener zum button hinzugefügt, um den Wechselschaltermechanismus zu steuern. Dies beinhaltet das Wechseln der class des Buttons und der <label>, sowie das Aktualisieren der Anzeigewerte der beiden Sets von Eingaben, wenn der Button gedrückt wird.

(Beachten Sie, dass wir hier nicht zwischen Metern und Füßen/Zoll hin- und herkonvertieren, was eine reale Webanwendung wahrscheinlich tun würde.)

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