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 für die numerischen Eingabetypen gültig, einschließlich der date, month, week, time, datetime-local, number und range Typen.

Das step-Attribut legt das Schrittintervall fest, wenn die Aufwärts- und Abwärtstaste gedrückt wird, ein Schieberegler links und rechts bewegt wird, und bei der Validierung der verschiedenen Datentypen. Wenn es nicht explizit angegeben wird, ist der Standardwert von step für number und range 1 und ein Einheitstyp (Minute, Woche, Monat, Tag) für die Eingabetypen für Datum/Uhrzeit. Der Wert muss eine positive Zahl sein - ganzzahlig oder gleitend - oder der spezielle Wert any, der bedeutet, dass kein Schritt impliziert ist und jeder Wert erlaubt ist (abgesehen von anderen Einschränkungen, wie min und max).

Der Standard-Schrittwert für number Eingaben ist 1, wodurch nur ganze Zahlen eingegeben werden dürfen, es sei denn, die Schrittbasis ist keine ganze Zahl. Der Standard-Schrittwert für time ist 60 Sekunden, wobei 900 gleich 15 Minuten ist.

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 Eingabetypen und range Eingabetypen gleich der Basis für das Schritteverfahren - der min Wert und Erhöhungen des Schrittwerts bis zum max Wert, falls angegeben. Das folgende Beispiel ergibt, 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 der Standardwert von step 1 ist. Damit 4.2 gültig ist:

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

Beispiele

min-Einfluss auf step

Der Wert von min definiert gültige Werte, selbst wenn das step-Attribut nicht angegeben ist. Dies liegt daran, dass step für den number Eingabetyp auf 1 voreingestellt ist.

In diesem Beispiel fügen wir einen großen roten Rand 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 Gleitkommazahlen mit einem ungeraden ganzzahligen Teil und einem Dezimalteil von .2 sind gültig. Der Zahlendrehknopf, falls vorhanden, erzeugt gültige Gleitkommawerte von 1.2 und größer, in Schritten von 2.

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

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

Barrierefreiheitsbedenken

Geben Sie Anweisungen, die Benutzern helfen, das Formular auszufüllen und einzelne Formularelemente zu verwenden. Geben Sie erforderliche und optionale Eingaben, Datenformate und andere relevante Informationen an. Wenn Sie das min-Attribut verwenden, stellen Sie sicher, dass diese Mindestanforderung vom Benutzer verstanden wird. Anweisungen innerhalb des <label> können ausreichend sein. Wenn Anweisungen außerhalb von Labels bereitgestellt werden, was eine flexiblere Positionierung und Gestaltung ermöglicht, sollten Sie in Betracht ziehen, 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