Html Input Types — Free Html Tutorial
Learn Html Input Types in Html with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.
TL;DR: Learn Html Input Types in Html with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.
Written & reviewed by the Syllab.in Academic Team (CBSE/NCERT subject experts) · Updated
Html Input Types in Html
HTML5 input types provide built-in validation and mobile-friendly keyboards: email, number, date, tel, url, range, color, time, search.
Validation attributes: required (must fill), minlength/maxlength, min/max, pattern (regex), step.
type="email" automatically validates email format. type="tel" with pattern="[6-9][0-9]{9}" validates Indian phone numbers.
Always pair inputs with labels using for/id — this improves accessibility and usability.
Html Input Types — Syntax
<input type="email" required placeholder="email@example.com">
<input type="number" min="1" max="100">
<input type="date">
<input type="range" min="0" max="100" step="5">
<input type="color" value="#3b82f6">
<input type="tel" pattern="[6-9][0-9]{9}" placeholder="Indian phone">
Learn Html Input Types step by step with Syllab's free interactive Html tutorial — runnable code examples, practice exercises and instant AI feedback, all free with no signup. Explore the full Html course →