HTML-Attribut: step

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das step-Attribut ist eine Zahl, die die Granularität angibt, an die der Wert halten muss, oder das Stichwort any. Es ist gültig für numerische Eingabetypen, einschließlich des Typs date, month, week, time, datetime-local, number und range.

Das step-Attribut legt das Schrittintervall fest, wenn man auf die Schaltflächen zum Erhöhen und Verringern klickt, einen Schieberegler links und rechts bewegt oder die verschiedenen Datumstypen validiert. Wenn es nicht explizit angegeben ist, beträgt der Standardwert von step 1 für number und range sowie 1 Einheitstyp (Minute, Woche, Monat, Tag) für die Datum-/Uhrzeit-Eingabetypen. Der Wert muss eine positive Zahl sein – ganzzahlig oder Gleitkommazahl — oder der spezielle Wert any, was bedeutet, dass keine Schritte impliziert sind und jeder Wert erlaubt ist (außer es gibt andere Einschränkungen wie min und max).

Nur Werte, die eine ganzzahlige Anzahl von Schritten vom Basiswert des Schritts entfernt sind, sind gültig. Der Basiswert des Schritts ist min, falls angegeben, ansonsten value, oder 0, wenn keiner von beiden angegeben ist (außer bei week, das einen Standardbasiswert von −259.200.000 hat, was dem Beginn der Woche 1970-W01 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 gesetzt ist, sind gültige Werte für die Eingabetypen number, Datum/Zeit und range Eingabetypen gleich dem Basiswert für das Schrittverhalten - dem min-Wert und Inkrementen des Schrittwerts bis zu den max-Werten, falls angegeben. Das folgende Beispiel führt dazu, dass alle geraden Ganzzahlen gleich oder größer als 10 gültig sind:

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

Wenn step weggelassen wird, ist jede ganze Zahl gültig, aber Gleitkommazahlen wie 4.2 sind nicht gültig, da der Standardwert von step 1 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 z.B. 0.2, 1.2 oder -5.2.

Beispiele

Einfluss von min auf step

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

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

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

Dann definieren wir 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 Zahlenspin, sofern vorhanden, generiert gültige Fließkommazahlen von 1.2 und höher in Schritten von 2.

Hinweis: Wenn die eingegebenen Daten nicht der Schrittkonfiguration entsprechen, wird der Wert bei der Einschränkungsvalidierung als ungültig angesehen und wird den Pseudoklassen :invalid und :out-of-range entsprechen.

Für weitere Informationen siehe Client-side validation und stepMismatch.

Barrierefreiheit

Geben Sie Anweisungen, um den Nutzern zu helfen, das Formular auszufüllen und einzelne Formularelemente zu verwenden. Geben Sie alle erforderlichen und optionalen Eingaben, Datenformate und andere relevante Informationen an. Wenn Sie das min-Attribut verwenden, stellen Sie sicher, dass dieses Minimum vom Benutzer verstanden wird. In den <label> Anweisungen bereitzustellen, kann ausreichend sein. Wenn Anleitungen außerhalb von Labels bereitgestellt werden, was flexiblere Positionierungen und Designs ermöglicht, berücksichtigen Sie die Verwendung von aria-labelledby oder aria-describedby.

Spezifikationen

Specification
HTML
# attr-input-step

Browser-Kompatibilität

Siehe auch