NEW! Raven by TapClicks - SEO + SEM Tools with Deeper Competitive Insights

GET STARTED FREE External Link Tap Click Logo Tap Click Logo

The Raven Blog

We write tips for digital marketers and we create beginner through advanced guides for search engine optimization. Improve your SEO and Content Marketing game.

📱 Improve your Mobile UX with these Form Input Data Types

Written by and published

One of the most frustrating experiences a person can have on their phone is filling out a form. That’s because most web developers and designers don’t optimize their forms for mobile users.

It ends up that optimizing forms for mobile users is quite simple. All it takes is changing the data type for the input field. For example, when you change the data type from text to tel, the mobile browser will display the telephone keyboard instead of the normal QWERTY keyboard.

Why you should optimize your forms for mobile

Many mobile visitors will give up on forms if they’re too long and cumbersome to fill out. A mobile-friendly form greatly increases the chances of a visitor completing it.

Another reason to optimize your forms for mobile is Google. Google continues to focus heavily on mobile and UX, and there’s a chance that these data types could influence ranking in the future.

6 amazing data type examples for mobile forms

The following mobile-friendly data types are based on HTML standards that are supported by all modern mobile OSes and browsers.


Use the type=”tel” data type to display the phone keyboard on mobile devices. Not only does it make inputing numbers faster, it can also use the mobile OS’ autofill feature.

Telephone Input Type


Use the type=”time” data type to display the time picker on mobile devices.

Time Input Type


Use the type=”email” data type to display an email-optimized keyboard. Most mobile OSes like iOS include an autofill feature.

Email Input Type


Use the type=”date” data type to display a date picker on mobile devices.

Date Input Type


Use the type=”month” data type to display the month and year picker.

Month Input Type


Use the type=”number” data type to display a number-optimized keyboard.

Number Input Type

A full list of data types is available from the Web Hypertext Application Technology Working Group (WHATWG) – an organization that maintains and evolves standards for HTML.

Marketing Report Example

Learn About Our Site Auditor

Analyze over 20 different technical SEO issues and create to-do lists for your team while sending error reports to your client.

3 Responses to “📱 Improve your Mobile UX with these Form Input Data Types”