home

HTML5 New Input Types

This chapter explains all HTML5 new form input elements like color, date, DateTime, DateTime-local, email, month, number, range, search, tel, time, URL, week, this all elements are very useful for regular simple applications.

<color>
<date>
<datetime>
<datetime-local>
<email>
<month>
< week>
<number>
<range>
<search>
<tel>
<time>
<url>
html5 input elements

No browser compatibility (Not all browsers support all the new input elements). Check it all in Chrome most of this elements works fine.

Input type color

Input type color uses to fill color for the input box. its is like a color picker you can select any basic color and custom colors also.

<input type="color" name="myfavcolor">

HTML5 Input type color demo

It will support in Chrome and Safari.

Choose your color:

Input type date

This is simple html5 date field to select date like a jquery toolkit.

<input type="date">

HTML5 Input type Date demo

It will support in Chrome, opera, Safari.

Submit your marriage date:

Input type datetime

The datetime element is used to select date and time at the same time with zone.

<input type="datetime" name="mdaytime">

HTML5 Input type Datetime demo

It will support in Chrome, opera, Safari.

Choose Date and time:

Input type datetime-local

This is almost like similar to datetime but it will show date and time with out time time zone this is the main difference between two.

<input type="datetime-local">

HTML5 Input type Datetime-local demo

It will support in Chrome, apple, Safari.

Select your marriage date:

Input type email

Email type is used to store cookies data and it will validate automatically for email input.

<input type="email">

HTML5 Input type Email demo

It will support in major browsers except Safari.

Enter Email Id:

Input type month

This month element is to select a particular month in the year, not possible to select the date in this month type.

<input type="month">

HTML5 Input type Month demo

It will support in Chrome, Safari, opera.

Select Month:

Input type number

This input type number is used to tell that should contain a numeric value and also you can restrict how many numbers list you want, it's like list item elements to store values.

Min Value = specifies the minimum value allowed
Max value = specifies the maximum value allowed

<input type="number" name="quantity" min="1" max="15">

HTML5 Input type Number demo

It will support in Chrome, Safari, opera, IE.

Select Number:

Input type range

Range type is used to restrict many (range) numbers you want (it's set restrictions on what numbers are accepted). Even here also some min and max values are there.

Min Value = specifies the minimum value allowed
Max value = specifies the maximum value allowed

<input type="range" name="points" min="1" max="5">

HTML5 Input type Range demo

It will support in Chrome, Safari, opera, IE.

Select Range:05

Input type search

The search type is used for search fields.

<input type="search" name="googlesearch">

HTML5 Input type Search demo

It will support in Chrome, Safari.

Search: 

Input type tel

Tel input should contains with tele phone numbers.

<input type="tel" name="phone number">

HTML5 Input type Tel demo

No Browser compatibility.

Number: 

Input type time

Time input is used to select time (with AM or PM).

<input type="time" name="time">

HTML5 Input type Time demo

No Browser compatibility.

Number: 

Input type url (uniform resource locator)

Url type is used for input fields that should contain a URL address (www.ustutorials.com) and url field automatically validate the input.

<input type="url" name="time">

HTML5 Input type Url - uniform resource locator demo

Except Safari all browser support this type.

You should enter some thing in input filed then click on submit button then only it will work, with out value it can not work.
Enter Number

Input type week

Week type allows the user to select a week and year.

<input type="week" name="year_week">

HTML5 Input type Week demo

It will support in Chrome, Safari, Opera.

You should enter some thing in input filed then click on submit button then only it will work, with out value it can not work.
Enter Number