Mobile keyboard type and how to activate them

Published on 2024-05-18 by Raul

Ever sine the smartphone market exploded, HTML5 took off as well. Every smartphone supports a subset of HTML5 specifications. Amongst the most important ones are input types, which trigger different keyword types.

Disable autocorrect

<input autocorrect="off" />

Why disable it? When using email addresses, or captcha texts, or anytime the user needs to write in the box something that's not related to real words, you should disable it.

Numeric keyboard

<input type="tel" /> - for phone numbers

<input type="text" pattern="\d*" /> - for numeric input only

<input type="number" /> - for number input, with up-down arrows

Text keyboard options

<input type="email" /> - for email addresses

<input type="text" autocapitalize="off" /> - disabled autocapitalization (Eg: name instead of Name)

<input type="date"> - invoke device's date picker.

What next?

Want further detail and best practices regarding touch keyboards? See this SmashingMagazine article

Interactive cheat sheet here


Keep in touch


About

Hey there, I'm Raul, owner of CreativeCLR, a small consulting company.

Feel free to drop me any question you might have on this post using the comment section or the contact page.