Phone: numeric keyboard for text input

You can do <input type="text" pattern="\d*">. This will cause the numeric keyboard to appear.

See here for more detail: Text, Web, and Editing Programming Guide for iOS

<form>
  <input type="text" pattern="\d*">
  <button type="submit">Submit</button>
</form>

As of mid-2015, I believe this is the best solution:

<input type="number" pattern="[0-9]*" inputmode="numeric">

This will give you the numeric keypad on both Android and iOS:

It also gives you the expected desktop behavior with the up/down arrow buttons and keyboard friendly up/down arrow key incrementing:

Try it in this code snippet:

<form>
  <input type="number" pattern="[0-9]*" inputmode="numeric">
  <button type="submit">Submit</button>
</form>

By combining both type="number" and pattern="[0-9]*, we get a solution that works everywhere. And, its forward compatible with the future HTML 5.1 proposed inputmode attribute.

Note: Using a pattern will trigger the browser's native form validation. You can disable this using the novalidate attribute, or you can customize the error message for a failed validation using the title attribute.

If you need to be able to enter leading zeros, commas, or letters - for example, international postal codes - check out this slight variant.

Credits and further reading:

http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/ http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios-numeric-keypad/

I have found that, at least for "passcode"-like fields, doing something like <input type="tel" /> ends up producing the most authentic number-oriented field and it also has the benefit of no autoformatting. For example, in a mobile application I developed for Hilton recently, I ended up going with this:

... and my client was very impressed.

<form>
  <input type="tel" />
  <button type="submit">Submit</button>
</form>

<input type="text" inputmode="numeric">

With Inputmode you can give a hint to the browser.