HTML5 New Input Types

HTML5 introduces several new input types for forms.

New Input Types in HTML5

HTML5 introduces several new <input> types like email, date, time, color, range, etc. to improve the user experience and to make the forms more interactive. However, if a browser failed to recognize these new input types, it will treat them like a normal text box.

In this section we're going to take a brief look at each of the following new input types:


Input Type Color

The color input type allows the user to select a color from a drop-down color picker and returns the hex value for that color.

  • <form>
  •     <label>
  •         Select Color: <input type="color" name="mycolor">
  •     </label>
  • </form>
 

Warning:The input type="color" is not supported by Internet Explorer and Apple Safari. Currently supported by Firefox, Chrome and Opera browsers.


Input Type Date

The date input type allows the user to select a date from a drop-down calendar.

  • <form>
  •     <label>
  •         Select Date: <input type="date" name="mydate">
  •     </label>
  • </form>
 

Warning:The input type="date" is not supported by Internet Explorer and Firefox. Currently supported by Chrome, Safari and Opera browsers.


Input Type Datetime

The datetime input type allows the user to select a date and time along with time zone.

  • <form>
  •     <label>
  •         Date & Time: <input type="datetime" name="mydatetime">
  •     </label>
  • </form>
 

Warning:The input type="datetime" is not supported by Internet Explorer, Firefox, Chrome and Opera browsers. Currently supported by Apple Safari only.


Input Type Datetime-local

The datetime-local input type allows the user to select a local date and time. The local date and time doesn't provide timezone information.

  • <form>
  •     <label>
  •         Local Date & Time: <input type="datetime-local" name="mylocaldatetime">
  •     </label>
  • </form>
 

Warning:The input type="datetime-local" is not supported by Internet Explorer and Firefox. Currently supported by Chrome, Safari and Opera browsers.


Input Type Email

The email input type allows the user to enter e-mail address. It is very similar to a standard text input type, but if it used in combination with the required attribute, the browser may look for patterns to ensure a valid e-mail address should be entered.

  • <form>
  •     <label>
  •         Email Address: <input type="email" name="myemail" required>
  •     </label>
  • </form>

The validation for the input type="email" is supported by all major browsers like Mozilla Firefox, Google Chrome, Apple Safari, Internet Explorer 10+ and Opera.

 

Note:You can style the email field for different validation states, when an value is entered using the :valid, :invalid or :required pseudo class.


Input Type Month

The month input type allows the user to select a month and year from a drop-down calendar.

  • <form>
  •     <label>
  •         Select Month: <input type="month" name="mymonth">
  •     </label>
  • </form>
 

Warning:The input type="month" is not supported by Internet Explorer and Firefox. Currently supported by Chrome, Safari and Opera browsers.


Input Type Number

The number input type can be used for entering a numerical value. You can also restrict the user to enter only acceptable values using the additional attributes min, max, and step.

  • <form>
  •     <label>
  •         Select Number: <input type="number" value="1" min="1" max="10" step="0.5" name="mynumber">
  •     </label>
  • </form>

The input type="number" is supported by all the major browsers like Mozilla Firefox, Google Chrome, Apple Safari, Internet Explorer 10+ and Opera. Internet Explorer however recognized the number but do not provide increment and decrement spin buttons.


Input Type Range

The range input type can be used for entering a numerical value within a specified range. It works very similar to number input, but it offer a simpler control for entering a number.

  • <form>
  •     <label>
  •         Select Number: <input type="range" value="1" min="1" max="10" step="0.5" name="mynumber">
  •     </label>
  • </form>

The input type="range" is supported by all the major browsers like Mozilla Firefox, Google Chrome, Apple Safari, Internet Explorer 10+ and Opera.


Input Type Search

The search input type can be used for creating search fields.

A search field typically behaves like a regular text field, but in some browser like Google Chrome and Apple Safari as soon as you start typing in a search box a small cross appears on the right side of the field that lets you quickly clear the search field.

  • <form>
  •     <label>
  •         Search Website: <input type="search" name="mysearch">
  •     </label>
  • </form>
 

Warning:The input type="search" is not supported by Firefox, IE 9 and earlier versions. Currently supported by Chrome, Safari, IE 10+ and Opera browsers.


Input Type Tel

The tel input type can be used for entering a telephone number.

  • <form>
  •     <label>
  •         Telephone Number: <input type="tel" name="mytelephone" required>
  •     </label>
  • </form>
 

Warning:The validation for the input type="tel" is currently not supported by any browser, but it is still useful. The iPhone and some Android devices using the input type="tel" to change the virtual keyboard with a numeric keypad.


Input Type Time

The time input type can be used for entering a time.

  • <form>
  •     <label>
  •         Select Time: <input type="time" name="mytime">
  •     </label>
  • </form>
 

Warning:The input type="time" is not supported by Internet Explorer and Firefox. Currently supported by Chrome, Safari and Opera browsers.


Input Type URL

The url input type can be used for entering web addresses i.e. URL's. You can use the multiple attribute to enter more than one URL. Like type="email", a browser may carry out simple validation on URL fields and present an error message on form submission.

  • <form>
  •     <label>
  •         Website URL: <input type="url" name="mywebsite" required>
  •     </label>
  • </form>
 

Note:The validation for the type="url" is supported by all major browsers like Firefox, Chrome, Safari, Opera, Internet Explorer 10+.


Input Type Week

The week input type allows the user to select a week and year from a drop-down calendar.

  • <form>
  •     <label>
  •         Select Week: <input type="week" name="myweek">
  •     </label>
  • </form>
 

Warning:The input type="week" is not supported by Internet Explorer and Firefox. Currently supported by Chrome, Safari and Opera browsers.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.