HTML New Input Types

In this tutorial you will learn about the new input types that have been introduced in HTML5.

New Input Types in HTML5

HTML5 introduces several new types like email, date, time, color, range, and so on. 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:

There was also a datetime input type for entering a date and time, but it is now obsolete.

Input Type Color

The color input type allows the user to select a color from a color picker and returns the color value in hexadecimal format (#rrggbb). If you don’t specify a value, the default is #000000, which is black.

Let’s try out the following example to understand how it basically works:

Example

<form>
  <label for="mycolor">Select Color:</label>
  <input type="color" value="#00ff00" id="mycolor" />
</form>

Note: The color input (i.e. type="color") is supported in all major modern web browsers such as Firefox, Chrome, Opera, Safari (12.1+), Edge (14+). Not supported by the Microsoft Internet Explorer and older version of Apple Safari browsers.

Input Type Date

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

The date value includes the year, month, and day, but not the time.

Example

<form>
  <label for="mydate">Select Date:</label>
  <input type="date" value="2019-04-15" id="mydate" />
</form>

Note: The date input (i.e. type="date") is supported by the Chrome, Firefox, Opera and Edge browsers. Not supported by the Internet Explorer and Safari browsers.

Input Type Datetime-local

The datetime-local input type allows the user to select both local date and time, including the year, month, and day as well as the time in hours and minutes.

Let’s try out the following example to understand how it basically works:

Example

<form>
  <label for="mydatetime">Choose Date and Time:</label>
  <input type="datetime-local" id="mydatetime" />
</form>

Warning: The input type="datetime-local" is not supported by Firefox, Safari, and Internet Explorer browsers. Currently supported by Chrome, Edge, 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 is used in combination with the required attribute, the browser may look for the patterns to ensure a properly-formatted e-mail address should be entered.

Let’s try out this example by entering any e-mail address to see how it actually works:

Example

<form>
  <label for="myemail">Enter Email Address:</label>
  <input type="email" id="myemail" required />
</form>

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

Note: The validation for the email input (i.e. type="email") is supported by all major browsers like Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.

Input Type Month

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

The value is a string in the format “YYYY-MM”, where YYYY is the four-digit year and MM is the month number. Let’s try out an example to see how this basically works:

Example

<form>
  <label for="mymonth">Select Month:</label>
  <input type="month" id="mymonth" />
</form>

Warning: The input type="month" is not supported by Firefox, Safari and Internet Explorer browsers. Currently supported in Chrome, Edge, 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.

The following example will allow you to enter a numeric value between 1 to 10.

Example

<form>
  <label for="mynumber">Enter a Number:</label>
  <input type="number" min="1" max="10" step="0.5" id="mynumber" />
</form>

Note: The number input (i.e. type="number") is supported by all major web browsers such as Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above. 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 offers a simpler control for entering a number.

Let’s try out the following example to understand how it basically works:

Example

<form>
  <label for="mynumber">Select a Number:</label>
  <input type="range" min="1" max="10" step="0.5" id="mynumber" />
</form>

Note: The range input (i.e. type="range") is supported by all major web browsers such as Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.

Input Type Search

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

A search field typically behaves like a regular text field, but in some browsers like Chrome and Safari as soon as you start typing in the search box a small cross appears on the right side of the field that lets you quickly clear the search field. Let’s try out an example to see how it works:

Example

<form>
  <label for="mysearch">Search Website:</label>
  <input type="search" id="mysearch" />
</form>

Note: The search input (i.e. type="search") is supported by all major web browsers such as Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.

Input Type Tel

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

Browsers don’t support tel input validation natively. However, you can use the placeholder attribute to help users in entering the correct format for a phone number, or specify a regular expression to validate the user input using the pattern attribute. Let’s check out an example:

Example

<form>
  <label for="myphone">Telephone Number:</label>
  <input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required />
</form>

Note: The validation for tel input (i.e. type="tel") is currently not supported by any browser because format for phone numbers vary so much across countries, but it is still useful. Mobile browsers display a numeric keyboard for tel input field for entering phone numbers.

Input Type Time

The time input type can be used for entering a time (hours and minutes).

Browser may use 12- or 24-hour format for inputting times, based on local system’s time setting.

Example

<form>
  <label for="mytime">Select Time:</label>
  <input type="time" id="mytime" />
</form>

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

Input Type URL

The url input type can be used for entering URL’s or web addresses.

You can use the multiple attribute to enter more than one URL. Also, if required attribute is specified browser will automatically carry out validation to ensure that only text that matches the standard format for URLs is entered into the input box. Let’s see how this works:

Example

<form>
  <label for="myurl">Enter Website URL:</label>
  <input type="url" id="myurl" required />
</form>

Note: The validation for the url input (i.e. type="url") is supported by all major browsers like Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.

Input Type Week

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

Let’s try out the following example to understand how this works:

Example

<form>
  <label for="myweek">Select Week:</label>
  <input type="week" id="myweek" />
</form>

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