Build: a date within a range

Create a date field with minimum and maximum limits.

Official sourceWHATWG HTML — date inputReviewed: 2026-08-26

STEP 1 · LEARN

How it works

Create a date field with minimum and maximum limits. Semantic structure should describe meaning, not visual appearance.

Correct example

<form><label for="start-date">Start date</label><input id="start-date" type="date" name="start_date" min="2026-01-01" max="2026-12-31"></form>

type="date" describes a calendar date. min and max use the standard YYYY-MM-DD format and form a valid range only when the minimum is not later than the maximum.

Common mistake

<form><label for="start-date">Date</label><input id="start-date" type="date" name="start_date" min="2026-12-31" max="2026-01-01"></form>

The attributes exist and the field is labelled, but the range is reversed: the minimum date is later than the maximum date.

STEP 2 · APPLY

Your exercise

Complete the example. Create a date field with minimum and maximum limits.

index.htmlHTML

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

What needs to pass

0%not checked

The date has id, name, min and max.
The limits are valid dates and min does not exceed max.
The date field is labelled.

Explain the solution logic

Place the input in a form, connect the label through for and id, add name and reverse the limits so min is the earlier date.

How it works

Your exercise

Write and see the result

What needs to pass