HTML5 new form input types

HTML5 new form input types

HTML5 includes the several new ‘input types’, these input types are used for better control and validation which includes email, number, color, datedime, datetime-local, date, month, week, range, search, url and tel. If the browser does not support any new control type, than it displays the 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. As in the example

<span style=”color: #e71728;”><strong>&lt;input type=”email” value=”[email protected]” /&gt;</strong></span>

Number – This field is used to enter the number (digit), also supports the floating number. The minimum and maximum values of the number can be given and also the number interval by using the ‘step’ attribute. As in the example

<span style=”color: #e71728;”><strong>&lt;input type=”number” min=”1″ max=”10″ step=”2”/&gt;</strong></span>

Color – The color type is used for input fields that should contain a color. The Opera browser allows 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, as

<span style=”color: #e71728;”><strong><code>&lt;input</code> <code>type=”color”</code> <code>value=”#b98b58″&gt;</code></strong></span>

DateTime – This field is used to select the date and time (UTC time). As in the example

<strong><span style=”color: #e71728;”>&lt;input type=”datetime” value=”2011-10-23T20:35:34.32″&gt;</span></strong>

datetime-local – An element to choose both date and time, with local settings support, as

<strong><span style=”color: #e71728;”>&lt;input type=”datetime-local” value=”10-23-2011T22:41″&gt;</span></strong>

Date – This field is used to select the date. As in the example

<span style=”color: #e71728;”><strong>&lt;input type=”date” value=”2011-11-23″/&gt;</strong></span>

Month – This input type is used to select the month and year. As in the example

<strong><span style=”color: #e71728;”>&lt;input type=”month” value=”2011-11″&gt;</span></strong>

Week – This input type is used to select the week and year. As in the example

<strong><span style=”color: #e71728;”>&lt;input type=”week” value=”2011-W48″&gt;</span></strong>

Range – This field is a slider, to set a certain value or position. The minimum and maximum value of the slider can be set and also the number interval by using the ‘step’ attribute. As in the example

<strong><span style=”color: #e71728;”>&lt;input type=”range” value=”15″ min=”0″ max=”100″&gt;</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. As in the example

<strong><span style=”color: #e71728;”>&lt;input type=”search”/&gt;</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. As in the example

<strong><span style=”color: #e71728;”>&lt;input type=”url” value=”http://www.codeheaven.org”&gt;</span></strong>

Note: requires a protocol like http://, ftp:// etc in the beginning.

Tel – This input type is used to enter the telephone number. As in the example

<strong><span style=”color: #e71728;”>&lt;input type=”tel” value=”[Any numeric value]” </span></strong>