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 Attribut step 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 Typen date, month, week, time, datetime-local, number und range.

Das step-Attribut legt das Stufungsintervall fest, wenn man die Auf- und Abwärts-Spinner-Schaltflächen anklickt, einen Regler links und rechts verschiebt und die verschiedenen Datumstypen validiert. Falls nicht ausdrücklich angegeben, beträgt der Standardwert von step 1 für number und range sowie 1 Einheit (Minute, Woche, Monat, Tag) für die Datum/Uhrzeit-Eingabetypen. Der Wert muss eine positive Zahl sein - ganzzahlig oder Gleitkomma - oder der spezielle Wert any, was bedeutet, dass keine Stufung impliziert wird und jeder Wert zulässig ist (unter Berücksichtigung anderer Einschränkungen, wie min und max).

Der Standardwert der Stufung für number Eingaben ist 1, sodass nur Ganzzahlen eingegeben werden können, es sei denn, die Basis der Stufung ist keine Ganzzahl. Der Standardwert der Stufung für time ist 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">

Falls any nicht ausdrücklich gesetzt ist, sind gültige Werte für die number, Datum/Uhrzeit- und range-Eingabetypen gleich der Basis für die Stufung - dem min Wert und Vielfachen des Schrittwerts bis zum max Wert, falls angegeben. Das folgende Beispiel führt dazu, dass jede gerade Ganzzahl, die 10 oder größer ist, gültig ist:

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

Wird step weggelassen, ist jede Ganzzahl gültig, aber Gleitkommazahlen wie 4.2 sind nicht gültig, da step standardmäßig 1 ist. Damit 4.2 gültig ist:

  • muss entweder step auf any, 0.1 oder 0.2 gesetzt sein,
  • oder der min Wert muss eine Zahl sein, die mit .2 endet, wie 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 number Eingabetyp standardmäßig 1 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 umfassen 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 Nummern-Spinner, falls vorhanden, generiert gültige Gleitkommazahlen ab 1.2 in Schritten von 2.

Hinweis: Wenn die vom Benutzer eingegebenen Daten nicht der Stufungskonfiguration entsprechen, wird der Wert in der Constraint-Validierung als ungültig angesehen und wird die Pseudoklassen :invalid und :out-of-range ansprechen.

Sehen Sie Client-seitige Validierung und stepMismatch für mehr Informationen.

Barrierefreiheitsbelange

Stellen Sie Anleitungen bereit, um Benutzern zu helfen, das Formular auszufüllen und die einzelnen Formularsteuerelemente zu verwenden. Geben Sie an, welche Eingaben erforderlich und optional sind, Datenformate und andere relevante Informationen. Wenn Sie das min-Attribut verwenden, stellen Sie sicher, dass diese Mindestanforderung vom Benutzer verstanden wird. Das Bereitstellen von Anleitungen innerhalb des <label> kann ausreichend sein. Wenn Sie Anleitungen außerhalb von Labels bereitstellen, was eine flexiblere Positionierung und Gestaltung ermöglicht, sollten Sie in Betracht ziehen, aria-labelledby oder aria-describedby zu verwenden.

Spezifikationen

Specification
HTML
# attr-input-step

Browser-Kompatibilität

Siehe auch