Think of filling out a sign-up page. Clear fields make the job simple; confusing fields make people leave.
What You Need to Know
This example uses the browser’s built-in month control, so you do not have to create a picker from scratch.
In this example: choose a billing month.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<form action="/preferences" method="get">
<label for="selected-value">Billing month</label>
<input id="selected-value" name="billing-month" type="month" value="2026-11" min="2026-01" required>
<button type="submit">Save choice</button>
</form>Let’s Read the Code
- type: Type changes what sort of control or resource the browser uses.
- <form>: The form groups controls and identifies where submitted data goes.
- <label>: The label tells people what the input is for. A matching for/id pair makes the label clickable.
- for: For connects a label or output with a control by ID.
What the example shows: The value contains a year and month, not a specific day.
What Happens in the Browser?
The HTML controls work in the browser, but saving an answer requires the example action path to be handled by a real server.
Look at the submitted value. The picker may display a friendly calendar or local clock, while form values use specific machine-readable formats. A local date and time does not automatically carry a time-zone identifier. Compare what you see with what your application receives.
Your Turn
Change the value from 2026-11 to another valid month value, then submit and read the URL query string.
Common Beginner Mistakes
- Copying the example without giving the fields a clear label and a usable name.
- Support and the look of the picker can differ by browser.
Key Takeaways
- A control needs a clear label and, when submitted, a meaningful name and value.
- type: Type changes what sort of control or resource the browser uses.
- Remember that HTML form rules help the visitor, but server-side code must decide whether received data is valid.