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

HTML Forms – Part 11 – Input type datetime-local and input type month control

This is part 11 of HTML Form series. You can read previous parts here. In this part you will learn about input type datetime-local and input type month control.

input type= “datetime-local”

The control is intended to represent a local date and time, not necessarily the user’s local date and time.

The <input> element of type “datetime-local” creates input filed which allow a user to select the date as well as local time in the hour and minute without time zone information.

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

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

The control’s UI varies in general from browser to browser. 

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="datetime-local" example</title>
</head>

<body>
    <form>
        <label>
            Select the meeting schedule.<br>
            Select date & time: <input type="datetime-local" name="meetingdate"> <br><br>
        </label>
        <input type="submit">
    </form>
</body>

</html>
input type=”datetime-local” example

input type= “month”

The <input> type “month” creates an input field which allows a user to easily enter month and year in the format of “MM, YYYY” where MM defines month value, and YYYY defines the year value.

The <input type="month"> defines a month and year control.

The format is “YYYY-MM”.

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="month" example</title>
</head>

<body>
    <form>
        <label>Enter your Birth Month-year: </label>
        <input type="month" name="newMonth">
        <input type="submit">
    </form>
</body>

</html>
input type=”month” example