HTML-Attribut: step

Das step-Attribut ist eine Zahl, die die Granularität angibt, der der Wert entsprechen muss, oder das Schlüsselwort any. Es ist für die numerischen Eingabetypen gültig, darunter die Typen date, month, week, time, datetime-local, number und range.

step legt das Schrittintervall fest, wenn die Pfeiltasten oder der Schieberegler bewegt werden, oder validiert die verschiedenen Datentypen. Wird es nicht explizit hinzugefügt, beträgt der Standardwert für step 1 für number und range, und 1 Einheitstyp (Minute, Woche, Monat, Tag) für die Datums-/Zeiteingabetypen. Der Wert muss eine positive Zahl sein - ganzzahlig oder als Gleitkommazahl - oder der spezielle Wert any, was bedeutet, dass keine Schritte festgelegt sind und jeder Wert erlaubt ist (unter Berücksichtigung anderer Einschränkungen, wie min und max).

Der Standardwert für number-Eingaben ist 1, was nur ganze Zahlen erlaubt, es sei denn, die Basis für Schritte ist keine ganze Zahl. Der Standardwert für Schritte bei time beträgt 60 Sekunden, wobei 900 gleich 15 Minuten entspricht.

Syntax

Standardwerte für step
Eingabetyp Wert Beispiel
date 1 (Tag) <input type="date" min="2019-12-25" step="1">
month 1 (Monat) <input type="month" min="2019-12" step="12">
week 1 (Woche) <input type="week" min="2019-W23" step="2">
time 60 (Sekunden) <input type="time" min="09:00" step="900">
datetime-local 60 (Sekunden) <input type="datetime-local" min="2019-12-25T19:30" step="900">
number 1 <input type="number" min="0" step="0.1" max="10">
range 1 <input type="range" min="0" step="2" max="10">

Wenn any nicht explizit festgelegt wird, sind gültige Werte für die Eingabetypen number, Datum/Zeit und range gleich dem Basiswert für Schritte - dem min-Wert und den Vielfachen des Schrittwerts, bis zum max-Wert, falls angegeben. Das folgende Beispiel ermöglicht nur gerade Zahlen ab 10:

html
<input type="number" min="10" step="2" />

Wird step weggelassen, sind alle ganzzahligen Werte gültig, nicht jedoch Gleitkommazahlen wie 4.2, da step standardmäßig auf 1 gesetzt ist. Damit 4.2 gültig ist:

  • müsste step entweder auf any, 0.1 oder 0.2 gesetzt werden,
  • oder der min-Wert müsste eine Zahl sein, die auf .2 endet, wie 0.2, 1.2 oder -5.2.

Beispiele

Einfluss von min auf step

Der Wert von min definiert gültige Werte, selbst wenn das step-Attribut nicht enthalten ist. Das liegt daran, dass step standardmäßig auf 1 für den number-Eingabetyp gesetzte ist.

In diesem Beispiel fügen wir eine dicke rote Umrandung um ungültige Eingaben hinzu:

css
input:invalid {
  border: solid red 3px;
}

Wir definieren dann eine Eingabe mit einem Mindestwert von 1.2 und einem Schrittwert von 2:

html
<input id="myNumber" name="myNumber" type="number" step="2" min="1.2" />

Gültige Werte sind 1.2, 3.2, 5.2, 7.2, 9.2, 11.2, und so weiter. Nur Fließkommazahlen mit einem ungeraden ganzzahligen Teil und einem Dezimalteil von .2 sind gültig. Der Nummernschieber, falls vorhanden, generiert gültige Fließkomma-Werte von 1.2 und höher, in zwei Schritten.

Hinweis: Wenn die vom Benutzer eingegebenen Daten nicht der Schrittkonfiguration entsprechen, wird der Wert in der Einschränkungsvalidierung als ungültig betrachtet und passt zu den Pseudoklassen :invalid und :out-of-range.

Siehe Client-seitige Validierung und stepMismatch für weitere Informationen.

Barrierefreiheit

Geben Sie Anweisungen, um Benutzern zu helfen, das Formular auszufüllen und die einzelnen Formularelemente zu verwenden. Geben Sie an, welche Eingaben erforderlich und welche optional sind, die Datumsformate und andere relevante Informationen. Wenn Sie das min-Attribut verwenden, stellen Sie sicher, dass dieses Mindestanforderung von den Benutzern verstanden wird. Anweisungen innerhalb des <label> können ausreichend sein. Wenn Anweisungen außerhalb von Labels bereitgestellt werden, was eine flexiblere Positionierung und Gestaltung erlaubt, ziehen Sie in Betracht, aria-labelledby oder aria-describedby zu verwenden.

Spezifikationen

Specification
HTML Standard
# attr-input-step

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch