In diesem Artikel verwenden wir das Eingabetypfeld mit Schritten in HTML.
Wir verwenden das Schrittattribut, um das Intervall zwischen Zahlen im -Element anzugeben. Wenn unser Schritt beispielsweise = „2“ ist, könnten die Zahlen -4, -2, 0, 2, 4 usw. sein.
Die Schrittgröße legt das Schrittintervall fest, wenn Sie im Eingabefeld auf die Schaltfläche „Nach oben“ und „Nach unten“ klicken und den Schieberegler innerhalb eines bestimmten Bereichs nach links oder rechts bewegen. Wenn kein Schritt explizit enthalten ist, wird der Standardwert für Zahlen auf 1 gesetzt und für Datums-/Uhrzeit-Eingabetypen wird der Standardwert für Einheitentypen auf 1 gesetzt.
Der Standardschrittwert für die numerische Eingabe ist 1. Es sind nur Ganzzahlen zulässig, es sei denn, die Schrittbasis ist keine Ganzzahl. Der Standardschrittwert für die Zeit beträgt 1 Sekunde.
Wir können das Schrittattribut auch zusammen mit den Max- und Min-Attributen verwenden, um einen Wertebereich im Eingabefeld zu erstellen.
Hier ist die Syntax für die Verwendung von Eingabefeldern und Schritten in HTML.
<input type="number" id="points" name="points" step="enter number">
Hier ist ein Beispielprogramm mit Eingabefeldern und Schritten in HTML -
<!DOCTYPE html>
<html>
<body>
<form >
<label for="points">Step Points:</label>
<input type="number" id="points" name="points" step="5">
<input type="submit">
</form>
</body>
</html>
Wir haben im obigen Beispielprogramm Schritt=5 verwendet. Es navigiert zu -10, -5, 0, 5, 10, 15…………. usw.
Hier ist ein weiteres Beispielprogramm, das Eingabefelder und Schritte in HTML verwendet -
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
background-color: #3CBC8D;
color: white;
}
</style>
</head>
<body>
<h2>Input fields with color</h2>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Doe">
</form>
</body>
</html>
Wir haben im obigen Beispielprogramm Schritt=10 eingegeben. Dadurch wird zu 10, 20, 30, 40, 50, 60 ………… navigiert. usw.
Diese Schritte können auch für Eingabefelder mit begrenztem Bereich verwendet werden. Daher müssen auch die maximalen und minimalen Eigenschaften angegeben werden.
Hier ist die Syntax zum Erstellen eines Wertebereichs in einem Eingabefeld mithilfe des Schrittattributs und der Max- und Min-Attribute.
<input type="range" min="0" step="3" max="30">
Das folgende Beispielprogramm verwendet das Schrittattribut und die Max- und Min-Attribute, um einen Wertebereich in einem Eingabefeld zu erstellen.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form >
<label for="points">Step Points:</label>
<input type="number" id="points" name="points" min="0" step="3" max="30">
<input type="submit">
</form>
</body>
</html>
Wir haben im obigen Beispielprogramm Schritt=3 verwendet. Dadurch wird zu 0, 3, 6, 9 ………… navigiert. Und so weiter bis zu 30 (wie wir max=30 angegeben haben).
Wie wir sehen können, liegt der Wert nicht vor dem im Eingabefeld angegebenen Mindestwert.
Wie wir sehen können, wird der Wert den im Eingabefeld angegebenen Maximalwert nicht überschreiten.
Das obige ist der detaillierte Inhalt vonWie verwende ich ein Eingabetypfeld mit Schritten in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
