Purpose-specific input types
Progress and meter communicate different relationships
4 of 6 lessons complete
86 out of 100
86 out of 100 — above the target of 80
Important boundaries
accept helps choose a file but does not validate its contents.
- A hidden input is not visible or secret; servers must not trust it without validation.
progress represents completion. meter represents a measurement within a known range.
Important HTML
Choose an input type that matches the data shape — URL, date, number, file, range, and color each carry built-in semantics.
<input id="portfolio" type="url">
<input id="workshop-date" type="date">
<input id="seats" type="number" min="1" max="6">
<input id="reference-file" type="file" accept=".pdf,.doc,.docx">
<input id="confidence" type="range" min="1" max="10">
<input id="theme-color" type="color" value="#174f2d">