W3docs
en
Log in

Which is the Float Input Type in HTML5

In this tutorial, you’ll learn which is the float input type in HTML5. Read our snippet and try some examples with the step value to see the solution to this problem.

Tags

Solutions with the step value

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

The <span class="attribute">step</span> 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 <span class="attribute">step</span>. If no value is specified, it will be set to 1 by default.

Example of using type="number" with its <span class="attribute">min</span>, <span class="attribute">max</span>, and <span class="attribute">step</span> 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>
Try it Yourself »

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

Tip

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 <span class="attribute">step</span> 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 <span class="attribute">step</span> attribute with various input types:

Example of using the <span class="attribute">step</span> 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>
Try it Yourself »