Follow The New Tutorial updates on WhatsApp, Telegram or YouTube.

HTML Forms – Part 8 – Input type date and input type number control

This is part 8 of HTML Form series. You can read previous parts here. In this part you will learn about input type date and input type number control.

input type= “date”

The <input> element of type “date” generates an input field, which allows a user to input the date in a given format.

The resulting value includes the year, month, and day, but not the time.

The <input type="date"> defines a date picker.

A user can enter the date by text field or by date picker interface.

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input type date example</title>
</head>

<body>
    <form>
        Select Start and End Date: <br><br>
        Start date:<input type="date" name="Startdate"><br><br>
        End date:<input type="date" name="Enddate">
        <input type="submit">
    </form>
</body>

</html>
input type date example

max attributes

The latest date to accept in yyyy-mm-dd format.

min attributes

The earliest date to accept in yyyy-mm-dd format.

If both the max and min attributes are set, this value must be a date string later than or equal to the one in the min attribute.

input type= “number”

The <input> element type number creates input filed which allows a user to enter the numeric value. It includes built-in validation to reject non-numerical entries.

You can also restrict user to enter a minimum and maximum value using min and max attribute.

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input type number example</title>
</head>

<body>
    <form>
        <label>Enter your age: </label>
        <input type="number" name="num" min="50" max="80">
        <input type="submit">
    </form>
</body>

</html>
input type number example

max attribute

The maximum value to accept for this input.

min attribute

The minimum value to accept for this input.

step attribute

It specifies the legal number intervals. When this is used if you use up or down arrow the value will increase or decrease according to step value. The step attribute works with the following input types: number, range, date, datetime-local, month, time and week.