HTML Series: Mastering Input Types (The Magic Field)

Not All Boxes Are Equal

Ad not available

• If the user typed a Password, it showed plain text (Security risk!).
• If the user typed a Date, they had to manually write "12/01/2026" (Bad User Experience).
• If the user typed an Email, the mobile keyboard didn't show the @ symbol.

1. Privacy First: Text vs. Password

<label for="user">Username:</label>
<input type="text" id="user" name="username">

<label for="pass">Password:</label>
<input type="password" id="pass" name="password">

Ad not available

2. Email & Number

• type="email": Automatically opens a keyboard with the @ and .com buttons.
• type="number": Automatically opens the Numeric Keypad (0-9). It also prevents users from accidentally typing "ABC" in a phone number field.

<label for="mail">Email:</label>
<input type="email" id="mail" name="email">

<label for="age">Age:</label>
<input type="number" id="age" name="age">

3. Date Picker

• On iPhone, it looks like the iOS spinner.
• On Android, it looks like the Android calendar.
• On Desktop, a dropdown calendar appears.

<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">

4. Checkbox vs. Radio Button

The Checkbox (The "And" Logic)

Analogy to make it easy to understand: Pizza Toppings. You can want Cheese AND Mushroom AND Peppers. You can select Multiple options.

• Shape: Square box.

Ad not available

<p>Select your hobbies:</p>
<input type="checkbox" id="code" name="hobby" value="coding">
<label for="code">Coding</label>

<input type="checkbox" id="read" name="hobby" value="reading">
<label for="read">Reading</label>

The Radio Button (The "Or" Logic)

• Shape: Round circle.

<p>Select Gender:</p>

<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

The AI Angle: UX is Your Job

• AI cares about code running.
• You care about the User Experience (UX).

Practical Task: The Ultimate Registration Form

🛑 STOP! DO NOT COPY PASTE! You need to feel how the type attribute changes the behavior. Type this code manually to build muscle memory.

<h1>Create Account</h1>
<form>
    <div>
        <label for="username">Username:</label>
        <input type="text" id="username" name="user">
    </div>
    <br>

    <div>
        <label for="password">Password:</label>
        <input type="password" id="password" name="pass">
    </div>
    <br>

    <div>
        <label for="email">Email Address:</label>
        <input type="email" id="email" name="email">
    </div>
    <br>

    <div>
        <label for="dob">Date of Birth:</label>
        <input type="date" id="dob" name="dob">
    </div>
    <br>

    <div>
        <p>Gender:</p>
        <input type="radio" id="m" name="gender" value="male">
        <label for="m">Male</label>
        
        <input type="radio" id="f" name="gender" value="female">
        <label for="f">Female</label>
    </div>
    <br>

    <div>
        <input type="checkbox" id="terms" name="terms">
        <label for="terms">I agree to Terms & Conditions</label>
    </div>
    <br>

    <button type="submit">Sign Up</button>
</form>

<hr>
<a href="index.html">Back to Home</a>

• Try typing letters in the Age/Number field (It won't let you!).
• Try clicking the "Terms" text (It should check the box).
• Try selecting both genders (It should switch between them).

Close the Loop

1. Go to your index.html.
2. Add a link at the top (Navigation area): <a href="signup.html">Create Account</a>.
3. Now, try navigating from Home -> Signup -> Home. This is how real websites feel.

• Mix Blog 7 (Images) + Blog 12 (Forms): Can you add a small "Avatar" image next to the Username field?
• Mix Blog 9 (Tables) + Blog 12 (Forms): Can you try putting your form inputs inside a Table to align them perfectly? (It’s an old-school trick, but try it!).
• Mix Blog 6 (Links): Can you make the "Terms & Conditions" text a clickable link?

Conclusion