HTML5 supports a number of new field types, especially for <input> like date, number, email which will support mobile users to be displayed with a customized editor for certain fields (like numbers for number fields and date picker for date fields)
input[type=”number”]
Will give an input field, which only allows numbers or decimals. On supporting browsers a custom touch input or up/down keys are shown.
Good to know1
- [pattern] is not supported by number fields
- Chrome does not allow usage of invalid decimal signs
- Firefox does allow usage of invalid decimal signs, but will not return non valid values on submit!
- Firefox (?) takes page language into account when deciding which decimal signs are valid ([lang=”de”] only accepts “,”, while [lang=”de-ch”] accepts “,” and “.”)
- For Firefox, setting [lang=”x”] has the same effect as when setting on <html> (e.g. allowing “,” and “.” when set to [lang=”de-ch”])
- It’s not possible to get the “raw” user input from the field