HTML5 new input types

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:

• email
• 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.

<input type="email" value="no-reply@email.com" />

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.

<input type="number" min="1" max="10" step=”2”/>

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.

<input type="color" value="#b98b58">

DateTime:

This field is used to select the date and time (UTC time).

<input type="datetime" value="2011-10-23T20:35:34.32">

datetime-local:

An element to choose both date and time, with local settings support.

<input type="datetime-local" value="10-23-2011T22:41">

Date:

This field is used to select the date.

<input type="date" value="2011-11-23"/>

Month:

This input type is used to select the month and year.

<input type="month" value="2011-11">

Week:

This input type is used to select the week and year.

<input type="week" value="2011-W48">

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.

<input type="range" value="15" min="0" max="100">

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.

<input type="search"/>

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.

<input type="search" results="5" autosave="saved-searches"  placeholder="Search...">

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.

<input type="url" value="http://www.codeheaven.org">

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

Tel:

This input type is used to enter the telephone number.

<input type="tel" value="[Any numeric value]" 

pattern= "^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" placeholder="(555) 555-2222">

Note: Most web browsers seem to let through any value at this time.

Read further HTML5 new Form attributes 

Posted in: HTML5