Saturday, May 19, 2018

Is there a float input type in HTML5?



According to html5.org, the "number" input type's "value attribute, if specified and not empty, must have a value that is a valid floating point number."




Yet it is simply (in the latest version of Chrome, anyway), an "updown" control with integers, not floats:











Is there a floating point input element native to HTML5, or a way to make the number input type work with floats, not ints? Or must I resort to a jQuery UI plugin?


Answer



The number type has a step value controlling which numbers are valid (along with max and min), which defaults to 1. This value is also used by implementations for the stepper buttons (i.e. pressing up increases by step).



Simply change this value to whatever is appropriate. For money, two decimal places are probably expected:






(I'd also set min=0 if it can only be positive)




If you'd prefer to allow any number of decimal places, you can use step="any" (though for currencies, I'd recommend sticking to 0.01). In Chrome & Firefox, the stepper buttons will increment / decrement by 1 when using any. (thanks to Michal Stefanow's answer for pointing out any, and see the relevant spec here)



Here's a playground showing how various steps affect various input types:






Step 1 (default)
Step 0.01

Step any
Step 20
Step 60 (default)
Step 1
Step any
Step 0.001
Step 3600 (1 hour)
Step 86400 (1 day)
Step 70 (1 min, 10 sec)









As usual, I'll add a quick note: remember that client-side validation is just a convenience to the user. You must also validate on the server-side!


No comments:

Post a Comment

plot explanation - Why did Peaches' mom hang on the tree? - Movies & TV

In the middle of the movie Ice Age: Continental Drift Peaches' mom asked Peaches to go to sleep. Then, she hung on the tree. This parti...