Lesson 6 of 55 · HTML
Advanced Form Controls – Range, Color, File
Duration: 9 min
Specialized inputs
<label for='volume'>Volume:</label>
<input type='range' id='volume' name='volume' min='0' max='100' step='5' value='50' />
<label for='favcolor'>Pick a color:</label>
<input type='color' id='favcolor' name='favcolor' value='#ff0000' />
<label for='resume'>Upload resume:</label>
<input type='file' id='resume' name='resume' accept='.pdf,.doc,.docx' multiple />
<input type='range'>
- Slider UI for numeric values.
- Style with
::-webkit-slider-thumb,::-moz-range-thumb, and the generic::-ms-thumbpseudo‑elements for a custom look. - Add ARIA (
aria-valuemin,aria-valuemax,aria-valuenow) if you hide the native UI.
<input type='color'>
- Native colour picker; returns a HEX value.
- Provide a fallback UI (e.g., a text input) for browsers that lack support.
<input type='file'>
acceptrestricts selectable file types; you can also use MIME types (e.g.,accept='image/*').multipleallows several files to be selected.- Remember to set
enctype='multipart/form-data'on the<form>. - Validate file size and type on the server; client‑side checks improve UX but are not a security measure.
Quick checklist for advanced inputs
- Slider (
range) labelled and ARIA attributes present? ✅ - Colour picker has a fallback for older browsers? ✅
- File input
acceptattribute limits uploads appropriately? ✅ - Form
enctype='multipart/form-data'set when using file inputs? ✅ - Server‑side validation for file size/type planned? ✅
Tip: Use CSS variables to theme the colour picker display if you implement a custom UI.