📝 Phase 8 · Forms🟡 IntermediateMODULE 29
Input Types
Course progress83%
🎯 What you'll learn: The specialized input types that replace JavaScript widgets entirely — date, time, color, range, file, search, url, and tel.
Section 1
date & time — Native Pickers, Free
These give you a full native date/time picker UI with zero JavaScript or CSS libraries.
date-time.html
HTML
<label for="dob">Date of Birth</label> <input type="date" id="dob"> <label for="start">Session Time</label> <input type="time" id="start">
Section 2
color & range — Visual Pickers
color-range.html
HTML
<label for="theme">Theme Color</label> <input type="color" id="theme" value="#4ade80"> <label for="volume">Volume</label> <input type="range" id="volume" min="0" max="100">
💡
range has no visible value by default
Unlike number, a range slider doesn't show its current value on screen. If users need to see the number, you must display it yourself with a little JavaScript (an "input" event listener updating a nearby span).
Section 3
file — Uploads
file.html
HTML
<label for="resume">Upload Resume (PDF)</label> <input type="file" id="resume" accept=".pdf"> <!-- Multiple files at once --> <input type="file" accept="image/*" multiple>
Section 4
search, url, tel
| Type | Benefit |
|---|---|
search | Adds a native "clear" (×) button in most browsers; some styling differences |
url | Validates a URL shape; mobile keyboards show / and .com shortcuts |
tel | Mobile keyboards show a phone dial pad; no format validation (phone formats vary too much globally) |
search-url-tel.html
HTML
<input type="search" placeholder="Search courses..."> <input type="url" placeholder="https://yoursite.com"> <input type="tel" placeholder="+92 300 1234567">
🧩 Knowledge Check — Lesson 29
5 questions to test your input types knowledge.
1. What does type="date" give you without any extra code?
2. Does a range slider show its current numeric value by default?
3. What does the accept attribute do on a file input?
4. Why doesn't type="tel" validate a specific phone number format?
5. What mobile benefit does type="url" provide?
Coding Challenge — Lesson 29
Apply what you learned · Intermediate Level
Challenge: Build an Event Registration Form Section
Build labeled inputs for: event date (date), start time (time), favorite theme color (color), a satisfaction range slider (0-10), a profile photo upload (file, accept="image/*"), and a phone number (tel).
Build labeled inputs for: event date (date), start time (time), favorite theme color (color), a satisfaction range slider (0-10), a profile photo upload (file, accept="image/*"), and a phone number (tel).
💡 Show hints if you're stuck
- Range:
<input type="range" min="0" max="10">
Finished this lesson?
Mark it complete to track your progress.
Module 29 of 62Phase 8 — Forms