Heim > Artikel > Web-Frontend > Wie verwende ich ein Eingabetypfeld mit Schritten in HTML?
Wie verwende ich ein Eingabetypfeld mit Schritten in HTML?
- WBOYnach vorne
- 2023-09-05 23:49:061048Durchsuche
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.
Grammatik
Hier ist die Syntax für die Verwendung von Eingabefeldern und Schritten in HTML.
<input type="number" id="points" name="points" step="enter number">
Beispiel
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.
Beispiel
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.
Verwenden Sie Schritte für Eingabefelder mit Bereichen
Diese Schritte können auch für Eingabefelder mit begrenztem Bereich verwendet werden. Daher müssen auch die maximalen und minimalen Eigenschaften angegeben werden.
Grammatik
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">
Beispiel
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!