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 time control, so you do not have to create a picker from scratch.
In this example: choose a meeting time.
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">Meeting time</label>
<input id="selected-value" name="meeting-time" type="time" value="14:30" step="900" 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 sent to the server is a time string such as 14:30, even if the interface uses AM/PM.
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 14:30 to another valid time 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.
- Time values do not include a time zone.
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.