HTML input type="date": Date Selection

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 date control, so you do not have to create a picker from scratch.

In this example: select an appointment date.

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">Appointment date</label>
    <input id="selected-value" name="appointment-date" type="date" value="2026-11-12" min="2026-01-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 browser may show a calendar. The submitted date has the YYYY-MM-DD form.

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-12 to another valid date 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.
The picker display depends on the browser and language settings.

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.