Home > Article > Web Front-end > How to use input type field with steps in HTML?
How to use input type field with steps in HTML?
- WBOYforward
- 2023-09-05 23:49:061032browse
In this article, we will use input type fields with steps in HTML.
We use the step attribute to specify the interval between numbers in the element. For example, if our step = "2", the numbers could be -4, -2, 0, 2, 4, etc.
The step size sets the step interval when clicking the up and down fine-tuning button in the input field and moving the slider left or right within a certain range. If no step is explicitly included, the default value for numbers will be set to 1 and for date/time input types the default value will be set to 1 for unit types.
The default step value for numeric input is 1, and only integers are allowed unless the step base is not an integer. The default step value for time is 1 second.
We can also use the step attribute with the max and min attributes to create a range of values in the input field.
grammar
The following is the syntax for using input fields and steps in HTML.
<input type="number" id="points" name="points" step="enter number">
Example
The following is a sample program using input fields and steps 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>
We used step=5 in the above example program. It will navigate to -10, -5, 0, 5, 10, 15…………. etc.
Example
Here is another example program using input fields and steps in HTML -
<!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>
We entered step=10 in the above sample program. This will navigate to 10, 20, 30, 40, 50, 60…………. etc.
Using steps on input fields with ranges
These steps can also be used for input fields with a limited range. Therefore, the maximum and minimum properties also need to be declared.
grammar
The following is the syntax for creating a range of values in an input field using the step attribute and the max and min attributes.
<input type="range" min="0" step="3" max="30">
Example
The following example program uses the step attribute and the max and min attributes to create a range of values in an input field.
<!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>
We used step=3 in the above example program. This will navigate to 0, 3, 6, 9…………. And so on up to 30 (as we specified max=30).
As we can see, the value will not precede the minimum value specified in the input field.
As we can see, the value will not exceed the maximum value specified in the input field.
The above is the detailed content of How to use input type field with steps in HTML?. For more information, please follow other related articles on the PHP Chinese website!