🎓 STUDENT REFERENCE GUIDE

📋 Complete HTML Input Types

Every input type explained with live examples, validation behavior, and real-world use cases.
Use this as your interactive cheat sheet!

🔢 20+ Input Types ✅ Built-in Validation 📱 Fully Responsive 💡 Practical Examples

📝 1. Text-Based Inputs

<input type="text"> No built-in validation

📌 Use with: `required`, `pattern`, `minlength` / `maxlength`
🔹 Best for: names, titles, descriptions

<input type="email"> ✅ Basic email format

📌 Built-in: requires `@` and a domain (e.g., `a@b` passes — weak!)
🔹 Best for: email addresses + backend validation

<input type="password"> No validation (masked)

📌 Behavior: characters are masked. Validate with JavaScript (min length, strength).
🔹 Best for: sensitive inputs

<input type="tel"> No validation

📌 Use with `pattern`: `pattern="[0-9]{10}"` for 10 digits.
🔹 Best for: phone numbers (shows numeric keypad on mobile)

<input type="url"> ✅ Basic URL format

📌 Built-in: requires valid protocol (http://, https://).
🔹 Best for: website fields, social links

<input type="search"> No validation

📌 Semantic: same as text but may have clear button (browser-specific).
🔹 Best for: search bars

🔢 2. Number & Range Inputs

<input type="number"> ✅ min / max / step

📌 Built-in: up/down buttons, blocks non-numeric. Use `min`, `max`, `step`.
🔹 Best for: age, quantity, year

<input type="range"> ✅ min / max / step

📌 Slider control: visual feedback. Use with <output> to show value.
🔹 Best for: volume, brightness, rating

📅 3. Date & Time Inputs (Browser Validated)

<input type="date"> ✅ Strict format

🔹 Best for: birthdays, appointments. Format: YYYY-MM-DD

<input type="datetime-local"> ✅ Date + Time

🔹 Best for: events, reminders (local timezone)

<input type="month"> ✅ Year + Month

🔹 Best for: credit card expiry, monthly reports

<input type="week"> ✅ Year + Week

🔹 Best for: weekly planning, sprint schedules

<input type="time"> ✅ HH:MM format

🔹 Best for: opening hours, alarm settings

☑️ 4. Selection Inputs (Checkbox, Radio, File)

<input type="checkbox"> ✅ required

I agree to the terms

📌 Validation: `required` forces at least one checkbox checked.
🔹 Best for: terms acceptance, multiple selections

<input type="checkbox" required> Accept terms

<input type="radio"> ✅ required (group)

Male Female

📌 Group: same `name` attribute. `required` on one radio makes group required.
🔹 Best for: gender, payment method

<input type="file"> ✅ accept, multiple

📌 Attributes: `accept` (file types), `multiple` (multiple files).
🔹 Best for: uploads, avatars, documents

🎨 5. Interactive & Visual Inputs

<input type="color"> ✅ Always valid hex

🔹 Best for: theme pickers, color selection

<input type="hidden"> Invisible

📌 Hidden input: stores data not visible to user. Used for IDs, tokens.
🔹 Best for: CSRF tokens, user IDs, form state

🔘 6. Button Inputs (Form Actions)

<input type="submit">

📌 Submits the form. Triggers `submit` event.

<input type="reset">

📌 Resets all form fields to initial values.

<input type="button">

📌 Generic button — needs JavaScript for actions.

📊 Quick Reference: Validation Built-in by Type

Input Type	Built-in Validation	Common Attributes
email	✅ Basic format	required, multiple
number	✅ min, max, step	min, max, step, required
url	✅ Protocol required	required, pattern
date/time types	✅ Strict format	min, max, required
checkbox/radio	✅ required	required, checked
text/tel/password	❌ None	required, pattern, minlength