New input type

New input type brings built-in input validation.

Email input type

Email input type doesn’t check whether an email address actually exists; but check its validation of email format. Try to input an invalid email address in the example below, and submit to see what will happen.

Source Code Box: Email input type (Browser: IE9+,Firefox,Chrome)

Please input an email address: <form action="#" id="form1"> <input type="email" id="input1" > <input type="submit" value="Submit"> </form>

Color input type

With color input type, a color picker will show up.

Source Code Box: Color input type (Browser:Firefox28+,Chrome29+,Opera17+,Android4.4+)

Please select a color. <form action="#" id="form2" > <input type="color" id="input2"> <input type="submit" value="Submit"> </form>

Number input type

It’s not necessary to specify a min, max and step value. If you don’t specify min, max, and step, the allowed value are all the negative and positive integers.

Source Code Box: Number input type(Browser:IE10+,Firefox28+,Chrome29+,Safari5.7+,Opera17+)

Please input a number: <form action="#" id="form3" > <input type="number" min="1" max="15" step="3" id="input3"> <input type="submit" value="Submit"> </form>

Range input type

You can select a value between the min and max with a slider.

Source Code Box: Range input type (Browser:IE10+,Firefox24+,Chrome29+,Safari6+,Opera17+,iOS5+,Android4.2+)

<form action="#" id="form4"> Number:<input type="range" min="1" max="10" value="3" id="input4"> <input type="submit" value="Submit"> </form>

Date input type

You can input date with a format like YYYY-MM-DD.

Source Code Box: Date input type (Browser:Chrome29+,iOS5+,Android4.4+)

<form action="#" id="form5"> Please select a date:<input type="date" id="input5"> <input type="submit" value="Submit"> </form>

Time input type

You can input time with a format like 15:30.

Source Code Box: Time input type (Browser:Chrome29+,iOS5+,Android4.4+)

<form action="#" id="form6"> Please select a time:<input type="time" id="input6"> <input type="submit" value="Submit"> </form>

Datetime input type

You can input date and time with a format like: 2008-12-29T10:19:17-08:00.

Source Code Box: Datetime input type (Chrome, Opera, Safari)

<form action="#" id="form7"> Please select a datetime:<input type="datetime" id="input7"> <input type="submit" value="Submit"> </form>

Week input type

User can input a year and a week number(For example, 01 for the first week, 18 for the eighteen week) in the year.

Source Code Box:Week input type (Chrome, Opera, Safari)

<form action="#" id="form8"> Please select a week:<input type="week" id="input8"> <input type="submit" value="Submit"> </form>

Month input type

User can input a year and a month(01,02….or 12).

Source Code Box: Month input type (Chrome, Opera, Safari)

<form action="#" id="form9"> Please select a month:<input type="month" id="input9"> <input type="submit" value="Submit"> </form>