New input types in HTML5

There are some new input types in HTML5. They are:

Email Input Type: email type is used when our form requires a valid input entry for email id by user. When the user clicks on the submit button, it checks for valid email id. Its syntax is given below:

<input type="email">

We create a form with an email input type by writing below code:

<!DOCTYPE HTML>
<html>
<body>
<form method="post">
email id:
<input type="email"/>
<br />
<input type="submit" />
</form>
</body>
</html>

When we run this code, the output will look like below:

URL Input Type: URL type is used when our form requires a valid input entry for URL by the user. When the user clicks on submit button, it checks for a valid URL. Its syntax is given below:

<input type="url">

We create a form with email input type by writing below code:

<!DOCTYPE HTML>
<html>
<body>
<form method="post">
URL:
<input type="url"/>
<br />
<input type="submit" />
</form>
</body>
</html>

We run this code, the output will look like below:

date Input Type: date type is used for date entry in form. Its syntax is given below:

<input type="date">

number Input Type: number type is used when our form requires a valid numeric character input entered by the user. Its syntax is given below:

<input type="number">

We create a form with a number input type by writing below code

<!DOCTYPE HTML>
<html>
<body>
<form method="post">
Number:
<input type="number"/>
<br />
<input type="submit" />
</form>
</body>
</html>

range Input Type: It is displayed as a slider. range type is used to select a value by the slider. Its syntax is given below:

<input type="range">

search Input Type: search input type is used for searching. Its syntax is given below:

<input type="search">

color Input Type: color type is used when our form requires input for color by the user. By color picker, a user can choose the value for it. Its syntax is given below:

<input type="color">

tel Input Type: tel type is used for telephone number entry. Its syntax is given below:

<input type="tel">