HTML5 introduces the new input types to improve the user experience and to make the HTML forms more interactive.
HTML5 new input types are listed below,
| Sno | Type | Description |
| 1 | color | Represents an input field which defines a color selector. |
| 2 | date | Represents an input field to define a date selector. |
| 3 | datetime | Defines full date and time display with time zone information. |
| 4 | datetime-local | Defines date and time without time zone information. |
| 5 | Defines an input field with email pattern Validation. | |
| 6 | month | Defines the input field to enter month for the particular year |
| 7 | number | Defines field which selects a numeric value only. |
| 8 | range | Defines a numeric value selector with a given range of 1 to 100. |
| 9 | search | This is used to define a search field. |
| 10 | tel | Represents a control to enter a telephone number. |
| 11 | time | Represents a control to enter time value with no time zone. |
| 12 | url | Represents an input field to enter a URL |
| 13 | week | Defines a selector for week value for the particular year. |
1. Color
Color input type allows the user to select a color from a color picker and returns the color value.
The color value will be returned in hexadecimal format (#rrggbb).
If we don’t we specify the value, the default value #000000 (black color) is returned.
Color is supported by web-browsers like Firefox, Chrome, Opera, Safari (12.1+), Edge (14+).
Color is not supported by web-browsers like Microsoft Internet Explorer and older version of Apple Safari browsers.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
<form>
Purple : <input type="color" value="#651a77" id="mycol1"><br/>
Red : <input type="color" value="#F12416" id="mycol2"><br/>
Blue : <input type="color" value="#2A16F1" id="mycol3"><br/>
Brown : <input type="color" value="#926F12" id="mycol4"><br/>
</form>
</body>
</html>
Output :
2. Date
Date input type allows the user to select a date from a drop-down calendar.
By default, Date value includes the year, month, and day, but not the time.
Date is supported by the Chrome, Firefox, Opera and Edge browsers.
Date is Not supported by the Internet Explorer and Safari browsers.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
<form>
Date : <input type="date" value="2019-04-15" id="mydate"><br/>
</form>
</body>
</html>
Output :
HTML coding for a website !!!
Click to Learn More about – HTML Tutorial for beginners
3. Datetime
Datetime is used to specify the date and time of the element.
By default this displays in the format year, month, date, hour, minute and seconds (YYYY-MM-DDThh:mm:ssTZD).
Datetime is supported by Chrome, Edge, and Opera browsers.
Datetime is not supported by Firefox, Safari, and Internet Explorer browsers.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
<form>
DateTime
<p>The concert took place on
<time>Jan 18,1985 at 7:30 pm</time>.</p>
</form>
</body>
</html>
Output :
4. Datetime-local
Datetime-local input type allows the user to select local date and time.
This includes year, month, and day as well as the time in hours and minutes.
Datetime-local is supported by Chrome, Edge, and Opera browsers.
Datetime-local is not supported by Firefox, Safari, and Internet Explorer browsers.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
<form>
Date Time Local : <input type="datetime-local" id="mydatetime">
</form>
</body>
</html>
Output :
5. Email
Email input type allows the user to enter e-mail address.
The user can enter the properly-formatted e-mail address in the input.
Email is supported by all major browsers like Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
<form>
Email : <input type="email" id="myemail" required><br/>
</form>
</body>
</html>
Output :
6. Month
Month input type allows the user to select a month and year from a drop-down calendar.
String returned will be in the format “YYYY-MM”, where YYYY is the four-digit year and MM is the month number.
Month is supported in Chrome, Edge, and Opera browsers.
Month is not supported by Firefox, Safari and Internet Explorer browsers.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
<form>
Month : <input type="month" id="mymonth">
</form>
</body>
</html>
Output :
7. Number
Number input type is used for entering a numerical value.
HTML5 allows us to specify the range using attributes like min, max.
Number is supported by all major web browsers such as Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
<form>
Number : <input type="number" min="1" max="10" step="0.5" id="mynumber">
</form>
</body>
</html>
Output :
8. Range
Range input type is used for entering a numerical value within a specified range.
This is similar to number input, but it offers a simpler control for entering a number.
Range is supported by all major web browsers such as Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
<form>
Range : <input type="range" min="1" max="10" step="0.5" id="mynumber">
</form>
</body>
</html>
Output :
9. Search
The search input type is used for creating search input fields.
This looks like normal text field.
Search is supported by all major web browsers such as Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
<form>
Search : <input type="search" id="mysearch">
</form>
</body>
</html>
Output :
10. Tel
The tel input type is used for entering a telephone number.
By default Web-browsers don’t support tel input validation.
Either we can instruct the user with placeholder attribute or use regular expression to validate the input phone numbers.
Tel is not supported by any browser because format for phone numbers vary so much across countries.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
<form>
Tel : <input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required>
</form>
</body>
</html>
Output :
11. Time
Time input type is used for entering a time (hours and minutes).
Web Browsers may use 12- or 24-hour format for input times.
Time is not supported by Internet Explorer and Safari browsers. Currently supported by Chrome, Firefox, Edge, and Opera browsers.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
<form>
Time : <input type="time" id="mytime">
</form>
</body>
</html>
Output :
Tutorial on html !!!
Click to Learn More about – HTML Tutorial for beginners
12. URL
URL input type is used for entering URL’s or web addresses.
Multiple URL’s can be entered using multiple attribute.
URL is supported by all major browsers like Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
<form>
URL : <input type="url" id="myurl" required>
</form>
</body>
</html>
Output :
13. Week
Week input type allows the user to select a week and year from a drop-down calendar.
Week is not supported by Firefox, Safari and Internet Explorer browsers. Currently supported by Chrome, Edge, and Opera browsers.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
<form>
Week : <input type="week" id="myweek">
</form>
</body>
</html>
Output :
