HTML 5 Form Input Types

Lets discuss what are the new input type introduced in HTML 5 and how to use them.

color [Browser: Opera 11+, Chrome 20+ ]

It used to give an option to the user to select a colour through a color picker. It returns the value as hexadecimal.

<input id="myColor" name="myColor" type="color">

Dates and times [Browser: Opera 11+, Chrome 20+ ]

HTML 5 has introduced 6 input types for date related functionality. Like date, datetime, datetime-local, time, week and month.


<input id="myDate" name="myDate" type="date"> 

You can also assign date range as min and max attribute as yyyy-mm-dd format.

<input id="myDate" name="myDate" type="date" min="2013-01-01" max="2013-12-31"> 
Input type datetime is only supported by Opera 9+ and datetime-local will not work in any browser, though you can use it as an input type in your form. So let's forget about both input type for now.


<input id="myTime" name="myTime" type="time"> 

Number [Browser: Opera 11+, Chrome 8+ , Safari 5 on MAC]

Another input type introduced in HTML 5 is number. This will force user to enter number only. In case of Iphone the browser will display number pad only.

<input id="myNum" name="myNum" type="number"> 

Attributes used in number type are value, min, max and step. Value is used to set the default value and where min and max are used to set the Minimum and Maxim value of the input field. Step sets the increment or decrement value of the number field.
The following example will set the default / minimum value of the number field to 10 and maximum to 100. It will increase  or decrease by 2points each time the user change it.

<input id="myNum" name="myNum" type="number" 
       value="10" min="10" max="100" step="2"> 

Range [Browser: Opera 11+, Chrome 8+ , Safari 5 on MAC]

In order to create a Slider in HTML we can use input type range. Though this will not look fancy, you can use is as a basic slider. You can use negative values in range.
Attributes used in range are  value, min, max and step.

<input id="myRange" name="myRange" type="range" 
       value="10" min="10" max="100" step="2"> 


Force user to enter valid email address.
<input id="myEmail" name="myEmail" type="email"> 


Force user to enter valid URL.
<input id="myURL" name="myURL" type="url"> 


Force user to enter valid phone number.
<input id="myPhone" name="myPhone" type="tel"> 

comments powered by Disqus