Imagine asking a friend for some information on a webpage. The field should explain exactly what you need.
What You Need to Know
This example uses the browser’s built-in week control, so you do not have to create a picker from scratch.
In this example: choose a planning week.
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">Planning week</label>
<input id="selected-value" name="planning-week" type="week" value="2026-W47" min="2026-W01" 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 uses an ISO week number, such as 2026-W47.
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-W47 to another valid week 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.
- An ISO week is not the same thing as a date range chosen by your local calendar.
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.