The input element in HTML5

HTML5 input elements introduced several new values for the type attribute. These are listed below.

NOTE: Try all the following example using latest version of  Chrome browser.

datetime : A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601 with the time zone set to UTC.

Example:

[code language=”html”][/code]

datetime-local : A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601, with no time zone information.

Example:

[code language=”html”][/code]

Demo:


date :A date (year, month, day) encoded according to ISO 8601.

Example:

[code language=”html”][/code]

Demo:


You can go a step further by using the min and max attributes to ensure the user can only choose from a specified date range.

Example:

[code language=”html”][/code]

Demo:


month : A date consisting of a year and a month encoded according to ISO 8601. It can be used for credit card expiry date.

Example:

[code language=”html”][/code]

Demo:


week :  A date consisting of a year and a week number encoded according to ISO 8601. For entering a date that consists of a week-year number and a week number, but no time zone.

Example:

[code language=”html”][/code]

Demo:


time : A time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601. For entering a time (only) with no time zone provided

Example:

[code language=”html”][/code]

Demo:


number : This accepts only numerical value. The step attribute specifies the precision, defaulting to 1.

Example:

[code language=”html”][/code]

Demo:


range : The range type is used for input fields that should contain a value from a range of numbers.

Example:

[code language=”html”][/code]

Demo:


email : This accepts only email value. This type is used for input fields that should contain an e-mail address. If you try to submit a simple text, it forces to enter only email address in email@example.com format.

Example:

[code language=”html”]
[/code]

Demo:



url : This accepts only URL value. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces to enter only URL address either in http://www.example.com format or in http://example.com format.

Example:

[code language=”html”]
[/code]

Demo:



The placeholder attribute

HTML5 introduced a new attribute called placeholder. This attribute on and