HTML Input Types HTML5

Content

  1. Color
  2. Date
  3. Datetime-local
  4. Email
  5. Month
  6. Range
  7. Search
  8. Tel
  9. Time
  10. Url
  11. Week
RightArrow

Input Types

 RightArrow

Input Attributes

Type Color

The <input type="color"> is used for input fields that should contain a color.

Depending on browser support, a color picker can show up in the input field.

HTML Code:

<p> Depending on browser support:<br> A color picker can pop-up when you enter the input field. </p> <form action="/action_page.php"> Select your favorite color: <input type="color" name="favcolor" value="#ff0000"> <input type="submit"> </form> <p><b>Note:</b> type="color" is not supported in Internet Explorer 11 and earlier versions or Safari 9.1 and earlier versions.</p>

Result:

Depending on browser support:
A color picker can pop-up when you enter the input field.

Select your favorite color:

Note: type="color" is not supported in Internet Explorer 11 and earlier versions or Safari 9.1 and earlier versions.

Type Date

The <input type="date"> is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

HTML Code:

<p> Depending on browser support:<br> A date picker can pop-up when you enter the input field. </p> <form action="/action_page.php"> Birthday: <input type="date" name="bday"> <input type="submit"> </form> <p><strong>Note:</strong> type="date" is not supported in Firefox, or Internet Explorer 11 and earlier versions.</p>

Result:

Depending on browser support:
A date picker can pop-up when you enter the input field.

Birthday:

Note: type="date" is not supported in Firefox, or Internet Explorer 11 and earlier versions.

You can also add restrictions to dates:

HTML Code:

<form action="/action_page.php"> Enter a date before 1980-01-01:<br> <input type="date" name="bday" max="1979-12-31"><br><br> Enter a date after 2000-01-01:<br> <input type="date" name="bday" min="2000-01-02"><br><br> <input type="submit"> </form> <p><strong>Note:</strong> type="date" is not supported in Firefox, or Internet Explorer 11 and earlier versions.</p>

Result:

Enter a date before 1980-01-01:


Enter a date after 2000-01-01:


Note: type="date" is not supported in Firefox, or Internet Explorer 11 and earlier versions.

Type Datetime-local

The <input type="datetime-local"> specifies a date and time input field, with no time zone.

Depending on browser support, a date picker can show up in the input field.

HTML Code:

<p> Depending on browser support:<br> A date picker can pop-up when you enter the input field. </p> <form action="/action_page.php"> Birthday (date and time): <input type="datetime-local" name="bdaytime"> <input type="submit" value="Send"> </form> <p><strong>Note:</strong> type="datetime-local" is not supported in Firefox, or Internet Explorer 12 and earlier versions.</p>

Result:

Depending on browser support:
A date picker can pop-up when you enter the input field.

Birthday (date and time):

Note: type="datetime-local" is not supported in Firefox, or Internet Explorer 12 and earlier versions.

Type Email

The <input type="email"> is used for input fields that should contain an e-mail address.

Depending on browser support, the e-mail address can be automatically validated when submitted.

Some smartphones recognize the email type, and adds ".com" to the keyboard to match email input.

HTML Code:

<form action="/action_page.php"> E-mail: <input type="email" name="email"> <input type="submit"> </form> <p> <b>Note:</b>type="email" is not supported in IE9 and earlier.</p>

Result:

E-mail:

Note:type="email" is not supported in IE9 and earlier.

Type Month

The <input type="month"> allows the user to select a month and year.

Depending on browser support, a date picker can show up in the input field.

HTML Code:

<p> Depending on browser support:<br> A date picker can pop-up when you enter the input field. </p> <form action="/action_page.php"> Birthday (month and year): <input type="month" name="bdaymonth"> <input type="submit"> </form> <p><strong>Note:</strong> type="month" is not supported in Firefox, or Internet Explorer 11 and earlier versions.</p>

Result:

Depending on browser support:
A date picker can pop-up when you enter the input field.

Birthday (month and year):

Note: type="month" is not supported in Firefox, or Internet Explorer 11 and earlier versions.

Type Range

The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes.

HTML Code:

<p> Depending on browser support:<br> The input type "range" can be displayed as a slider control. </p> <form action="/action_page.php" method="get"> Points: <input type="range" name="points" min="0" max="10"> <input type="submit"> </form> <p> <b>Note:</b> type="range" is not supported in Internet Explorer 9 and earlier versions. </p>

Result:

Depending on browser support:
The input type "range" can be displayed as a slider control.

Points:

Note: type="range" is not supported in Internet Explorer 9 and earlier versions.

Type Search

The <input type="search"> is used for search fields (a search field behaves like a regular text field).

HTML Code:

<form action="/action_page.php"> Search Google: <input type="search" name="googlesearch"> <input type="submit"> </form>

Result:

Search Google:

Type Tel

The <input type="tel"> is used for input fields that should contain a telephone number.

The tel type is currently supported only in Safari 8.

HTML Code:

<form action="/action_page.php"> Telephone: <input type="tel" name="usrtel"> <input type="submit"> </form> <p><b>Note:</b> type="tel" is only supported in Safari 8 and newer versions.</p>

Result:

Telephone:

Note: type="tel" is only supported in Safari 8 and newer versions.

Type Time

The <input type="time"> allows the user to select a time (no time zone).

Depending on browser support, a time picker can show up in the input field.

HTML Code:

<p> Depending on browser support:<br> A time picker might pop-up when you enter the input field. </p> <form action="/action_page.php"> Select a time: <input type="time" name="usr_time"> <input type="submit"> </form> <p><strong>Note:</strong> type="time" is not supported in Firefox, or Internet Explorer 12 and earlier versions.</p>

Result:

Depending on browser support:
A time picker might pop-up when you enter the input field.

Select a time:

Note: type="time" is not supported in Firefox, or Internet Explorer 12 and earlier versions.

Type Url

The <input type="url"> is used for input fields that should contain a URL address.

Depending on browser support, the url field can be automatically validated when submitted.

Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.

HTML Code:

<form action="/action_page.php"> Add your homepage: <input type="url" name="homepage"> <input type="submit"> </form> <p><b>Note:</b> The type="url" is not supported in IE9 and earlier versions.</p>

Result:

Add your homepage:

Note: The type="url" is not supported in IE9 and earlier versions.

Type Week

The <input type="week"> allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input field.

HTML Code:

<p> Depending on browser support:<br> A date picker can pop-up when you enter the input field. </p> <form action="/action_page.php"> Select a week: <input type="week" name="year_week"> <input type="submit"> </form> <p><strong>Note:</strong> type="week" is not supported in Firefox, or Internet Explorer 11 and earlier versions.</p>

Result:

Depending on browser support:
A date picker can pop-up when you enter the input field.

Select a week:

Note: type="week" is not supported in Firefox, or Internet Explorer 11 and earlier versions.

HTML Index

References

  1. W3Schools

This page is only a summary of the material from W3Schools. Definitions, Examples and Codes are exclusive property of W3Schools.