Which is the Float Input Type in HTML5

Solutions with the step value

The “number” type field is intended to use for numerical values. It has some useful attributes such as min, max, and step. For a number field, a valid value should be a floating-point number between specified minimum and maximum values. If a step attribute is set, a valid value will be divisible by the step value.

The step attribute will control which values are valid. So, change this value to whatever you need. Some browsers will add toggle buttons to increment/decrement the values by the value specified with the step. If no value is specified, it will be set to 1 by default.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of using type="number" with its min, max, and step attributes:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <input type="number" min="5" max="25" step="5">
    </form>
  </body>
</html>

Here, the valid input would be 5, 10, 15, 20, and 25, and any other value will be rejected.

For any floating-point numbers, use type="number”, as it is widely supported and can also help to prevent random input.
You can use the “any” value with step to allow any number of decimal places. Let’s see an example to understand how various steps affect different input types.

Example of using the step attribute with various input types:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <input type=number step=1 /> Step 1 (default)
      <br />
      <input type=number step=0.01 /> Step 0.01
      <br />
      <input type=number step=any /> Step any
      <br />
      <input type=range step=20 /> Step 20
      <br />
      <input type=datetime-local step=60 /> Step 60 (default)
      <br />
      <input type=datetime-local step=1 /> Step 1
      <br />
      <input type=datetime-local step=any /> Step any
      <br />
      <input type=datetime-local step=0.001 /> Step 0.001
      <br />
      <input type=datetime-local step=3600 /> Step 3600 (1 hour)
      <br />
      <input type=datetime-local step=86400 /> Step 86400 (1 day)
      <br />
      <input type=datetime-local step=70 /> Step 70 (1 min, 10 sec)
      <br />
    </form>
  </body>
</html>