Proper Rendering of KEYBOARDS is an Important UX

Published in

JavaScript in Plain English

4 min readJan 29, 2023

Yes, I hate it when I do not get a keyboard with just numbers when a website/app asks for a phone number, PIN code, etc.

Not just that, a relevant keyboard for the respective input field should be rendered to give a user the best experience he/she can get and the type attribute in HTML does just that.

For example, a keyboard with '@'for an email field and
a keyboard with '/','.' for typing in a URL, etc.

The “type” attribute of the input tag provides a lot of information to the browsers including what kind of keyboard to display for devices with onscreen keyboards such as phones, tablets, etc. Let’s take a look at some of the values it accepts in detail.

NOTE: The keyboards rendered may differ from what you see in the below images. It might be due to different reasons — different browsers, their version, or your default/custom settings or using Android/IOS.

1. Numeric Keypad

This is ideal for inputs that require just numbers and no letters such as phone numbers, PIN, credit card numbers, etc.

<input type="numeric">

2. Standard Tele Keypad

You can also use “tel” if you want * and # and alphabet as they are present on a dial pad.

<input type="tel">

3. Email field

It brings the @ character into the keyboard, as well as the dot (.) character.

<input type="email">

4. Typing a Web Address

The keyboard comes with a handy shortcut for users to append TLDs (e.g. .com) and the keys that are typically used in web addresses, like the dot (.) and forward slash (/) characters.

<input type="url">

5. Date and Time

Don’t make your user suffer just to enter a date, use type='date' and make their work easier instead. Similarly, you can use type=’time’for the time field and also add them for both functionalities together as
type='datetime-local' .

6. Forms? Search? Filter feature?

The keyboard shows an Enter key, useful for forms submission, a search feature, etc.

<input type="search">

Bonus

<input type="password"> → Should be used for any sensitive fields like passwords, credit/debit card CVV, etc.

<input type="color"> → Renders a color picker that you can customize through javascript.

Wrappity wrap up time

The type attribute is very diverse. It lets you change the keyboards, upload files, hide the field, pick a color, and a lot more. You can read the MDN docs if you are curious about them.

Thanks for reading till the end. Hope you learned something useful.

Please consider showing your appreciation by providing feedback and suggestions in the comment section.

If you are pleased too much, you can always buy me a coffee 😉