HTML5 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 <input> 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:

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

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.

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

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:

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

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:

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

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:

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

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.

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

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:

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

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:

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

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:

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

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.

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

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:

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

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:

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