The step attribute in the HTML <input> element specifies the valid number intervals for input values. It determines how much the value should increment or decrement when the user interacts with the control (e.g., clicking the up/down arrows in a number input field). The step attribute is particularly useful when working with numeric values or values like time and date.
When the step attribute is defined, the user can only input values that match the step increments.
1. If the step value is set to 1, the user can input values like 1, 2, 3, etc.
2. If the step is 0.1, the user can enter decimal values like 1.1, 1.2, etc.
3. The default step value is 1 if not specified.
step-attribute.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Step Attribute Example</title> </head> <body> <form action="https://httpbin.org/post" method="POST"> <label for="quantity">Enter a quantity (in multiples of 5):</label><br> <input type="number" id="quantity" name="quantity" min="5" max="50" step="5" required><br><br> <label for="price">Enter a price (increments of 0.01):</label><br> <input type="number" id="price" name="price" step="0.01" required><br><br> <input type="submit" value="Submit"> </form> </body> </html>
Above snippet generate below screen.
<label for="quantity">Enter a quantity (in multiples of 5):</label><br> <input type="number" id="quantity" name="quantity" min="5" max="50" step="5" required><br><br>
In this example,
1. The min="5" ensures the minimum value is 5.
2. The max="50" ensures the maximum value is 50.
3. The step="5" means the user can only enter numbers that are multiples of 5 (e.g., 5, 10, 15, etc.).
4. The browser will prevent or alert the user if they try to enter a number that doesn’t align with the defined step.
<label for="price">Enter a price (increments of 0.01):</label><br> <input type="number" id="price" name="price" step="0.01" required><br><br>
Here, the step="0.01" allows the user to enter values like 0.01, 0.02, 1.23, etc.,
No comments:
Post a Comment