HTML5 forms input types

HTML5 introduces a dozen (yes, that’s 13!) new input types for forms. Here in this post, we’re going to take a brief look at each of them and explain why we should be using them right now. These new input types have dual benefits: using them means less development time and an improved user experience. The new input types we’ll be looking at are:

• search
• email
• url
• tel
• number
• range
• date
• month
• week
• time
• datetime
• datetime-local
• color

search

Search seems like an appropriate place to start our foray into HTML5 input types. When we talk about search, we’re not just talking about Google, Bing, or Yahoo. We’re talking about the search field on that e-commerce site you just made a purchase from, on Wikipedia, and even on your personal blog. It’s probably the most common action performed on the Web every day, yet it’s not marked up very semantically, is it? We all tend to write something like this:

<input type="text" name="search">

Well, what if we could write something like …

<input type="search" name="search">

If a browser doesn’t understand type="search", it will default to type="text". This means you’re not losing anything. 

email

In rendering terms, the email input type is no different than a standard text input type and allows for one or more e-mail addresses to be entered. Combined with the required attribute, the browser is then able to look for patterns to ensure a valid e-mail address has been entered.
<input type="email" name="email" required>
The specification details that one or more e-mail addresses are allowed. This means that the multiple attribute could be used withtype="email" too.

url


The url input type, as you might expect, is for web addresses. You can use the multiple attribute to enter more than one URL. Liketype="email", a browser will carry out simple validation on these fields and present an error message on form submission. This is likely to include looking for forward slashes, periods, and spaces, and possibly detecting a valid top-level domain (such as .com or .co.uk). Use the urlinput type like so:
<input type="url" name="url" required>

tel

tel differs from email and url in that no particular syntax is enforced. Phone numbers differ around the world, making it difficult to guarantee any type of specific notation except for allowing only numbers and perhaps a + symbol to be entered. It’s possible that you can validate specific phone numbers (if you can guarantee the format) using client-side validation. type="tel" is marked up as follows:
<input type="tel" name="tel" id="tel" required>

number

number, as you might expect, is used for specifying a numerical value. With the additional attributes min, max, and step we can change the default step value of this spinbox control as well as set minimum, maximum, and starting values (using the standard HTML valueattribute). This example shows how these attributes work:
<input type="number" min="5" max="18" step="0.5"value="9" name="shoe-size">

range

The range input type is similar to number but more specific. It represents a numerical value within a given range. Why the difference, I hear you cry? Because when you’re using range, the exact value isn’t important. It also allows browsers to offer a simpler control than fornumber. In Opera, Safari, Internet Explorer 10 and Chrome,type="range" renders as a slider. When moving the slider in IE 10 a tooltip appears showing the current value. 
<input id="skill" type="range" min="1" max="100"value="0">

Dates and times


date

<input id="dob" name="dob" type="date">
<input id="startdate" name="startdate" min="2012-01-01"max="2013-01-01" type="date">

month

<input id="expiry" name="expiry" type="month" required>

week



<input id="vacation" name="vacation" type="week">




time

<input id="exit-time" name="exit-time" type="time">

datetime

We can combine the date and time by using type="datetime" for specifying a precise time on a given day
<input id="entry-day-time" name="entry-day-time"type="datetime">

datetime-local

We can achieve slightly more granular control by selecting a precise time on a given day with a local time zone variation using type="datetime-local".
<input id="arrival-time" name="arrival-time "type="datetime-local">

color

The color input type is pretty self-explanatory: it allows the user to select a color and returns the hex value for that color. It is anticipated that users will either be able to type the value or select from a color picker, which will either be native to the operating system or a browser’s own implementation. 
<input id="color" name="color" type="color">
By using HTML5′s new form input types right now, we can enhance the user’s experience, future-proof our site, and make our life as developers easier.