site logo

Numbers in forms according to HTML5

Entering numbers into forms and check the validity of the entered numbers greatly simplifies the HTML 5 standard, which specifies a new form element input type=number. With attributes we can set the permitted range of numbers, allowed count of decimal places and set the requierement to fill in the input field. Native browser validation can check the entered value even when javascript is turned off.

For testing of this new form element, miniform with one input field of type number, one text box and submit button is prepared. Testing of a new form element has meaning only in the browsers Chrome, Safari and Opera. Browsers Firefox and IE process element number as an element of type text, it means no control is performed. The allowed number range is 0...2000000 (two milions), one decimal place and fill in the field is mandatory.

visible format
submitted format

You can type in the number directly from the keyboard, use the buttons of spinner, or set the value by using the cursor arrow keys (up, down). When submitting the form, the value of number is validated and eventually an error is reported. Only the correct value is submitted to the server and server returns the two form fields to make visible possible difference in the number formatting according to national customs.

Native validation of number in browsers Opera, Safari and older Chrome requires entry of decimal number with decimal point (full-stop) as decimal mark, without thousands separator. Such a format is familiar for programmers. National conventions requires a somewhat different way of typing numbers viz. Wikipedia , and Chrome browser experiments vith national format of numbers.

Which character is applied as decimal separator (comma or period) in Chrome is determined by browser language, latterly according to the settings in the Control Panel. Digit grouping, or thousands separator is not implemented.

When decimal value of form element number  is submitted to the server, there is always decimal point as a decimal separator, regardless of national conventions. Submitted number can be found in the gray form field above (after the form is submitted). The same rule is applied when javascript is used to get the value from element number. This is true only when the element number is implemented in the browser.

Attributes of element number

<input type="number" name="..." min="0" max="2000000" step="0.1" value="123.4" required>

Attribute  type="number" is required for this type of form element. Unique attribute  name="..." is highly recommended. Attributes min and max set allowed limits of the value of entered number. Attribute  step determines the increment or decrement. The default value is step=1. Attributes defining the range of value are not mandatory. When decimal number is used for these attributes, use the decimal point as decimal separator regardless of locale.

When you require to cancel the limit of decimal places count, according to step attribute, use step="any". Then the default value step="1" is applied, and the decimal part of the number have to be typed by numeric keys. Opera has some issue with this type of attribute.

Optional attribute  value="..." is useful when editing values stored in the database. Again, any real  value must be specified with a decimal point as separator and with the number of decimal places in accordance with the attribute step. Attribute  required specifies that the field must not remain empty.

Optional attribute placeholder="..." is active only in Opera. It is not possible to use this attribute for help whether use a decimal point or comma.

Element number and CSS

With help of CSS, it is possible to set all common sizes of elements such as width, height,  property border specify frame type and background set the background color of this element. Setting the background color switches the look into classic motive, as is known from win2000.

Sometimes it is good practice to align numbers to the right side. In this way numbers in Opera are aligned by default. In Chrome, numbers are aligned to the left (as well as general text), even though it is possible to prescribe (text-align: right;) explicitly. Spinner buttons in Chrome and Safari are drawn inside the border of element, Opera renders the spinner control outside of the border and the buttons are somewhat larger. Opera displays the element number of 2 pixels wider than specified by width property.

In browsers based on WebKit the spinner control can be removed by using the following CSS code. On the other side, the spinner is an indicator of the form element number.


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;}

Notes

Practical implementation of form element input type="number"  in several browsers is rather confusing. So far, Firefox and IE browsers are completely short of this element. Intranet web applications, which operate mostly with numeric values have to rely on a classical text box and data validation using javascript instead of relying on the native validation and setting of several attributes.

When integer type of value (without thousands separator) is typed into this input element, usually no issue appears. Decimal numbers are more demanding. Trouble can cause the keyboard switched to a different language than what is set for Chrome browser in Windows. The character "dot" on the numeric keypad changes the meaning according to national conventions. For example the German keypad turns the dot into a comma. Then with English version of Chrome and keyboard switched to German language, numeric keypad types incorrect decimal separator.

Count of decimal places are specified by the attribute step. When the count of decimal places is exceeded, the error is reported. Also an error is reported when the value entered from the keyboard, does not meet the value according to attribute step. Then it is necessary to use a spinner, or the cursor keys and adjust the number. Entering large numbers using the spinner, or the arrow keys is time consuming, most users probably will use numeric keypad.

Native validation reports overflow and underflow the limits. If required attribute is set up, then empty field is reported. All other errors such as decimal separator typing error, or replacement the digit "zero" for the character "O", or forgotten space around number (Opera) are summed up in one type of error message. It is not always clear what the error is about. In this case it is necessary to use a spinner or the cursor keys and the increase or decrease the value. This action modifies the number according to the desired format. Native validation messages in Chrome and Opera are localized.

updated 2011-10-13