Theory
एक form, सात तरह के questions
FestConnect form पूछता है: आपका नाम (free text), आपका year (एक चुनिए), कौन से events (कई चुनिए), एक T-shirt size (dropdown), कोई special request (एक paragraph), आपका college (type कीजिए, या एक suggested list से चुनिए), और आख़िर में Register या Clear।
यह answer की सात अलग shapes हैं, और HTML के पास हर एक के लिए एक control है। memorise करने को बहुत कुछ लगता है। पर नहीं है, क्योंकि वे सब एक rule मानते हैं।
Formula
एक rule: name key है
जब form submit होता है, हर control एक name=value pair भेजता है। जो name आप एक control को देते हैं वह वह label है जिसके नीचे server इसकी value file करता है।
<input type="text" name="fullname"> में 'Aditi' typed होने पर यह fullname=Aditi भेजता है।
कोई name नहीं, कोई data नहीं भेजा जाता। नीचे का हर control सिर्फ़ वह एक value produce करने का एक अलग तरीक़ा है, और हर एक को एक name चाहिए।
Theory
Family, answer की shape के हिसाब से
- input type="text": free text की एक line।
- input type="radio": एक group से exactly एक चुनिए। एक group के सभी buttons एक name share करते हैं।
- input type="checkbox": कितने भी चुनिए (हर एक का अपना name या एक shared name हो सकता है)।
- input type="submit" / "reset": form भेजिए / इसे clear कीजिए।
- select के साथ option children: एक dropdown।
- textarea (
rows,cols): एक multi-line box। - button (
type,onclick): एक clickable button जो JavaScript चला सकता है। - datalist: एक text input के लिए suggestions, फिर भी free typing allow करते हुए।
Practical
असली FestConnect controls
<form action="register.php" method="post">
<label for="fullname">Name</label>
<input type="text" id="fullname" name="fullname">
<!-- radio group: one name, pick ONE -->
<label><input type="radio" name="year" value="1"> First</label>
<label><input type="radio" name="year" value="2"> Second</label>
<!-- checkboxes: pick MANY -->
<label><input type="checkbox" name="events" value="robotics"> Robotics</label>
<label><input type="checkbox" name="events" value="dance"> Dance</label>
<label for="size">T-shirt</label>
<select id="size" name="size">
<option value="s">S</option>
<option value="m">M</option>
</select>
<label for="note">Special request</label>
<textarea id="note" name="note" rows="3" cols="30"></textarea>
<!-- datalist: suggest, but allow free text -->
<input list="colleges" name="college">
<datalist id="colleges">
<option value="Ganpat University">
<option value="MSU Baroda">
</datalist>
<input type="submit" value="Register">
<input type="reset" value="Clear">
</form>This example runs in Gri-Learn on the web, where you can edit it and see the output.
At a glance
किस answer के लिए कौन सा control
| Answer shape | Control | चुनाव |
|---|---|---|
| Text की एक line | input type=text | n/a |
| एक set में से एक | radio (shared name) | exactly एक |
| एक set में से कई | checkbox | zero या कई |
| एक लंबी list में से एक | select + option | exactly एक |
| एक paragraph | textarea | n/a |
| hints वाला text | input + datalist | type या pick |
Think first
सिर्फ़ ONE year क्यों select होता है?
ऊपर के code में, 'First' और 'Second' year radios दोनों name="year" इस्तेमाल करते हैं। explain कीजिए कैसे एक name share करना exactly वह है जो उन्हें एक either/or group की तरह behave कराता है। अगर आप उन्हें अलग names दें तो क्या टूटता है?
Show the answer
Same name वाले radios एक group बनाते हैं, और एक group सिर्फ़ एक selection allow करता है: 'Second' चुनना 'First' को untick कर देता है। Shared name grouping mechanism है। अगर आप उन्हें अलग names दें (year1, year2), browser दो unrelated one-button groups देखता है, तो एक user दोनों tick कर सकता है, जो radio का पूरा point हरा देता है। Same name = एक choice।
Quiz
आप चाहते हैं students उन सभी events select करें जिनमें वे attend करेंगे (वे कई join कर सकते हैं)। कौन सा control सही है?
- Checkboxes, हर event के लिए एक
- एक name share करने वाले Radio buttons
- एक single-line text input
- हर event के लिए एक submit button
Show the answer
Checkboxes, हर event के लिए एक
Checkboxes कितने भी selections allow करते हैं, जो 'कई events attend करना' से match करता है (A)। एक name share करने वाले Radios सिर्फ़ एक allow करते हैं (B), ग़लत जब कई valid हों। एक text input (C) उन्हें event names हाथ से type कराता है, error-prone और unsearchable। Submit buttons (D) form भेजते हैं, वे options चुनने का तरीक़ा नहीं हैं। Radio = एक, checkbox = कई मुख्य फ़र्क़ है।
Watch out
इस family में तीन traps
1. Radios जो सब independently tick होते हैं: आप group को एक shared name देना भूल गए।
2. एक label जो click पर अपना box focus नहीं करता: label पर for input पर id के बराबर होना ज़रूरी है (for="size" <-> id="size")। उन्हें match करना tap target भी बड़ा करता है, जो phones पर matter करता है।
3. एक form के अंदर बिना `type` वाला `<button>` form submit करता है, अक्सर अनचाहे page reload कराते हुए। अगर एक button सिर्फ़ JavaScript चलाने के लिए है, type="button" लिखिए।
Theory
ये names JavaScript में वापस आते हैं
यहाँ जो name और id आप set करते हैं वे वे handles हैं जिन्हें Unit 4 और Unit 5 document.getElementById("fullname") से पकड़ते हैं user ने क्या type किया पढ़ने के लिए, और submit से पहले validate करने के लिए। अभी अच्छे, meaningful names (fullname, email, year) बाद में JavaScript readable बनाते हैं। Sloppy names (t1, t2) आपको बाद में परेशान करते हैं।
Summary
Key takeaways
- हर form control को एक name चाहिए: यह वह key है जिसके नीचे इसकी value भेजी जाती है (कोई name नहीं, कोई data नहीं)।
- input text = एक line; radio = एक चुनिए (group एक name share करता है); checkbox = कई चुनिए; submit/reset भेजते/clear करते हैं।
- select + option = dropdown; textarea (rows, cols) = multi-line; datalist = suggestions, फिर भी free text allowed।
- हर control को एक <label> के साथ pair कीजिए, और label for को input id से match कीजिए।
- बिना type वाला <button> form submit करता है; सिर्फ़-JS buttons के लिए type="button" इस्तेमाल कीजिए।
- Memory hook: name key है; radio एक, checkbox कई।