Forms
Input Types
text, email, number, date, checkbox...
💡 <input type="..."> ek Swiss Army knife hai — sirf ek tag, lekin type attribute badalne se poora different tool ban jaata hai: text field, email validator, number spinner, date picker, checkbox — sab isi ek tag se.
HTML5 ne bahut saare specialized input types diye — email (auto email-format validation), number (sirf numbers, spinners), date (date picker UI), tel (phone number), password (characters chhupe hote hain), checkbox/radio (selection), color (color picker), range (slider).
<input type="text" placeholder="Naam">
<input type="email" placeholder="email@example.com">
<input type="password" placeholder="Password">
<input type="number" min="1" max="100">
<input type="date">
<input type="tel" placeholder="+91 9876543210">
<input type="checkbox" id="agree"> <label for="agree">Terms accept karta hoon</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="range" min="0" max="10">
<input type="color">⌨️
<input type="..."> ek Swiss Army knife hai — sirf ek tag, lekin type attribute badalne se poora different tool ban jaata hai: text field, email validator, number spinner, date picker, checkbox — sab isi ek tag se.
1 / 2
⚡ Quick Recap
- type attribute se input ka behavior/UI badalta hai
- email/number/date jaise types built-in validation dete hain
- Mobile par sahi type = sahi keyboard, better UX
On this page (2 subtopics)
placeholder ek hint text hai (field khaali hone par dikhta hai, type karte hi gayab) — label ka substitute NAHI hai. autocomplete browser ko batata hai pehle se saved values suggest kare ya nahi.
<input type="text" placeholder="Jaise: Aarav Kumar" autocomplete="name">
<input type="email" placeholder="you@example.com" autocomplete="email">
<input type="password" autocomplete="new-password">Common Mistake: placeholder ko label ki jagah use karna accessibility mistake hai — placeholder type karte hi gayab ho jaata hai, screen readers use consistently announce nahi karte jaise label ko karte hain. Hamesha proper <label> bhi rakho.
step number/range inputs mein increment amount control karta hai. <datalist> ek input ke saath autocomplete suggestions deta hai — dropdown jaisa, lekin free-text bhi allow karta hai (select ke ulat, jo sirf fixed options tak limited hai).
<input type="number" step="5" min="0" max="100"> <!-- 0, 5, 10, 15... -->
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist>
<!-- User typing bhi kar sakta hai, ya suggestions se choose bhi -->Tip: datalist select se zyada flexible hai — user apni custom value type kar sakta hai agar list mein na ho, jabki select sirf predefined options tak limited hai.