BitWithBite
HTML Worksheet
🌐 Input Types
SCORE___ / 20
NameClassDate
After this worksheet you can
Pick the right input typeemail, number, date, checkbox, radioRadio groups share a namePlaceholders vs labels📚 Quick Recap
Changing one attribute — type — transforms a plain text box into a date picker, color swatch, slider, file chooser, or star-rating input. HTML5 introduced over 20 input types that get the browser's native UI for free, with built-in validation, mobile keyboard switching, and accessibility baked in.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1One-of-many choice uses:
2Many-of-many choices use:
3Mobile shows a number pad for type:
4Radios become one group when they share:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5type="" validates an email shape.
6type="date" opens a picker.
7Write a Yes/No radio pair.
8Age field 13-19 only.
9Checkbox vs radio in one line?
🚀 Section C · Challenge ● CHALLENGE 5
10Why is placeholder-only labelling bad?
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-D 4-B | 5 email 6 date/calendar 7 = <input type="radio" name="ans" value="yes"> <input type="radio" name="ans" value="no"> 8 = <input type="number" min="13" max="19"> 9 = Checkbox = multiple allowed; radio = exactly one of a group | 10 = It disappears while typing and screen readers may miss it