BitWithBite
Full-Stack Worksheet
📋 HTML Forms
SCORE___ / 20
NameClassDate
After this worksheet you can
Use common input typesApply required/placeholderLink label to inputBuild a registration form📚 Quick Recap
🎯 What you'll practice: Input types, form attributes, and accessible labels.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Which attribute prevents an empty submission?
2Placeholder text is:
3The input type that masks characters is:
4A <label for="x"> connects to:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5The attribute that identifies a field's submitted data is .
6The button type used to submit a form is type="".
7Write a labeled email input that is required.
8What's the difference between checkbox and radio inputs?
9Why should every input have an associated <label> rather than just placeholder text?
🚀 Section C · Challenge ● CHALLENGE 5
10Design the full field list (names and types) for a signup form: name, email, password, confirm password, and terms-agreement checkbox.
💭 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-C 4-A | 5 = name 6 = submit 7 = <label for="em">Email</label><input type="email" id="em" name="email" required> 8 = Checkboxes allow multiple independent selections; radio buttons in the same "name" group allow only one selection 9 = Placeholder text disappears once typing starts and isn't read reliably by all screen readers; a real label stays visible and is properly announced | 10 = name(text,required), email(email,required), password(password,required), confirm-password(password,required), terms(checkbox,required) — field names and types should be clear and each paired with a label.