How to set mobile input types in HTML?

  Uncategorized

Mobile devices have virtual keyboards. There is only limited space on the display to show the keyboard, so it will be helpful to the user to see only the needed keys. Using the right input type will dramatically improve the mobile experience.

There are many different input types available for html pages. Here are my favorites.

Input type text

The most common input type used. This will show the default keyboard on mobile devices.


Input type email

The input type email will show a virtual keyboard with easy access to the AT-Sign (@), the dot and sometimes there will be shown the most common top level domains, so you don’t have to enter “.com” letter by letter. The difference to the text input type is only marginal, but the mobile user experience will increase dramatically if you use the input type on the right field.


Input type tel

With the input type tel you can make it easy to enter a telephone number because you will get a virtual keyboard with a numeric keypad which includes everything you need to enter a phone number like sharp (#) or plus (+).


Input type number

The mobile input type “number” is correct if you have to enter numbers only. It is different from the input type tel and is the right type to enter numbers of barcodes, counters or anything else mainly containing digits but i think this type shouldn’t be using very often because in most cases tel will work better.


Input type password

If you ever made a login form you should know about it and I don’t want to describe it here, because there are millions of good descriptions about this input type in the World Wide Web.


Input type date

The name of the input type is date and this is what you can enter here. You don’t have to implement a JavaScript calendar widget or something else. Just set the tags attribute type to date and the mobile will do the rest for you. I like it.


Input type datetime

It is like the input type date, but it adds the time to the input. So you can enter date and time into your input field. Just replace the tag attrubte type from date to datetime and you have a input field for date and time.


Input type search

If your input field is a search field, you can use this type. It will show the (nearly) regular virtual keyboard with on exception. You get a search button direct on the virtual keyboard if you use this mobile input type. It is quite helpful and I use it often if I need a search function in my form.

 

Note: Some devices and virtual keyboards do not support every mobile input type. But If you user iOS or Android with a common keyboard, I’m sure you will get the right keyboard for your input type. And there are more…. but the above are the main types (IMHO).