A form should feel easy to use. The visitor sees a question, gives an answer, and needs to know what will happen next.
What You Need to Know
This example uses the browser’s built-in datetime-local control, so you do not have to create a picker from scratch.
In this example: choose a local appointment slot.
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">Local appointment</label>
<input id="selected-value" name="appointment" type="datetime-local" value="2026-11-12T14:30" min="2026-11-01T09:00" 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 field sends a local date and time without a time zone offset.
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-12T14:30 to another valid datetime-local 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.
- A meeting in another region needs additional time-zone information.
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.