Input Types — Complete Guide
Input Types — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of HTML Tutorial on Toolliyo Academy.
On this page
HTML Tutorial · Lesson 22 of 100
Input Types
Basics ✓ → Forms & semantics → APIs & performance → Projects
Forms & semantics · 2 — Forms, SEO, a11y · ~6 min · HTML — Forms & Validation
What is this?
input type controls keyboard, validation, and picker UI (email, number, date, password…).
Why should you care?
MarkupVerse mobile users get the right keyboard when types are correct.
See it live — copy this example
Save as demo.html and open in your browser, or use Run Example below.
<label>Email <input type="email" name="email" autocomplete="email"></label>
<label>Amount <input type="number" name="amount" min="1" step="0.01"></label>
<label>Password <input type="password" name="password" autocomplete="current-password"></label>
<label>Date <input type="date" name="when"></label>Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- Use autocomplete tokens.
- number is not always best for money (text + inputmode).
- Validate server-side too.
Practice next
- Use email and password types.
- Add min on number.
- Set autocomplete.
- Try inputmode="decimal".
- Add type="tel".
Remember
Right type = better UX. autocomplete helps. Server still validates.
MarkupVerse typed inputs
Login uses email/password types.
Outcome: Mobile keyboards match fields.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
