Power Up Your Forms with HTML5 Input Types

  • 7 Read Time(minutes)
  • 1/5 Difficulty
  • <> Application

HTML5 has brought many new features that both developers and users can benefit from. One of them are input types. Building optimally working forms back in the days was a very complicated and tedious process. Developers needed to validate the input fields to prevent the transmission of wrong data. On the other end, users also had to pay attention to properly enter the data, which might have sometimes caused a hard time. Then came HTML5 and set an end to the pain. Mobile devices are spreading at an indigestible speed. Today’s mobile devices can actually benefit from using input types. They can modify their own virtual keyboard layouts, and therefore they can drastically improve user experience.

HTML5 Input Types

There are a total of 23 input types in HTML. Here they are in alphabetical order. The ones in bold are new in HTML5.

  • button
  • checkbox
  • color
  • date
  • datetime
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week

Mobile-Friendly Input Types

According to the list above, there are 13 new input types in HTML5, which is over double the amount that we could use in HTML 4.01! Let’s see the ones that we can use in our mobile devices to make our life easier.

[alert type=”alert-success”]Note: I tested with iOS 6.1 on an iPhone 5 and with Android 4.0.4 on an HTC Sensation[/alert]

Date

Entering a date can be hard when you have no idea how the software wants you to enter it. I’ve seen many applications and/or websites where you are required to enter a certain date into one single field, but without any help on what pattern should we apply.

This is when the new Date input type comes into play. The iPhone OS displays a date picker in place of the virtual keyboard. Android, on the other hand, doesn’t support this feature.

input-types-date

Datetime

All the same thing as with Date above, except here we have to enter a certain time, too. The iPhone does the job properly again, whereas Android fails to deliver a pleasant user experience. Actually, Android is not even close, at least a number pad would be cool to have in the cases of Date and Datetime.

input-types-datetime

Email

One of the most common uses of the new HTML5 input types is email. Apple iPhones recognize the email input type and display an “@” button and a “.com” button on the virtual keyboard. As of writing, Android 4.0 does not support the email input type (In fact, Android 4.2 Jelly Bean still doesn’t recognize it).

input-types-email

Month

The Month input type enables you to choose a year-month pair with ease. On iOS devices, at least. Unfortunately, Android doesn’t support the Month input type.

input-types-month

Number

I think the Number input type is the most commonly used one of all. By applying <input type=”number”>, mobile devices will transform their virtual keyboards into a number-based keyboard, on which we can easily input any kinds of numbers. Android users can finally be happy here, as the Number input type is accepted by Google’s OS, too.

input-types-number

Tel

Being a special case of the Number input type, Tel refers to telephone numbers. So, when you have a phone number field in your form, you should go for the Tel input type. Fortunately, Android loves this one, too! Apple’s virtual keyboard makes the buttons larger, whereas the Android keyboard gives you more options in one tap.

input-types-tel

Time

By using the Time input type, iOS devices can bring up their “timepicker”, the time version of the default datepicker. Android devices have no support for it yet.

input-types-time

URL

Last, but not least, we have the URL input type, which allows iPhones and iPads to display a “.”, a “/” and a “.com” buttons on the bottom of their virtual keyboards, thus making the input of web addresses a cake-walk. Sadly, Android doesn’t support the URL input type either.

input-types-url

Some statistics

  • iPhone supports 8 HTML5 input types: date, datetime, email, month, number, tel, time and url.
  • Android supports only 2: number and tel.

Let’s hope that later versions of Android will support more HTML5 input types.

Computer-Friendly Input Types

Some of the aforementioned HTML5 input types can be used on our home computers, too! Let’s take a quick look at how computers implement certain input types.

[alert type=”alert-success”]Note: Tested on an Apple MacBook Pro with Mac OS X 10.8, and on a Windows 8-based laptop.[/alert]

Date

As we could use a date picker on iOS-based handheld devices, we can do so on our PC and Mac, too! Left side: Mac OS X, right side: Windows.

input-types-date

Month

Same thing with the month picker, desktop computers and laptops can help us pick the right month.

input-types-month

Week

Computers can even let you pick an exact week, too! It could have some uses after all…

input-types-week

Other New Input Types

The rest of the input types are not beneficial for handheld devices (yet!), but are still here for us to use on our computers.

Color

Color pickers are not present on our phones, but we can use them on our computers! On the left side, you can see how a Mac OS X implements the color pickers, and on the right you can see the Windows 8 version.

input-types-color

Range & Search

We have a Range slider among the new HTML5 input types, with which we can set an amount using a comfortable slider instead of entering a number.

The Search input type is mainly for semantic purposes. When a browser sees this, then it will know that this is s search bar.

This is how they look on a Mac and a PC.

input-types-range&search

Browser-compatibility

Of course, with any new things, not all of the aforementioned input types are supported in major browsers. But! You should still use them bravely, and here is why: If your browser can’t recognize any one of these, it will use the default <input type=”text”> instead.

Try It Yourself!

Using a different operating system? Or are you just curious what else can be done with input types? Check out our live demo where you can see what your device supports!

LIVE DEMO: http://szaboka.com/wp-content/html/input-types/

Conclusion

With the use of the new HTML5 input types, users can get a more pleasant experience while browsing the web. Apple iOS currently supports all new input types, while Google’s Android still has to develop. Feel free to use the new HTML5 input types wherever you can, as they are definitely going to add value to your site!

Share it?

There should be an ad here...

Aaaw, too bad you're using AdBlock. Care to add my Blog to your whitelist, please? Much appreciated!

Written by

Web designer, web developer, UI/UX designer 9-5. Energy drink consumer, video game addict, avid blogger 5-9. Owner of Szaboka.com.

2 Responses

Comments

  • sundar said on 2013.10.15. at 11:36 Reply

    Great article. Useful information. Thanks for Posting.

Join the Conversation

Captcha: three × = 9