Post
Ask Question

New input types in HTML5

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"> 
Next Recommended Reading New Interactive Elements in HTML5