HTML · Quick Reference

Lesson 19 — Input Types Cheat Sheet

HTML

In one line: These are the most common. Each type changes validation behaviour and, on mobile, the keyboard that appears.

Key Ideas

1Text-Based Inputs. These are the most common. Each type changes validation behaviour and, on mobile, the keyboard that appears.

Code Examples

<input type="text"     name="username"  placeholder="Username">
<input type="email"    name="email"     placeholder="you@example.com">
<input type="password" name="password"  minlength="8">
<input type="url"      name="website"   pla...

<input type="number" name="qty" min="1" max="99" step="1" value="1">
<input type="range"  name="volume" min="0" max="100" step="5">
<input type="date"   name="dob"   min="1900-01-01" max="2025-12-31">
<input type="time"   name="start...

<!-- Checkbox -->
<input type="checkbox" id="terms" name="terms" value="agreed">
<label for="terms">I agree to the terms</label>

<!-- Radio group — same name, different values -->
<input type="radio" id="free"  name="p...