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, der der Wert entsprechen muss, oder das Schlüsselwort any
. Es ist gültig für numerische Eingabetypen, einschließlich der date, month, week, time, datetime-local, number und range Typen.
Das step
-Attribut legt das Intervall fest, wenn man auf die Aufwärts- und Abwärtspfeile klickt, einen Schieberegler nach links und rechts bewegt oder die verschiedenen Datumstypen validiert. Wenn es nicht explizit angegeben ist, ist der Standardwert von step
1 für number
und range
und 1 Einheitentyp (Minute, Woche, Monat, Tag) für die Datum/Uhrzeit-Eingabetypen. Der Wert muss eine positive Zahl sein - ganz oder gebrochen - oder der Spezialwert any
, was bedeutet, dass kein Schrittintervall festgelegt ist und jeder Wert erlaubt ist (es sei denn, es bestehen andere Einschränkungen wie min
und max
).
Der Standard-Schrittwert für number
-Eingaben ist 1, was nur ganzzahlige Eingaben erlaubt, es sei denn, die Basis für den Schritt ist keine Ganzzahl. Der Standard-Schrittwert für time
ist 60 Sekunden, wobei 900 15 Minuten entspricht.
Syntax
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 number
, Datum/Uhrzeit- und range
-Eingabetypen gleich der Basis für den Schritt - dem min
-Wert und den Inkrementen des Schrittwerts, bis zum max
-Wert, falls angegeben. Das folgende Beispiel führt dazu, dass jede gerade ganze Zahl, die 10 oder größer ist, gültig ist:
<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 step
standardmäßig auf 1 gesetzt ist. Damit 4.2 gültig ist:
- entweder muss
step
aufany
, 0.1 oder 0.2 gesetzt werden, - oder der
min
-Wert muss eine Zahl sein, die auf .2 endet, wie etwa 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. Dies liegt daran, dass step
für den number
-Eingabetyp standardmäßig auf 1
gesetzt ist.
In diesem Beispiel fügen wir einen großen roten Rahmen um ungültige Eingaben hinzu:
input:invalid {
border: solid red 3px;
}
Dann definieren wir eine Eingabe mit einem Mindestwert von 1.2 und einem Schrittwert von 2:
<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 usw. Nur Gleitkommazahlen mit einer ungeraden ganzzahligen und einem Dezimalteil von .2 sind gültig. Der Zahlenspin, falls vorhanden, generiert gültige Gleitkommazahlen von 1.2 und größeren, in Schritten von 2.
Hinweis:
Wenn die vom Benutzer eingegebenen Daten nicht der Schritt-Konfiguration entsprechen, wird der Wert bei der Constraints-Überprüfung als ungültig angesehen und entspricht den Pseudoklassen :invalid
und :out-of-range
.
Siehe Client-seitige Validierung und stepMismatch
für weitere Informationen.
Barrierefreiheitsaspekte
Bieten Sie Anweisungen, um den Nutzern zu helfen, das Formular zu vervollständigen und einzelne Formularelemente zu verwenden. Geben Sie erforderliche und optionale Eingaben, Datenformate und andere relevante Informationen an. Wenn das min
-Attribut verwendet wird, stellen Sie sicher, dass diese Mindestanforderung vom Benutzer verstanden wird. Das Bereitstellen von Anweisungen innerhalb des <label>
kann ausreichend sein. Wenn Sie Anweisungen außerhalb von Labels bereitstellen, was eine flexiblere Positionierung und Gestaltung ermöglicht, sollten Sie aria-labelledby
oder aria-describedby
verwenden.
Spezifikationen
Specification |
---|
HTML # attr-input-step |
Browser-Kompatibilität
Siehe auch
max
min
- Constraints-Validierung
- Formular-Validierung
validityState.stepMismatch
:out-of-range
<input>
- date, month, week, time, datetime-local, number und range Typen, und das
<meter>