Skip to main content

HTML input type="month"

The HTML input type month is a form input element that allows users to enter a month and year in a simple and intuitive way. The input field displays a dropdown menu with a list of months and a separate input field for the year. This makes it easy for users to select the month and year they want without having to manually enter the information.

The syntax for creating an HTML input type month is simple. You simply use the input element with the type attribute set to "month", like so:

<label for="date">Select a month and year:</label>
<input type="month" id="date" name="date">

Other examples:

<label for="expiration-date">Expiration Date:</label>
<input type="month" id="expiration-date" name="expiration-date" value="2023-12">

<label for="payment-date">Payment Date:</label>
<input type="month" id="payment-date" name="payment-date" disabled>

<label for="delivery-date">Delivery Date:</label>
<input type="month" id="delivery-date" name="delivery-date" min="2023-04" max="2023-12">

<label for="order-date">Order Date:</label>
<input type="month" id="order-date" name="order-date">
<button onclick="alert(document.getElementById('order-date').value)">Get Value</button>

HTML input type month can be used for many purposes in your web projects:

  • Creating a calendar widget: If you're building a calendar widget or a scheduling application, the HTML input type month can be a useful input element for selecting a specific month. You could use the input field to allow users to select the month they want to view events for, and then dynamically load the relevant events based on the selected month.
  • Collecting birthdate information: If you're building a registration form or a profile page, you might want to collect the user's birthdate information. The HTML input type month can be used to collect the month and year of the user's birth, making it easy for them to enter this information without having to manually enter the date.
  • Filtering data by month: If you're building a data visualization or a dashboard application, you might want to allow users to filter the data by month. The HTML input type month can be used to create a dropdown menu that lets users select the month they want to view data for, and then dynamically update the data based on the selected month.