📘 Lesson · Lesson 20
All Input Types
सभी Input Types
The Text Family — one tag, many personalities
<input type="text" name="name"> normal single-line text
<input type="email" name="email"> validates xx@yy shape on submit
<input type="password" name="pass"> shows ●●●● dots
<input type="number" name="marks"> digits only + tiny up/down arrows
<input type="tel" name="mobile"> phone (no format check - patterns later)
<input type="url" name="site"> validates https://... shape
<input type="search" name="q"> text + a little × clear buttonemail → typing "abcd" and submitting: "Please include an '@' in the email address"
number → typing letters: simply doesn't accept them
All are the SAME
<input> tag — type changes its personality. The right type buys you free validation, the right mobile keyboard (next section), and browser autofill knowing what belongs where. Choosing type="text" for everything throws these gifts away.The Mobile Keyboard Secret
type="text" → full QWERTY keyboard
type="email" → keyboard with @ and . prominent
type="tel" → BIG NUMBER PAD (like the dialer!)
type="number" → numeric keyboard
type="url" → keyboard with / and .comWhy this matters commercially: a parent filling "mobile number" on a phone gets a giant number pad instead of hunting digits on QWERTY — forms feel effortless and completion rates go up. This single detail separates forms that convert from forms people abandon. Zero extra code; just the honest type.
radio vs checkbox — the exam classic
Gender (choose ONE):
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other
Subjects (choose MANY):
<input type="checkbox" name="subjects[]" value="math"> Maths
<input type="checkbox" name="subjects[]" value="science"> Science
<input type="checkbox" name="subjects[]" value="english"> EnglishGender: (•) Male ( ) Female ( ) Other ← selecting one DESELECTS others
Subjects: [✓] Maths [✓] Science [ ] English ← tick as many as you like
The magic is the shared name: all three radios say
name="gender" — that same name is what GROUPS them so only one can win (like one MLA seat, many candidates). Give each radio a different name and suddenly all are selectable — the classic radio bug. value is what actually gets sent (checked radio → gender=male). The subjects[] bracket style lets PHP receive multiple checkbox values as an array.date, file, range, color — the free widgets
<input type="date" name="dob"> calendar picker pops up!
<input type="time" name="slot"> time picker
<input type="file" name="photo" accept="image/*"> Browse... button
<input type="range" name="volume" min="0" max="100"> slider ─────●───
<input type="color" name="theme"> color swatch pickerdategives a real calendar — no more "DD/MM or MM/DD?" confusion, and the value always submits as YYYY-MM-DD.fileis the upload field. Two partner rules: the form needsmethod="post"ANDenctype="multipart/form-data", or the file silently never arrives.accept="image/*"pre-filters the picker to images.- These widgets cost a JavaScript library each in the old days — HTML5 made them one attribute.
The hidden Type — data the user never sees
<input type="hidden" name="form_source" value="admission_page_2026">Invisible on the page, but submits with the form. Used to carry IDs, page-source tags, or security tokens along with user input. One warning that will matter in your PHP days: hidden ≠ secure — Ctrl+U shows it, and DevTools can edit it. Never trust a hidden field's value on the server.
Exam Corner
Q: Radio vs checkbox? Radio = one choice from a group (same name groups them); checkbox = many choices.
Q: Why do all radios in a group need the same name? The shared name IS the group — that's how the browser knows they compete.
Q: Which two things does file upload require? method="post" and enctype="multipart/form-data".
Q: What format does input type="date" submit? YYYY-MM-DD, regardless of how the picker displays it.
Q: Is a hidden input secure? No — visible in source and editable in DevTools; never trust it server-side.
Q: Why do all radios in a group need the same name? The shared name IS the group — that's how the browser knows they compete.
Q: Which two things does file upload require? method="post" and enctype="multipart/form-data".
Q: What format does input type="date" submit? YYYY-MM-DD, regardless of how the picker displays it.
Q: Is a hidden input secure? No — visible in source and editable in DevTools; never trust it server-side.
Text परिवार — एक tag, कई personalities
<input type="text" name="name"> normal single-line text
<input type="email" name="email"> submit par xx@yy shape check karta hai
<input type="password" name="pass"> ●●●● dots dikhata hai
<input type="number" name="marks"> sirf digits + chhote up/down arrows
<input type="tel" name="mobile"> phone (format check nahi - patterns aage)
<input type="url" name="site"> https://... shape check karta hai
<input type="search" name="q"> text + chhota × clear buttonemail → "abcd" likhkar submit: "Please include an '@' in the email address"
number → letters type karo: leta hi nahi
सब SAME
<input> tag हैं — type उसकी personality बदलता है. सही type से मुफ्त मिलता है: validation, सही mobile keyboard (अगला section), और browser का autofill जानना कि कहां क्या भरना है. हर जगह type="text" लगाना ये तोहफे फेंक देना है.Mobile Keyboard का राज़
type="text" → poora QWERTY keyboard
type="email" → @ aur . waale prominent keys
type="tel" → BADA NUMBER PAD (dialer jaisa!)
type="number" → numeric keyboard
type="url" → / aur .com waala keyboardCommercially यह क्यों मायने रखता है: phone पर "mobile number" भरते parent को QWERTY पर digits ढूंढने की जगह बड़ा number pad मिलता है — form सहज लगता है और completion rate बढ़ता है. यही एक detail convert करने वाले forms को छोड़ दिए जाने वाले forms से अलग करती है. Extra code शून्य; बस ईमानदार type.
radio vs checkbox — exam classic
Gender (EK chuno):
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other
Subjects (KAI chuno):
<input type="checkbox" name="subjects[]" value="math"> Maths
<input type="checkbox" name="subjects[]" value="science"> Science
<input type="checkbox" name="subjects[]" value="english"> EnglishGender: (•) Male ( ) Female ( ) Other ← ek chunte hi baaki DESELECT
Subjects: [✓] Maths [✓] Science [ ] English ← jitne chaahe tick karo
जादू shared name में है: तीनों radios पर
name="gender" — वही same name उन्हें GROUP करता है ताकि एक ही जीते (एक MLA seat, कई candidates जैसा). हर radio को अलग name दीजिए और अचानक सब select होने लगेंगे — classic radio bug. value वह है जो असल में जाता है (checked radio → gender=male). subjects[] वाली bracket style से PHP कई checkbox values array में receive करता है.date, file, range, color — मुफ्त widgets
<input type="date" name="dob"> calendar picker khulta hai!
<input type="time" name="slot"> time picker
<input type="file" name="photo" accept="image/*"> Browse... button
<input type="range" name="volume" min="0" max="100"> slider ─────●───
<input type="color" name="theme"> color swatch pickerdateअसली calendar देता है — "DD/MM या MM/DD?" वाली उलझन खत्म, और value हमेशा YYYY-MM-DD में submit होती है.fileupload field है. दो साथी rules: form परmethod="post"AURenctype="multipart/form-data", वरना file चुपचाप कभी पहुंचती ही नहीं.accept="image/*"picker को images तक filter कर देता है.- पुराने दौर में हर widget के लिए एक JavaScript library लगती थी — HTML5 ने इन्हें एक attribute बना दिया.
hidden Type — data जो user कभी नहीं देखता
<input type="hidden" name="form_source" value="admission_page_2026">Page पर अदृश्य, पर form के साथ submit होता है. User input के साथ IDs, page-source tags या security tokens ले जाने के लिए. एक warning जो आपके PHP दिनों में काम आएगी: hidden ≠ secure — Ctrl+U में दिखता है, DevTools से edit होता है. Server पर hidden field की value पर कभी भरोसा नहीं.
Exam Corner
Q: Radio vs checkbox? Radio = group में से एक choice (same name group बनाता है); checkbox = कई choices.
Q: Group के सब radios को same name क्यों? Shared name ही group है — उसी से browser जानता है ये आपस में लड़ रहे हैं.
Q: File upload को कौन-सी दो चीज़ें चाहिए? method="post" और enctype="multipart/form-data".
Q: input type="date" किस format में submit करता है? YYYY-MM-DD, picker चाहे जैसे दिखाए.
Q: क्या hidden input secure है? नहीं — source में दिखता है, DevTools में editable; server-side कभी भरोसा नहीं.
Q: Group के सब radios को same name क्यों? Shared name ही group है — उसी से browser जानता है ये आपस में लड़ रहे हैं.
Q: File upload को कौन-सी दो चीज़ें चाहिए? method="post" और enctype="multipart/form-data".
Q: input type="date" किस format में submit करता है? YYYY-MM-DD, picker चाहे जैसे दिखाए.
Q: क्या hidden input secure है? नहीं — source में दिखता है, DevTools में editable; server-side कभी भरोसा नहीं.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.