Specialized Inputs and Status

Match controls to the data, then state measurements and progress in text.

Purpose-specific input types

Include the complete address beginning with http:// or https://.

Suggested formats: PDF or Word document. The server must still validate the uploaded file.

Disabled file controls stay in the layout but cannot be activated.

Current example value: dark green, #174f2d.

5 out of 10

The output starts with the range's initial value. Updating it while the slider moves requires JavaScript, which is outside this phase.

Progress and meter communicate different relationships

4 of 6 lessons complete 4 of 6 lessons complete
86 out of 100 86 out of 100 — above the target of 80

Important boundaries

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">