HTML Menu

New Input Types in HTML

HTML5 introduces several new input types like color,email, date, time,range, and so on. to improve the user experience and to make the forms more interactive.

Those are

  • Color Input Type :

    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.

    format:
    <input type="color" value="#00ff00"></input>
    Example : "colortype.html"
    <!DOCTYPE html>
<html>
<head>
<title>Color Input Type</title>
</head>
<body>
<form>
<label>Select Color:</label>
<input type="color" value="#00ff00" id="mycolor"></input>
</form>
</body>
</html>

    Output:
    image

  • Date Input Type :

    The date input type allows the user to select a date from the datepicker calendar. The date value includes the year, month, and day, but not the time.

    format:
    <input type="date" value="yyyy-mm-dd" id="mdate"></input>
    Example : "datetype.html"
    <!DOCTYPE html>
<html>
<head>
<title>Date Input Type</title>
</head>
<body>
<form>
<label>Select Date:</label>
<input type="date" value="2019-10-05" id="mdate">
</form>
</body>
</html>

    Output:
    image

  • Email Input Type :

    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 regular expression, the regular expression checks the input to ensure a properly-formatted e-mail address should be entered. In this required attribute is mandatory

    format:
    <input type="email" id="mail"></input>
    Example : "emailtype.html"
    <!DOCTYPE html>
<html>
<head>
<title>Email Input Type</title>
</head>
<body>
<form>
<label>Email Address:</label>
<input type="email" id="myemail" required>
</form>
</body>
</html>

    Output:
    image