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:
  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4. <form method="post">
  5. email id:
  6. <input type="email"/>
  7. <br />
  8. <input type="submit" />
  9. </form>
  10. </body>
  11. </html>
When we run this code, the output will look like below:
email input type
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:
  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4. <form method="post">
  5. URL:
  6. <input type="url"/>
  7. <br />
  8. <input type="submit" />
  9. </form>
  10. </body>
  11. </html>
We run this code, the output will look like below:
url input type
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
  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4. <form method="post">
  5. Number:
  6. <input type="number"/>
  7. <br />
  8. <input type="submit" />
  9. </form>
  10. </body>
  11. </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">