HTML & CSS, WEB

HTML5 Input Types

New input types have been added in HTML5.

the new input types are:

  • email
  • url
  • number
  • range
  • Date pickers (date, month, week, time, datetime, datetime-local)
  • search (behaves like regular text field)
  • color

Browser Support (according to w3schools.com)

Input type IE Firefox Opera Chrome Safari
email No 4.0 9.0 10.0 No
url No 4.0 9.0 10.0 No
number No No 9.0 7.0 5.1
range No No 9.0 4.0 4.0
Date pickers No No 9.0 10.0 5.1
search No 4.0 11.0 10.0 No
color No No 11.0 12 No

Examples:

E-mail:

1
<input type="email" name="usermail" />

URL:

1
<input type="url" name="website" />

Number:

1
<input type="number" name="rating" />

Range:

1
<input type="range" name="rating" />

Date:

1
<input type="date" name="birthdate" />

Available types for date picker are:

  • date – date, month and year
  • month – month and year
  • week – week and year
  • time – time
  • datetime – time, date, month and year (UTC time)
  • datetime-local – time, date, month and year (local time)

Color:

1
<input type="color" name="user_color" />