Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use input type field with steps in HTML?
The step attribute in HTML input fields defines the interval between valid numbers that users can enter or select. When used with input types like number, range, date, or time, it controls the stepping behavior of spinner buttons and slider movements.
For example, if step="2", the valid numbers could be -4, -2, 0, 2, 4, etc. The step attribute sets the stepping interval when clicking up and down spinner buttons in number fields or moving a slider left and right on range inputs.
Syntax
Following is the syntax to use the step attribute in HTML input fields −
<input type="number" step="value"> <input type="range" step="value" min="min_value" max="max_value"> <input type="time" step="value">
Where value is a positive number that specifies the stepping interval. If not specified, the default step value is 1 for number inputs and 1 second for time inputs.
Basic Step Usage with Number Input
The step attribute is commonly used with type="number" to control which values users can enter. The browser's spinner controls will increment or decrement by the step value.
Example − Basic Step Implementation
<!DOCTYPE html>
<html>
<head>
<title>Step Attribute Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Number Input with Step=5</h2>
<form>
<label for="points">Step Points:</label>
<input type="number" id="points" name="points" step="5" style="margin: 10px; padding: 5px;">
<input type="submit" value="Submit" style="padding: 5px 10px;">
</form>
<p>Use the spinner buttons or type values. Valid: -10, -5, 0, 5, 10, 15...</p>
</body>
</html>
With step="5", the input accepts values like -10, -5, 0, 5, 10, 15, and so on. Using the spinner buttons will increment or decrement by 5.
Number Input with Step=5 Step Points: [5] [??] [Submit] Use the spinner buttons or type values. Valid: -10, -5, 0, 5, 10, 15...
Using Step with Min and Max Attributes
The step attribute works together with min and max attributes to create a controlled range of valid values. This is particularly useful for creating constrained input fields.
Example − Step with Range Constraints
<!DOCTYPE html>
<html>
<head>
<title>Step with Min/Max Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Constrained Number Input</h2>
<form>
<label for="score">Score (0-30, step=3):</label>
<input type="number" id="score" name="score" min="0" step="3" max="30"
style="margin: 10px; padding: 5px;">
<input type="submit" value="Submit" style="padding: 5px 10px;">
</form>
<p>Valid values: 0, 3, 6, 9, 12, 15, 18, 21, 24, 27, 30</p>
</body>
</html>
This input only accepts values between 0 and 30 in steps of 3. Values like 1, 2, 4, 5, 31, etc., will be invalid.
Constrained Number Input Score (0-30, step=3): [6] [??] [Submit] Valid values: 0, 3, 6, 9, 12, 15, 18, 21, 24, 27, 30
Step Attribute with Range Input
The type="range" input creates a slider control where the step attribute determines how the slider moves. This provides a visual way for users to select values within a specific range.
Example − Range Slider with Steps
<!DOCTYPE html>
<html>
<head>
<title>Range Input with Steps</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Volume Control (Step=10)</h2>
<form>
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="10"
value="50" style="margin: 10px; width: 300px;">
<span id="volumeValue">50</span>%
</form>
<script>
document.getElementById("volume").oninput = function() {
document.getElementById("volumeValue").textContent = this.value;
}
</script>
</body>
</html>
The range slider moves in increments of 10, allowing values like 0, 10, 20, 30, etc., up to 100.
Volume Control (Step=10) Volume: [____?____] 50% (Slider moves in steps of 10: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100)
Step Attribute with Time Input
For time inputs, the step attribute controls the granularity of time selection. The value is specified in seconds.
Example − Time Input with 30-minute Steps
<!DOCTYPE html>
<html>
<head>
<title>Time Input with Steps</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Appointment Time (30-minute intervals)</h2>
<form>
<label for="appointment">Select Time:</label>
<input type="time" id="appointment" name="appointment" step="1800"
style="margin: 10px; padding: 5px;">
<input type="submit" value="Book" style="padding: 5px 10px;">
</form>
<p>Step=1800 seconds (30 minutes). Valid times: 09:00, 09:30, 10:00, 10:30...</p>
</body>
</html>
With step="1800" (1800 seconds = 30 minutes), users can only select times in 30-minute intervals.
Appointment Time (30-minute intervals) Select Time: [09:30] [Book] Step=1800 seconds (30 minutes). Valid times: 09:00, 09:30, 10:00, 10:30...
Decimal Step Values
The step attribute accepts decimal values, allowing for precise increments in number inputs. This is useful for currency, measurements, or other precision-based inputs.
Example − Currency Input with Decimal Steps
<!DOCTYPE html>
<html>
<head>
<title>Decimal Step Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Price Input (Step=0.01)</h2>
<form>
<label for="price">Price: $</label>
<input type="number" id="price" name="price" min="0" step="0.01"
placeholder="0.00" style="margin: 10px; padding: 5px;">
<input type="submit" value="Set Price" style="padding: 5px 10px;">
</form>
<p>Allows values like: 10.01, 10.02, 10.03, etc. (cent precision)</p>
</body>
</html>
Using step="0.01" allows users to enter currency values with cent precision, such as $10.99, $15.50, etc.
Price Input (Step=0.01) Price: $ [10.99] [Set Price] Allows values like: 10.01, 10.02, 10.03, etc. (cent precision)
Common Use Cases
Following are the most common applications of the step attribute −
| Input Type |
|---|
963 Views
