Form Types

⌨️ Input Types — 20+ Data Entry Fields

<input> element sabse zyada use hone wala form control hai. type attribute sab kuch change kar deta hai — kaise dikhta hai, kaise validate hota hai, mobile pe kaunsa keyboard aata hai. Text se normal keyboard. Email se @ key. Date se calendar. Number se number pad. Ek tag, 20+ chehre.

Har type alag browser behavior trigger karta hai: mobile keyboard layout, built-in validation, native UI (date picker, color picker, file browser). type="text" default hai — explicitly likhne ki zarurat nahi. Hamesha sabse specific type choose karo — email ke liye text kabhi mat use karo.

🛺

Auto Stand Analogy: "Naam?" → text input. "Phone number?" → tel input (mobile pe dialer pad). "Kitne log?" → number input (letters nahi chalega). "Kab aana hai?" → date input (calendar khulta hai). Right type = right keyboard = fast entry.

Code Example

HTML — Input Types — 20+ Data Entry Fields

<!-- Text -->
<input type="text" placeholder="Tumhara naam" maxlength="50">

<!-- Email — @ automatically validate -->
<input type="email" placeholder="your@email.com" required>

<!-- Password — dots instead of characters -->
<input type="password" placeholder="Password daalo" minlength="8">

<!-- Number — letters nahi chalega -->
<input type="number" min="1" max="100" step="1" value="25">

<!-- Phone — mobile pe dialer pad -->
<input type="tel" pattern="[0-9]{10}" placeholder="9876543210">

<!-- URL — http/https validate -->
<input type="url" placeholder="https://example.com">

<!-- Date — calendar picker -->
<input type="date" min="2025-01-01" max="2025-12-31">

<!-- Time -->
<input type="time" value="12:00">

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

<!-- Month picker -->
<input type="month">

<!-- Week picker -->
<input type="week">

<!-- Color picker -->
<input type="color" value="#f97316">

<!-- Range slider -->
<input type="range" min="0" max="100" value="50">

<!-- Search — clear X button ke saath -->
<input type="search" placeholder="Dishes search karo...">

<!-- File upload -->
<input type="file" accept="image/*" multiple>

<!-- Hidden — dikhta nahi, form ke saath bhejta hai -->
<input type="hidden" name="formId" value="12345">

<!-- Checkbox (toggle) -->
<input type="checkbox" id="subscribe" checked>
<label for="subscribe">Newsletter subscribe karo</label>

<!-- Radio (group choice) -->
<input type="radio" name="size" value="small"> Small
<input type="radio" name="size" value="medium" checked> Medium

<!-- Submit button -->
<input type="submit" value="Order Place Karo">

<!-- Reset button -->
<input type="reset" value="Form Clear Karo">

type="text"Default — koi bhi text, mobile pe standard keyboard

type="email"@ sign automatically validate, mobile pe @ key dikhata hai

type="password"Characters dots mein hide, mobile strong passwords suggest karta hai

type="number"Sirf numbers, letters nahi — mobile pe number pad

type="tel"Phone number — mobile pe dialer pad (pattern se validate karo)

type="url"http/https format validate karta hai

type="date"Sab browsers mein native calendar picker kholta hai

type="time"Time picker hour:minute ke saath

type="datetime-local"Combined date + time picker

type="color"Native color picker kholta hai

type="range"Slider — output ke saath current value dikhao

type="search"Text jaisa lekin clear X button aur search icon

type="file"File browser kholta hai — accept file types limit karta hai, multiple allows many

type="hidden"User ko dikhta nahi par form data ke saath value bhejta hai

min/max/stepNumber range — min minimum, max maximum, step increment

maxlengthMaximum characters allowed (text/email/password)

accept="image/*"File input — browser mein sirf image files dikhao

placeholderHint text jo user type karne pe disappear ho jata hai

valueDefault/pre-filled value

✅ When to Use

Naam → type="text"
Email → type="email" (KABHI text nahi)
Password → type="password"
Age/quantity/price → type="number"
Phone → type="tel" pattern ke saath
Website link → type="url"
Birthday/order date → type="date"
Color pick karna → type="color"
Volume/brightness → type="range"
Photo upload → type="file" accept="image/*"
Search → type="search"

❌ When NOT to Use

Phone number type="text" se → mobile pe dialer pad nahi aayega
Email type="text" se → @ validation nahi, galat keyboard
Quantity type="text" se → user "abc" type kar sakta hai "5" ki jagah
Date type="text" se → calendar nahi, har baar galat format

💡

type attribute mobile pe tumhara BEST FRIEND hai. Galat type = galat keyboard = frustrated users. type="email" se @ key aata hai. type="tel" se dialer. type="number" se number pad. Ek attribute change = mobile experience 10x better.

← Back to Forms Chapter