Great UI and UX experience using HTML5 new Input Types

For desktop, forms make sure that you have autofocus on the first input field when you open a particular form. Moreover, it’s good if you can move between elements with Tab key.

In mobile/tablet experience, it’s good to match keypad.Use specific HTML input types to show the correct keypad.

• input type=”text” displays the normal mobile device keyboard
• input type=”email” displays the normal keyboard plus ‘@’ and ‘.com’
• input type=”tel” displays the numeric 0-9 keypad
• input type=”number” displays a keyboard with numbers and symbols
• input type=”password” this hides characters as they’re typed in the field
• input type=”date” this displays the mobile’s date selector
• input type=”datetime” this displays the mobile’s date and time selector.
• input type=”month” this displays the mobile’s month/year selector
• input type=”url” this displays the normal keyboard plus .com, .in etc
• input type=”color” this display color selector.

Check the url for live demo

For clone the code click the github link