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