HTML 5: Difference between revisions
Jump to navigation
Jump to search
Created page with "{{TOCright}} == Introduction == A collection of HTML 5 tips and Tricks. == Chrome input == As you may already know, HTML5 has introduced a number of new input types, one of..." |
|||
| (4 intermediate revisions by the same user not shown) | |||
| Line 5: | Line 5: | ||
== Chrome input == | == Chrome input == | ||
=== Real numbers === | |||
As you may already know, HTML5 has introduced a number of new input types, one of which is the “number” type. | As you may already know, HTML5 has introduced a number of new input types, one of which is the “number” type. | ||
As you might expect, this is a form field which accepts numeric input. | As you might expect, this is a form field which accepts numeric input. | ||
| Line 19: | Line 20: | ||
<input type="number" step="any" /> | <input type="number" step="any" /> | ||
</pre> | </pre> | ||
=== iOS === | |||
On iOS devices the above trick will enable a alphanumeric keyboard. If you are using something like: | |||
<pre> | |||
<input type=text" ..> | |||
</pre> | |||
the keyboard will not have numbers selected. | |||
See: | |||
* https://www.isotoma.com/blog/2012/03/02/html5-input-typenumber-and-decimalsfloats-in-chrome | * https://www.isotoma.com/blog/2012/03/02/html5-input-typenumber-and-decimalsfloats-in-chrome | ||
== Browser validation == | |||
To end the browser validation add: | |||
<pre> | |||
<input type="number" novalidation> | |||
</pre> | |||
== See also == | == See also == | ||
| Line 29: | Line 46: | ||
[[Category:Index]] | [[Category:Index]] | ||
[[Category:software]] | |||
Latest revision as of 10:02, 25 February 2019
Introduction
A collection of HTML 5 tips and Tricks.
Chrome input
Real numbers
As you may already know, HTML5 has introduced a number of new input types, one of which is the “number” type. As you might expect, this is a form field which accepts numeric input. So what happens in Chrome with the following HTML when we try to enter a decimal (floating point) number and submit the form?
<input type="number" />
Answer: Chrome pops up a validation error:
Invalid value
Better use:
<input type="number" step="any" />
iOS
On iOS devices the above trick will enable a alphanumeric keyboard. If you are using something like:
<input type=text" ..>
the keyboard will not have numbers selected.
See:
Browser validation
To end the browser validation add:
<input type="number" novalidation>