Skip to content
Fix Code Error

Is there a float input type in HTML5?

March 13, 2021 by Code Error
Posted By: Anonymous

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:

<input type="number" id="totalAmt"></input>

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?

Solution

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:

<input type="number" step="0.01">

(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:

<form>
  <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>

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!

Answered By: Anonymous

Related Articles

  • Most effective way to parse JSON Objects
  • How to represent arrays within ember-data models?
  • C++ template,typename and operator
  • Why doesn't the height of a container element…
  • Aurelia UX showcase app fails to load
  • Ukkonen's suffix tree algorithm in plain English
  • Generating random whole numbers in JavaScript in a…
  • How would I be able to multiple select and pass data…
  • Latest jQuery version on Google's CDN
  • Specifying java version in maven - differences…
  • Spring Boot - Cannot determine embedded database…
  • Problems Installing CRA & NextJS from NPM…
  • How to use html template with vue.js
  • Error: undefined Unable to resolve module
  • Failed to execute goal…
  • Include resource directory into Quarkus target output
  • Plugin…
  • Eclipse will not start and I haven't changed anything
  • Tomcat 7 "SEVERE: A child container failed during start"
  • Could not calculate build plan: Plugin…
  • Maven2: Missing artifact but jars are in place
  • Why am I getting a "401 Unauthorized" error in Maven?
  • Downloading jQuery UI CSS from Google's CDN
  • during wct test: Failed to load resource: the server…
  • Active tab issue on page load HTML
  • Spring data jpa- No bean named…
  • How can I determine whether a 2D Point is within a Polygon?
  • Plotting curve over several subplots in R
  • Jetpack Compose and Hilt Conflict
  • Use of Jquery on scroll event
  • Draw in Canvas by finger, Android
  • How do I tell Maven to use the latest version of a…
  • How to add fade animation for this tab
  • What does the CSS rule "clear: both" do?
  • What is the most "pythonic" way to iterate over a…
  • UnsatisfiedDependencyException: Error creating bean…
  • Can't install via pip because of egg_info error
  • How to truncate float values?
  • Aurelia bundling issue with virtual directory
  • What does do?
  • Run chrome in fullscreen mode on Windows
  • Efficient Algorithm for Bit Reversal (from…
  • Vuetify stepper alert message when blanks not filled
  • Problems using Maven and SSL behind proxy
  • Building executable jar with maven?
  • Is it possible to apply CSS to half of a character?
  • Adding Dynamic Input Fields With VueJs
  • Manually adding a Userscript to Google Chrome
  • Polymer 1.x: Accessing all Properties of Polymer object
  • Retain precision with double in Java
  • java.lang.ClassNotFoundException:…
  • Partition a Dataset according to the Min & Max…
  • C Program to Mark as "Min" and "Max" from the array…
  • Why does C++ code for testing the Collatz conjecture…
  • How to properly update the library parts
  • Python: Float to Decimal conversion and subsequent…
  • m2eclipse error
  • How to implement the factory method pattern in C++ correctly
  • Detect whether a Python string is a number or a letter
  • "Non-resolvable parent POM: Could not transfer…
  • When I'm testing a web app by JUnit and Mockito I…
  • No 'Access-Control-Allow-Origin' header is present…
  • Find Minimum and Maximum in given array where…
  • DataTable draw daterange from vaadin-date-picker in polymer
  • JUNIT @ParameterizedTest , Parameter resolution Exception
  • Exception in thread "JobGenerator"…
  • The superclass "javax.servlet.http.HttpServlet" was…
  • Doubts about js number representation and his bit…
  • Dynamically update values of a chartjs chart
  • Comparison between Corona, Phonegap, Titanium
  • jQuery Mobile: document ready vs. page events
  • Maven: The packaging for this project did not assign…
  • Unable to Build using MAVEN with ERROR - Failed to…
  • Android Image View Pinch Zooming
  • I have just started learning function pointers in C…
  • Is floating point math broken?
  • How to change the range slider addition by click on…
  • Printf width specifier to maintain precision of…
  • Finding all possible combinations of numbers to…
  • Vue - How to make active dynamically based on…
  • What do these operators mean (** , ^ , %, //)?
  • Increasing size of semi circle using css
  • What does the clearfix class do in css?
  • "Thinking in AngularJS" if I have a jQuery background?
  • Incorporate JQuery-file-upload to application
  • Javascript text animation not triggering
  • Sorting 1 million 8-decimal-digit numbers with 1 MB of RAM
  • Use Wrapbootstrap theme with Aurelia
  • Why does changing 0.1f to 0 slow down performance by 10x?
  • Backbone.js - Using new() in Model defaults -…
  • Maven is not working in Java 8 when Javadoc tags are…
  • Random normal distribution generator comparison
  • How to scale down a range of numbers with a known…
  • What is the difference between float and double?
  • Explanation on Integer.MAX_VALUE and…
  • Navbar not filling width of page when reduced to mobile view
  • Exception in thread "main"…
  • Vuetify stepper vertical and non-linear issues
  • Xamarin 2.0 vs Appcelerator Titanium vs PhoneGap
  • How do I get the overall maximum value in a 2d array?

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Altering column size in SQL Server

Next Post:

In Python, how do I convert all of the items in a list to floats?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error