Input Types (<input>)
The versatile <input> tag changes its entire appearance and behavior based on its type attribute. Set type="password" to hide characters with dots, type="email" for built-in email validation, or type="checkbox" for toggleable checks.
"<input> is like a chameleon. Put it on text leaves and it turns into a single-line textbox. Put it on password rocks and it turns into masked dots. Put it on checkbox flowers and it turns into a tick box."
Deep Dive: How It Works
type="text": Standard single-line text input.
type="email": Validates that the input contains an "@" and domain; opens email keyboards on mobile.
type="password": Masks characters with secure bullets or asterisks.
type="number": Restricts input to numbers and adds increment arrows.
type="checkbox": Square boxes for multiple choice selections.
type="radio": Round buttons where selecting one unselects other radio buttons in the same name group.
type="date": Opens native calendar date pickers.
Syntax Blueprint
<input type="text" name="username" placeholder="Enter username"> <input type="password" name="pwd"> <input type="checkbox" name="agree">
Self-closing void input tag configured by type and name attributes.
Core Rules to Remember
Common Beginner Traps & How to Fix Them
Forgetting matching name on radio buttonsWhy it happens: If radio buttons have different names, users can accidentally check all of them simultaneously.
How to fix: Give all radio buttons in a question group the EXACT same name="group_name".
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Create an email and password input pair
- Write an <input> of type="email" with placeholder="Email"
- Below it, write an <input> of type="password" with placeholder="Password"
Finished reading and practicing?
Mark this lesson as completed to update your course progress.