HTML Introduction | Getting Started with HTML5 | HTML5 Input Element Types

Tags:

The input element types newly added in HTML5 are as follows.

  1. Number input (number)
  2. Range input (range)
  3. Color input (color)
  4. Date input (date)
  5. Time input (time)
  6. Date and time input (datetime-local)
  7. Year and month input (month)
  8. Year and week input (week)
  9. Email input (email)
  10. URL input (url)
  11. Telephone number input (tel)
  12. Search input (search)

Number Input

When the type attribute of the <input> tag is set to "number", the input element lets the user enter a number.

Unlike the regular text type, the number type displays up and down controls on the right side of the input field. Depending on browser support, you can also set limits for the selectable number by using the min and max attributes.

<input type="number" name="num" min="1" max="9">

Run code

The number type is not supported in Internet Explorer 9 and earlier.

Range Input

When the type attribute of the <input> tag is set to "range", the input element lets the user enter only a value within a certain range.

Depending on browser support, a horizontal slider is displayed for selecting the value.

0 <input type="range" name="favnum" min="1" max="9"> 9

Run code

The range type is not supported in Internet Explorer 9 and earlier.

Color Input

When the type attribute of the <input> tag is set to "color", the input element lets the user enter a color.

The selected color is submitted as a six-digit hexadecimal color value without #. Depending on browser support, a color picker is displayed.

<input type="color" name="color" value="#FF0000">

Run code

The color type is not supported in Safari 9.1 and earlier or Internet Explorer 11 and earlier.

Date Input

When the type attribute of the <input> tag is set to "date", the input element lets the user enter a date.

Depending on browser support, a calendar is displayed for selecting the date.

<input type="date" name="day1">

You can also use the min and max attributes to restrict the selectable date range.

<input type="date" name="day2" min="1977-01-01" max="2020-12-31">

Run code

The date type is not supported in Firefox or Internet Explorer 11 and earlier.

Time Input

When the type attribute of the <input> tag is set to "time", the input element lets the user enter a time.

Depending on browser support, a time picker is displayed.

<input type="time" name="time">

Run code

The time type is not supported in Firefox or Internet Explorer 12 and earlier.

Date and Time Input

When the type attribute of the <input> tag is set to "datetime-local", the input element lets the user enter a date and time.

Depending on browser support, a calendar for selecting the date and a control for selecting the time are displayed.

<input type="datetime-local" name="time">

Run code

The datetime-local type is not supported in Firefox or Internet Explorer 12 and earlier.

Year and Month Input

When the type attribute of the <input> tag is set to "month", the input element lets the user enter a year and month.

Depending on browser support, a calendar for selecting the year and month is displayed.

<input type="month" name="month">

Run code

The month type is not supported in Firefox or Internet Explorer 11 and earlier.

Year and Week Input

When the type attribute of the <input> tag is set to "week", the input element lets the user enter a year and week number.

Depending on browser support, a calendar for selecting the year and week is displayed.

<input type="week" name="week">

Run code

The week type is not supported in Firefox or Internet Explorer 11 and earlier.

Email Input

When the type attribute of the <input> tag is set to "email", the input element lets the user enter an email address.

Depending on browser support, the browser automatically checks whether the entered email address is valid when the form is submitted.

<input type="email" name="email">

Run code

The email type is not supported in Safari or Internet Explorer 9 and earlier.

URL Input

When the type attribute of the <input> tag is set to "url", the input element lets the user enter a URL.

Depending on browser support, the browser automatically checks whether the entered URL is valid when the form is submitted.

<input type="url" name="url">

Run code

The url type is not supported in Safari or Internet Explorer 9 and earlier.

Telephone Number Input

When the type attribute of the <input> tag is set to "tel", the input element lets the user enter a telephone number.

<input type="tel" name="tel">

Run code

The tel type is supported only in Safari 8.

Search Input

When the type attribute of the <input> tag is set to "search", the input element lets the user enter a search term. This search field behaves like a normal text field.

Unlike the regular text type, the search type displays an X icon on the right side of the input field so the user can immediately clear the entered search term.

<input type="search" name="keyword">

Run code