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
HTML DOM Input Number step Property
The HTML DOM Input Number step property sets and retrieves the value of the step attribute for number input fields. The step attribute defines the legal number intervals for the input field, controlling how much the value increases or decreases when using the input's increment/decrement arrows.
Syntax
Following is the syntax for getting the step value −
object.step
Following is the syntax for setting the step value −
object.step = "number"
Parameters
The step property accepts a string that represents a positive number. Common values include:
"1"− Default step value (integers)"0.1"− Allows decimal increments of 0.1"5"− Increments by 5"any"− Allows any step value
Return Value
The property returns a string representing the current step value of the number input field.
Getting the Step Value
Following example demonstrates how to retrieve the step value of a number input field −
<!DOCTYPE html>
<html>
<head>
<title>Get Step Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Get Number Input Step Value</h2>
<input type="number" id="numberInput" step="2" value="10">
<button onclick="getStep()">Get Step Value</button>
<p id="result"></p>
<script>
function getStep() {
var input = document.getElementById("numberInput");
var stepValue = input.step;
document.getElementById("result").innerHTML = "Current step value: " + stepValue;
}
</script>
</body>
</html>
The output shows the current step value −
Current step value: 2
Setting the Step Value
Following example shows how to modify the step value dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Set Step Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Set Number Input Step Value</h2>
<input type="number" id="numberInput" value="0">
<br><br>
<button onclick="setStep(1)">Set Step to 1</button>
<button onclick="setStep(5)">Set Step to 5</button>
<button onclick="setStep(0.5)">Set Step to 0.5</button>
<p id="output"></p>
<script>
function setStep(stepValue) {
var input = document.getElementById("numberInput");
input.step = stepValue;
document.getElementById("output").innerHTML = "Step set to: " + input.step;
}
</script>
</body>
</html>
Try clicking the buttons and then using the input's increment/decrement arrows to see different step behaviors.
Practical Example
Following example demonstrates a complete step property implementation with user interaction −
<!DOCTYPE html>
<html>
<head>
<title>Step Property Demo</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Number Input Step Property Demo</h2>
<p>Enter a number and use increment/decrement arrows to test step behavior</p>
<input type="number" id="numberInput" value="10" style="padding: 8px; margin: 10px; font-size: 16px;">
<br><br>
<button onclick="setStep(5)" style="margin: 5px; padding: 8px 16px;">Set Step to 5</button>
<button onclick="setStep(0.1)" style="margin: 5px; padding: 8px 16px;">Set Step to 0.1</button>
<button onclick="getStepValue()" style="margin: 5px; padding: 8px 16px;">Show Current Step</button>
<div id="display" style="margin-top: 20px; font-size: 18px; color: #0066cc;"></div>
<script>
function setStep(stepValue) {
var input = document.getElementById("numberInput");
input.step = stepValue;
document.getElementById("display").innerHTML = "Step set to: " + stepValue + ". Use up/down arrows to test!";
}
function getStepValue() {
var input = document.getElementById("numberInput");
var currentStep = input.step;
document.getElementById("display").innerHTML = "Current step value: " + (currentStep || "1 (default)");
}
</script>
</body>
</html>
This example allows you to set different step values and observe how they affect the input's increment/decrement behavior.
Key Points
The step property controls the increment/decrement intervals for number inputs.
When no step is specified, the default value is
"1".The step value must be a positive number or
"any"for unrestricted steps.Both getter and setter operations work with string values, not numbers.
The step property affects form validation − values that don't match the step interval may be considered invalid.
Conclusion
The HTML DOM Input Number step property provides precise control over number input increments and decrements. By setting appropriate step values, you can create user-friendly numeric inputs that guide users toward valid values while maintaining proper form validation standards.
181 Views
