Use input type="email"

January 12, 2014

When ever you have a login system that uses email addresses as the users's primary identifier, it's important to tag the input fields with type="email".

It should look like this:

<input name="email"
    type="email"
    placeholder="Enter your email address"
    autocapitalize="off"
/>

The reason this is important is because on mobile devices, the browser will actually swap the keyboard with one specifically email addresses. It will be easier to enter email specific characters like @ or your .tld. It’s already hard enough to type on phones, and this makes logging in a little easier for your users.

Equally important, old browsers or ones that don’t understand the new attributes will simply ignore them, using type="text" instead.

In general, it's best to use type values that best represent the kind of data that is going in the input. Other supported types are:

  • color for color values
  • date and datetime for dates or times
  • number for numerical data
  • range to represent a range of numbers
  • tel for telephone numbers

More information on developer.mozilla.org