HTML5 Input

Aug 01, 2010

Lets be honest, HTML5 is the new buzz word. Every blog, tutorial, tweet, article, or post I read contains some reference to HTML5. It's almost as bad as presidential campaigns during election year (well... maybe not that bad, but you get the idea!) However, unlike the latter, I am fully confident HTML5 will live up its expectations. Why is HTML5 so special? Well, you know all those hoops you've had to jump through and JavaScript libraries you've had to include? Kiss them goodbye! Let us take a look at some of the new features HTML5 provides with regard to input types.

Placeholder

<input name="first" placeholder="First Name" />

Range

<input name="range" type="range" value="50" min="0" max="100" />

Number

<input type="number" min="0" max="12" step="3" value="6" /> 

Search

<input type="search" /> 

Date

<input type="date" /> 

Month

<input type="month" /> 

Week

<input type="week" /> 

Time

<input type="time" /> 

Datetime

<input type="datetime" /> 

Datetime-Local

<input type="datetime-local" /> 

Currently, desktop browsers treat the following types as plain text. However, Safari on my iPhone optimizes the keyboard layout.

Email

<input type="email" />

URL

<input type="url" />

Tel

<input type="tel" />

The next type is built into the HTML5 specification, but I could not find any browser that takes advantage of it.

Color

<input type="color" />