Input Types in HTML5

In this article we will learn about input types in HTML5.

INPUT TYPES in HTML5

1. <input type="search">:

It is used for search boxes.

Example

<html>

<body>

    <form>

    First name:

    <input type="text" name="firstname"><br>

    Last name:

    <input type="text" name="lastname">

    search box:

    <input type="search">

    </form>

</body>

</html>

search

2. <input type="number">: It is used for for spinboxes.

Example

<html>

<body>

    <form>

    First name:

    <input type="text" name="firstname"><br>

    Last name:

    <input type="text" name="lastname">

    number :

    <input type="number">

    </form>

</body>

</html>

number

3. <input type="range"> It is used for sliders.

Example

<html>

<body>

    <form>

    First name:

    <input type="text" name="firstname"><br>

    Last name:

    <input type="text" name="lastname">

    range:

    <input type="range">

    </form>

</body>

</html>

 
range 

4. <input type="color"> It is used for color pickers.

Example

<html>

<body>

    <form>

    First name:

    <input type="text" name="firstname"><br>

    Last name:

    <input type="text" name="lastname">

    color picker :<input type="color">

    </form>

</body>

</html>

 
color 

5. <input type="tel"> It is used for telephone numbers

Example

<html>

<body>

    <form>

    First name:

    <input type="text" name="firstname"><br>

    Last name:

    <input type="text" name="lastname">

    telephone no:<input type="tel">

    </form>

</body>

</html>

 
tel 

6. <input type="url"> It is used for web addresses.

Example

<html>

<body>

    <form>

    First name:

    <input type="text" name="firstname"><br>

    Last name:

    <input type="text" name="lastname">

    url:<input type="url">

    </form>

</body>

</html>

 
url 

7. <input type="email"> It is used for email addresses.

Example

<html>

<body>

    <form>

    First name:

    <input type="text" name="firstname"><br>

    Last name:

    <input type="text" name="lastname">

    email:<input type="email">

    </form>

</body>

</html>

 
email 

8. <input type="date"> It is used for calendar date pickers.

Example

<html>

<body>

    <form>

    First name:

    <input type="text" name="firstname"><br>

    Last name:

    <input type="text" name="lastname">

    calender date picker:<input type="date">

    </form>

</body>

</html>

 
date 

9. <input type="month"> It is used for months.

Example

<html>

<body>

    <form>

    First name:

    <input type="text" name="firstname"><br>

    Last name:

    <input type="text" name="lastname">

    months:

    <input type="month">

    </form>

</body>

</html>

 
month 

10. <input type="week"> It is used for weeks.

Example

<html>

<body>

    <form>

    First name:

    <input type="text" name="firstname"><br>

    Last name:

    <input type="text" name="lastname">

    weeks:<input type="week">

    </form>

</body>

</html>

 
week 

11. <input type="time"> It is used for timestamps.

Example

<html>

<body>

    <form>

    First name:

    <input type="text" name="firstname"><br>

    Last name:

    <input type="text" name="lastname">

    time:<input type="time">

    </form>

</body>

</html>

 
time 

12. <input type="datetime"> It is used for precise, absolute date+time stamps.

Example

<html>

<body>

    <form>

    First name:

    <input type="text" name="firstname"><br>

    Last name:

    <input type="text" name="lastname">

    datetime:<input type="datetime">

    </form>

</body>

</html>

 
datetime 

13. <input type="datetime-local"> It is used for local dates and times.

Example

<html>

<body>

    <form>

    First name:

    <input type="text" name="firstname"><br>

    Last name:

    <input type="text" name="lastname">

    local date time:<input type="datetime-local">

    </form>

</body>

</html>

 
datetime-local