Input type=number what to do with the step attribute.

[NickMNS]

I have a form with an input type="number" field where the number to be entered must be a number between -1 and 1, and it can be a decimal of varying length. Some users may want to enter 0.9 while others may want to enter 0.9999. The problem I have is with the step attribute. The default value for step is 1, which is not great since my numbers need to be less than 1. I can set the step to any, which allows any number to be entered (this is good) but the default html5 up/down arrows for the input, default to increment of 1. I can set a step to the longest acceptable decimal, say 0.00001, but now each arrow increment is 0.00001 and going from 0 to 0.1 requires 10,000 increments, or for the user to click the arrow 10,000 times. What to do?

Can the arrows be eliminated? Will that help? This appears to only be an issue on desktop, as mobile browser don't display the arrows but show a keypad.

To eliminate the arrows I can use type="text" and then add a regex pattern. But in this case on mobile the user will get full alphanumeric keyboard in place of a number pad, which is less than optimal. I discovered that there exists an attribute "inputmode" which should tell the browser to use a decimal keypad, but I haven't tested it.

Do people actually use the arrows? I use them.

A second issue in regards to this input, is how should one describe this number, what should the label read. It is a percentage of some constant, but the value is expressed in a decimal. Using say gravity as an example, with an input value of 0.5 ==> 50% of gravity:
Force as a percentage of gravity
or
Force as a proportion of gravity

[tangor]

Is this, example, for finding stats, as in sports?

instead of having the user input .233 have three fields, each with 0-9 possible and process on the back side

display is "enter stat . txtbox txtbox txtbox"

If on the other hand you actually need 10,000 input points not quite sure how to make that simple, or arrow up/down easy...

[tangor]

Meant to add: reduce the possibility of user error in entry of numbers. Keep it to a field entry over the scope of your offer and you will get better results for you AND the user!

Been there, done that, don't want to wear the t-shirt when chit gets entered!

[lammert]

I don't know how accurate the entry has to be but would <input type="range"> be a good alternative? It provides a slider between the min and max values.

[NickMNS]

@tangor this site has nothing to do with sports stats, your idea is interesting I actually used a similar approach on a site but for time, where I broke down hours, minutes and second into their own inputs, in that case it was because the time was measure of duration and not time of day. But the idea is not a good fit for this particular website.

If on the other hand you actually need 10,000 input points

It is not that 10,000 input points are needed, it is that a number like 0.9 and 0.99999 are equally likely to be entered. The 0.9999 being a number approaching 1, but not 1. So it would be nice if a user could arrow up/down and 0.1 steps but still be able to enter a number with five significant digits. I guess another alternative would be to use JS to catch the case where the number has more than one decimal and then allow it to pass.

@lammert
I have thought of using range, I think that in most cases precision would not be an issue, but there are some case which likely would be.

[tangor]

Doesn't matter if stats or something else.

n.nnnnn (or as many digits as desired) as a mask can be broken into multiple input actions, each stepping up/down by 1. The question was based on HTML5 ... and stepping numbers differently than designed.

Would be very interested in your solution!

[NickMNS]

Another option I came across is to use css to hide the up/down arrows on the input. This seems at this point to be the simplest solution. Once the website goes live and I have sufficient traffic, I can then a/b test other solutions, and pick the best.