Category:
Comments:
16 
View:
2405 HTML5 includes the several new ‘input types’, these input types are used for better control and validation.
This article covers the following input type one by one:
- number
- color
- datedime
- datetime-local
- date
- month
- week
- range
- search
- url
- tel
New Input Types
The good thing about new input types in html5, if browser not supports any type, than it displays in default input type of text with no errors or exceptions.
Email:
This field is used to enter the email address. The value of the email field is automatically validated when the form is submitted.
<span style="color: #e71728;"><strong><input type="email" value="no-reply@email.com" /></strong></span>
Number:
This field is used to enter the number (digit), also supports the floating number. You can set the minimum and maximum values of the number. Also you can specify the number interval by using the ‘step’ attribute.
<span style="color: #e71728;"><strong><input type="number" min="1" max="10" step=”2”/></strong></span>
Color:
The color type is used for input fields that should contain a color. The Opera browser will allow you to select a color from a color picker, Google’s Chrome will only allow hexadecimal color values to be submitted. This input type could be represented by a wheel or swatch picker.
<span style="color: #e71728;"><strong><code><input</code> <code>type="color"</code> <code>value="#b98b58"></code></strong></span>
DateTime:
This field is used to select the date and time (UTC time).
<strong><span style="color: #e71728;"><input type="datetime" value="2011-10-23T20:35:34.32"></span></strong>
datetime-local:
An element to choose both date and time, with local settings support.
<strong><span style="color: #e71728;"><input type="datetime-local" value="10-23-2011T22:41"></span></strong>
Date:
This field is used to select the date.
<span style="color: #e71728;"><strong><input type="date" value="2011-11-23"/></strong></span>
Month:
This input type is used to select the month and year.
<strong><span style="color: #e71728;"><input type="month" value="2011-11"></span></strong>
Week:
This input type is used to select the week and year.
<strong><span style="color: #e71728;"><input type="week" value="2011-W48"></span></strong>
Range:
This field is a slider, to set a certain value or position. You can set the minimum and maximum value of the slider. Also you can specify the number interval by using the ‘step’ attribute.
<strong><span style="color: #e71728;"><input type="range" value="15" min="0" max="100"></span></strong>
Note: If not set, default attribute values are min=”0″, max=”100″, step=”1″.
Search:
The search type is used for search fields, like a site search, or Google search. this field behaves like a regular text field.
<strong><span style="color: #e71728;"><input type="search"/></span></strong>
Note: In WebKit-based web browsers (Google Chrome, Safari) you can add the non-standard results attribute to get a looking glass icon to click to see the latest searches, and the attribute autosave to keep them across page loads.
<strong><span style="color: #e71728;"><input type="search" results="5" autosave="saved-searches" placeholder="Search..."<span class="Apple-style-span" style="font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 18px; white-space: pre;"><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px; white-space: normal;">></span></span></span></strong>
URL:
The url type is used for input fields that should contain a URL address. The value of the url field is automatically validated when the form is submitted.
<strong><span style="color: #e71728;"><input type="url" value="http://www.codeheaven.org"></span></strong>
Note: requires a protocol like http://, ftp:// etc in the beginning.
Tel:
This input type is used to enter the telephone number.
<strong><span style="color: #e71728;"><input type="tel" value="[Any numeric value]" </span></strong>
<strong><span style="color: #e71728;">pattern= <span class="Apple-style-span" style="font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 18px; white-space: pre;">"^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" </span></span></strong><strong><span style="color: #e71728;"><span class="Apple-style-span" style="font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 18px; white-space: pre;">placeholder="(555) 555-2222"</span>></span></strong>
Note: Most web browsers seem to let through any value at this time.
Read further HTML5 new Form attributes
Article's Source: 
By:
Posted On: October 22, 2011 
Published articles: 36 
I attend to such info much. I used to be seeking this certain information for a long period. Thank you so much and all the best !.
Hey very nice site!! Man .. Beautiful .. Amazing .. I’ll bookmark your site and take the feeds also…I am happy to find a lot of useful info here in the post, we need develop more techniques in this regard, thanks for sharing.