Web Development

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

wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW