在HTML中，在输入标签中使用'step'属性的目的是什么？

Question

the purpose of using step attribute in input tag in html?

input type="number" name="points" min="0" max="100" step="10" value="30"

From the above line minimum length is zero, maximum length is 100, default value is 30 but i can't understand what action doing when assign step="10"

Answer 1

You can think of Step as how many steps you have to move from the current value.

For example,

<input type="number" name="points" min="0" max="100" step="10" value="30" />

Imagine yourself in a staircase. Here if you imagine value to be the stair number on which you are standing, step is the next x number of steps after which you can stop.

In your case you start with value="30" , means you are standing on stair number 30 and your step="10" means you can only stop at stair number 40 , 50 , 60 etc.

If your value="31" means you are standing on stair number 31 and your step="10" means you can only stop at stair number 41 , 51 , 61 , etc.

Answer 2

The step attribute specifies the legal number intervals for an element. Example: in your case, step="10", legal numbers could be -10, 0, 10, 20, etc. Still if you can't get it, you can go through this link.

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_step

Answer 3

The step attribute is used to state what steps between the min and max value are allowed. In this case the values 0, 10, 20, ..., 100 are allowed, not for example 12 or 57.

Do note that support for this in browsers is quite patchy at the moment, so you can't rely on the value sent to the server to actually be only one of the allowed ones.

And there is no length defined in that element. It is the minimum and maximum values that specified.