📝 Phase 8 · Forms🟢 BeginnerMODULE 28
Input Fields
Course progress80%
🎯 What you'll learn: The core text-based
<input> types — text, email, password, number — and why choosing the right type matters far beyond just visual styling.
Section 1
Why type Matters
The type attribute changes more than appearance — it triggers browser-native validation, the correct mobile keyboard layout, and autofill behavior. Using type="text" for an email field throws away all of that for free.
input-types-basic.html
HTML
<label for="email">Email</label> <input type="email" id="email" name="email" required>
Section 2
text, email, password, number
| Type | Behavior |
|---|---|
text | Plain text, no special validation |
email | Browser checks for a valid email shape (something@something.tld) before submit |
password | Characters are masked as dots; still plain text underneath, so HTTPS is essential |
number | Mobile keyboards show a numeric keypad; browser allows only numeric input and up/down steppers |
input-types-all.html
HTML
<label for="username">Username</label> <input type="text" id="username"> <label for="pass">Password</label> <input type="password" id="pass" minlength="8"> <label for="age">Age</label> <input type="number" id="age" min="13" max="120">
Section 3
Why HTTPS Matters for password
⚠️
type="password" is only visual masking
type="password" hides characters on screen — it does NOT encrypt the data in transit. Without HTTPS, a password field submits the raw text over the network, fully readable to anyone intercepting it. Always serve forms over HTTPS.
Section 4
name vs id — Don't Confuse Them
id connects the input to its <label> and is used by CSS/JavaScript. name is what actually gets sent to the server as the form field's key — without it, that input's value is silently dropped from the submission.
name-vs-id.html
HTML
<!-- id links the label; name is the submitted key --> <label for="user-email">Email</label> <input type="email" id="user-email" name="email"> <!-- Server receives: email=someone@example.com -->
🧩 Knowledge Check — Lesson 28
5 questions to test your input fields knowledge.
1. Why use type="email" instead of type="text" for an email field?
2. Does type="password" encrypt the data being sent?
3. What's the difference between id and name on an input?
4. What happens if an input has no name attribute?
5. What does type="number" give you on mobile that type="text" doesn't?
Coding Challenge — Lesson 28
Apply what you learned · Beginner Level
Challenge: Build a Sign-Up Form's Field Set
Build 4 properly labeled inputs: username (text), email (email), password (password, minlength 8), and age (number, min 13 max 120). Every input needs matching id/for and a real name attribute.
Build 4 properly labeled inputs: username (text), email (email), password (password, minlength 8), and age (number, min 13 max 120). Every input needs matching id/for and a real name attribute.
💡 Show hints if you're stuck
- Don't forget: id links the label, name is what the server receives
Finished this lesson?
Mark it complete to track your progress.
Module 28 of 62Phase 8 — Forms