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

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

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 step standardmäßig auf 1 gesetzt ist. Damit 4.2 gültig ist:

  • entweder muss step auf any, 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:

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