DEV Community

loading...

Always use semantic HTML inputs

po5i profile image Carlos Villavicencio ・1 min read

I know sometimes is tedious to use a correct component for requesting a user input in HTML. But using the proper component will significatively enhance the user experience and it's easier to see it in action while in mobile devices.

Today I Learned that you can step x decimal in an input type="number". Let's say you want to ask for a price:

<input type="number" required name="price" min="0" value="0" step="any">
Enter fullscreen mode Exit fullscreen mode

If you omit the step="any" part, the input will validate only for integer values.

But if you use instead:

step=".01"
Enter fullscreen mode Exit fullscreen mode

Then, every time you click on the arrows, the value will be updated to ±0.01. Pretty handy isn't it?

Discussion

pic
Editor guide