Home › coding › html › html input types

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.

✓ 100% Free ✓ No Login Needed ✓ NCERT / CBSE Aligned ✓ Download as PDF

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 Jul 14, 2026

🤖 Stuck on any question? Ask Syllab's free AI Tutor for a step-by-step explanation — instant, unlimited, no login.

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="range" min="0" max="100" value="50">
<input type="color" value="#3b82f6">
<input type="time">
<input type="date">
<input type="week">
<input type="month">

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 →

Explore:

  • Syllabus
  • Practice
  • Mock Tests
  • NCERT Solutions
  • Coding
  • GK Quiz
  • Career Predictor
  • AI Tutor
  • Live Quiz
  • Doubt Solver
  • Microlearning
  • Free Alternatives
  • Kids Zone
  • Study Room
  • Calculators
  • Worksheets

Syllab.in — Free learning for Indian students, Class 1–12