Input Types in HTML5

INPUT TYPES in HTML5

 

1. <input type="search">

 
It is used for search boxes.
 
Example
  1.  <html>  
  2. <body>  
  3.     <form>  
  4.     First name:  
  5.     <input type="text" name="firstname"><br>  
  6.     Last name:  
  7.     <input type="text" name="lastname">  
  8.     search box:  
  9.     <input type="search">  
  10.     </form>  
  11. </body>  
  12. </html> 
     
search
 

2. <input type="number">

 
It is used for spinboxes.
 
Example
  1.  <html>  
  2. <body>  
  3.     <form>  
  4.     First name:  
  5.     <input type="text" name="firstname"><br>  
  6.     Last name:  
  7.     <input type="text" name="lastname">  
  8.     number :  
  9.     <input type="number">  
  10.     </form>  
  11. </body>  
  12. </html> 
     
number
 

3. <input type="range">

 
It is used for sliders.
 
Example
  1.  <html>  
  2. <body>  
  3.     <form>  
  4.     First name:  
  5.     <input type="text" name="firstname"><br>  
  6.     Last name:  
  7.     <input type="text" name="lastname">  
  8.     range:  
  9.     <input type="range">  
  10.     </form>  
  11. </body>  
  12. </html>   
range
 

4. <input type="color">

 
It is used for color pickers.
 
Example
  1.  <html>  
  2. <body>  
  3.     <form>  
  4.     First name:  
  5.     <input type="text" name="firstname"><br>  
  6.     Last name:  
  7.     <input type="text" name="lastname">  
  8.     color picker :<input type="color">  
  9.     </form>  
  10. </body>  
  11. </html> 
     
color
 

5. <input type="tel">

 
It is used for telephone numbers
 
Example
  1.  <html>  
  2. <body>  
  3.     <form>  
  4.     First name:  
  5.     <input type="text" name="firstname"><br>  
  6.     Last name:  
  7.     <input type="text" name="lastname">  
  8.     telephone no:<input type="tel">  
  9.     </form>  
  10. </body>  
  11. </html> 
     
tel
 

6. <input type="url">

 
It is used for web addresses.
 
Example
  1.  <html>  
  2. <body>  
  3.     <form>  
  4.     First name:  
  5.     <input type="text" name="firstname"><br>  
  6.     Last name:  
  7.     <input type="text" name="lastname">  
  8.     url:<input type="url">  
  9.     </form>  
  10. </body>  
  11. </html>   
url
 

7. <input type="email">

 
It is used for email addresses.
 
Example
  1. <html>  
  2. <body>  
  3.     <form>  
  4.     First name:  
  5.     <input type="text" name="firstname"><br>  
  6.     Last name:  
  7.     <input type="text" name="lastname">  
  8.     email:<input type="email">  
  9.     </form>  
  10. </body>  
  11. </html>   
email
 

8. <input type="date">

 
It is used for calendar date pickers.
 
Example
  1. <html>  
  2. <body>  
  3.     <form>  
  4.     First name:  
  5.     <input type="text" name="firstname"><br>  
  6.     Last name:  
  7.     <input type="text" name="lastname">  
  8.     calender date picker:<input type="date">  
  9.     </form>  
  10. </body>  
  11. </html>   
date
 

9. <input type="month">

 
It is used for months.
 
Example
  1.  <html>  
  2. <body>  
  3.     <form>  
  4.     First name:  
  5.     <input type="text" name="firstname"><br>  
  6.     Last name:  
  7.     <input type="text" name="lastname">  
  8.     months:  
  9.     <input type="month">  
  10.     </form>  
  11. </body>  
  12. </html>   
month
 

10. <input type="week">

 
It is used for weeks.
 
Example
  1.  <html>  
  2. <body>  
  3.     <form>  
  4.     First name:  
  5.     <input type="text" name="firstname"><br>  
  6.     Last name:  
  7.     <input type="text" name="lastname">  
  8.     weeks:<input type="week">  
  9.     </form>  
  10. </body>  
  11. </html>   
week
 

11. <input type="time">

 
It is used for timestamps.
 
Example
  1.  <html>  
  2. <body>  
  3.     <form>  
  4.     First name:  
  5.     <input type="text" name="firstname"><br>  
  6.     Last name:  
  7.     <input type="text" name="lastname">  
  8.     time:<input type="time">  
  9.     </form>  
  10. </body>  
  11. </html>   
time
 

12. <input type="datetime">

 
It is used for precise, absolute date+time stamps.
 
Example
  1.  <html>  
  2. <body>  
  3.     <form>  
  4.     First name:  
  5.     <input type="text" name="firstname"><br>  
  6.     Last name:  
  7.     <input type="text" name="lastname">  
  8.     datetime:<input type="datetime">  
  9.     </form>  
  10. </body>  
  11. </html>   
datetime
 

13. <input type="datetime-local">

 
It is used for local dates and times.
 
Example
  1.  <html>  
  2. <body>  
  3.     <form>  
  4.     First name:  
  5.     <input type="text" name="firstname"><br>  
  6.     Last name:  
  7.     <input type="text" name="lastname">  
  8.     local date time:<input type="datetime-local">  
  9.     </form>  
  10. </body>  
  11. </html> 
     
datetime-local