Use <input type="number"> for numeric form fields

Posted 3 months ago. Visible to the public. Repeats.

Any form fields where users enter numbers should be an <input type="number">.

Numeric inputs have several benefits over <input type="text">:

  • On mobile or tablet devices, number fields show a special virtual keyboard that shows mostly digit buttons.
  • Decimal values will be formatted using the user's language settings.
    For example, German users will see 1,23 for <input type="number" value="1.23">.
  • Values in the JavaScript API or when submitting forms to the server will always use a point as decimal separator (i.e. "1.23" even when the browser displays 1,23).
    You don't need any "conversion" hacks which try to replace commas with dots.
  • Additionally, tests which control browsers with Selenium will also see point-formatted values on non-English locales.
    Example: expect(page).to have_field("Example", with: "1.23") in Ruby with Capybara will work even on German systems where the browser displays 1,23 in the input field.

All in all, numeric inputs are great and you should use them.
However, they come with some quirks that you may want to avoid. We have a separate card for that.

Note

If you cannot use type="number", you can use the inputmode Show archive.org snapshot HTML attribute to control the virtual keyboard's appearance on mobile/tablet devices.
There is also the pattern Show archive.org snapshot attribute which allows specifying valid characters; it affects an input's validity state and will not prevent entering invalid characters.

Arne Hartherz
makandra.com
Say thanks1
Last edit
3 months ago
Arne Hartherz
License
Source code in this card is licensed under the MIT License.

Related cards:

Better HTML forms: use type, inputmode, enterkeyhint and autocomplete

Web forms can be made much more usable with a few HTML attributes. Short summary:

  • type: Tells browsers about the input data type. Mobile browsers will select a...

Use form_for without the enclosing form tag

In rare cases you might need something like form_for (for using form builder methods on the resulting block element) but without the surrounding form. One such case would be upda...

Rails: Assigning associations via HTML forms

Let's say we have posts with an attribute title that is mandatory.

Our example feature request is to tag these posts with a limited number of tags. The following chapters explain different approaches in Rails, how you can assign such a...

How to build the perfect number of blank records for a nested form

When you render a nested form for a Movie which has_many :actors, you want to render the right number of blank Actor forms. The right number means:

  • A minimum number of blank forms so the user can add more Actors to an existing Movie, ...

Remove resource fork files from a FAT volume on MacOS

Be careful!
The following solution will delete files on a volume. If you don't know exactly what you're doing, you can run into big trouble with your computer.

I play mp3 files on my car stereo that are stored on a SD-C...

How to create Excel sheets with spreadsheet gem and use number formats for cells like money or date

The following snippet demonstrates how you could create excel files (with spreadsheet gem) and format columns so that they follow a specific number format like currencies or dates do.

require 'rubygems...

Good real world example for form models / presenters in Rails

We have often felt the pain where our models need to serve too many masters. E.g. we are adding a lot of logic and callbacks for a particular form screen, but then the model becomes a pain in tests, where all those callbacks just get in the way. O...

User friendly form design

There are two types of forms: User forms, e.g. for sign up, and Administration forms, to maintain data. They are quite different in purpose: The former must be simple and quick to fill in, whereas the latter should organize a lot of data i...

How to not die with ActionView::MissingTemplate when clients request weird formats

When HTTP clients make an request they can define which response formats they can process. They do it by adding a header to the HTTP request like this:

Accept: application/json

This means the client will only understand JSON respon...

Always show all form errors during development

You've been there: A form cannot be submitted, but you don't see a validation error because the field at fault has no corresponding input field on the form. Because this is usually a bug, you insert debug information listing all errors into the fo...

Posted by Arne Hartherz to makandra dev (2024-02-05 16:41)
This website uses short-lived cookies to improve usability.
or learn more