Explain the form new input types in HTML5 ?

Last Updated : 30 Jul, 2024

In this article, we will discuss the functionality of the newer form input types provided by HTML5. Sometimes, while filling the registration form or any online form, it would require to follow the proper format to fill the particular data. Now it's easy to use the webform to fill up the common data like date, email, url etc. There are almost 13 new input types introduced in HTML5 form. We will see all the input types & understand them one by one.

Input Type attributes:

color: This input type allows the user to select a color from a color picker.
date: This input type allows the user to select a date from a drop-down calendar.
time: This input type allows the user to enter a time.
datetime: This input type allows the user to select date and time along with timezone.
datetime-local: This input type allows the user to select both local date and time.
week: This input type allows the user to select week and year from the drop-down calendar.
email: This input type allows the user to enter an e-mail address.
month: This input type allows the user to select a month and year from a drop-down calendar.
number: This input type allows the user to enter a numerical value.
range: This input type allows the user to enter a numerical value within a specified range.
search: This input type allows the user to enter a search string within the input field.
tel: This input type allows the user to enter a telephone number.
url: This input type allows the user to enter the URL.

We will use the above attributes & understand their usage through the example.

Example 1: In this example, you will get to know about color, date and time input type.

Date Syntax:

 <input type="date">

Time Syntax:

 <input type="time">

Color Syntax:

 <input type="color">

Note: date and time are not supported by the Internet Explorer and Safari browsers.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            color: green;
            text-align: center;
        }

        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>Welcome To GeeksforGeeks</h1>

    <form>
        <label for="color">Select Color : </label>
        <input type="color" />
    </form>
    <br />

    <form>
        <label for="date">Select Date : </label>
        <input type="date" />
    </form>
    <br />

    <form>
        <label for="time">Select Time :</label>
        <input type="time" />
    </form>
</body>

</html>

Output:

Example 2: In this example, you will get to know about datetime, datetime-local and week input type.

Datetime Syntax:

Datetime-local Syntax:

 <input type="datetime-local">

Week Syntax:

 <input type="week">

Note: datetime-local and week are not supported by Firefox, Safari, and Internet Explorer browsers.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            color: green;
            text-align: center;
        }

        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>Welcome To GeeksforGeeks</h1>

    <form>
        <label for="date">Enter Date-Time : </label>
        <input type="datetime" />
    </form>
    <br />

    <form>
        <label for="date">Select Date-Time Local : </label>
        <input type="datetime-local" />
    </form>
    <br />

    <form>
        <label for="time">Select Week : </label>
        <input type="week" />
    </form>
</body>

</html>

Output:

Example 3: In this example, you will get to know about email, month, number and range input type.

Email Syntax:

<input type="email">

Month Syntax:

<input type="month">

Note: month is not supported by Firefox, Safari and Internet Explorer browsers.

Number Syntax:

<input type="number">

Range Syntax:

<input type="range">

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            color: green;
            text-align: center;
        }

        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>Welcome To GeeksforGeeks</h1>

    <form>
        <label for="mail">Enter Email : </label>
        <input type="email" />
    </form>
    <br />

    <form>
        <label for="date">Select Month : </label>
        <input type="month" />
    </form>
    <br />

    <form>
        <label for="number">Select Number : </label>
        <input type="number" />
    </form>
    <br />

    <form>
        <label for="number">Select Number in Range : </label>
        <input type="range" min="1" max="10" step="1" />
    </form>
</body>

</html>

Output:

Example 4: In this example, you will get to know about search, tel and url input types.

Search Syntax:

<input type="search">

Tel Syntax:

<input type="tel">

Note: Currently tel is not supported by any browser.

Url Syntax:

<input type="url">