How to use input type field with steps in HTML?

HTML Web Development Front End Technology

In this article, we are going to use input type field with steps in HTML.

We use step attribute to specifies the interval between numbers in an <input> element. For example, if our step = "2", numbers could be -4, -2, 0, 2, 4, etc.

The step sets the stepping interval when clicking up and down spinner button in the input field, moving a slider left and right on a range. If not explicitly included step, the default will be set to 1 for number and 1 unit type for the date/time input types.

The default stepping value for number inputs is 1, allowing only integers to be entered, unless the stepping base is not an integer. The default stepping value for time is 1 second.

We can also use step attribute together with the max and min attributes to create a range of values in the input field.

Syntax

Following is the syntax to use input field with steps in HTML.

<input type="number" id="points" name="points" step="enter number">

Example

Following is the example program to use input field with 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 have used step=5 in the above example program. Which will navigate to the -10, -5, 0,5,10,15……………. so on.

Example

Following is another example program to use input field with 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 have entered step=10 in the above example program. Which will navigate to the 10, 20, 30, 40, 50, 60……………. so on.

Using Steps on an Input Field with a Range

These steps can also be used in the input field which is limited range. Hence, maximum and minimum attributes are also to be declared.

Syntax

Following is the syntax to use step attribute together with the max and min attributes to create a range of values in the input field.

<input type="range" min="0" step="3" max="30">

Example

Following is the example program to use step attribute together with the max and min attributes to create a range of values in the 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 have used step=3 in the above example program. Which will navigate to the 0,3,6,9……………. so on to 30(as we specified max=30).

As we see the value will not precede, our minimum value which is specified in the input field.

As we see the value will not exceeds, our maximum value which is specified in the input field.

Lokesh Badavath

Updated on: 21-Nov-2022

589 Views

Kickstart Your Career

Get certified by completing the course

Get Started