HTML 5

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:

• https://www.isotoma.com/blog/2012/03/02/html5-input-typenumber-and-decimalsfloats-in-chrome

Browser validation

To end the browser validation add:

<input type="number" novalidation>