Michael Gearon

HTML5 Input Type’s (email, URL and phone)

Michael Gearon

Last updated on

HTML5 Input Types

In the previous post about Disabling Autocomplete, Autocapitalise  and Autocorrect we looked at how we can improve forms for mobile and desktop use. This post will look at input types, specifically the url, phone and email.

The Syntax for different input types

Very similar to a standard text input you declare the type as “email” or “url” or “phone”:

<input type="phone" value=" " />
<input pattern="[^ @]*@[^ @]*" type="email" value=" " />
<input type="url" value=" " />

On a mobile device the input type phone will show the numbers on the keyboard, the email address input type will show the @ sign and the URL input type will show the forward slash, .co.uk (or .com).

Demo

Grab your nearest tablet or smartphone and try it out:

See the Pen NqBYyV by Michael Gearon (@michaelgearon) on CodePen.

The purpose of HTML5 input types

Here are some of the advantages of using the correct input types:

Summary

There is plenty of new stuff in HTML5 to make use of, improving accessibility and making people lives easier whether you are using the website or developing a website. It is also possible to use HTML5’s required attribute alongside the input type to make sure the form is valid, although it is best to use PHP or something else to double check a form, by using HTML5 we can then style it with CSS without the need for Javascript so much.

Further reading

Michael Gearon

Written by
Michael Gearon

Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.