Theory
Data जाता कहाँ है?
एक student FestConnect के form में भरता है: नाम, email, event, phone। वे Register दबाते हैं। Boxes clear हो जाते हैं। अब क्या? वह data असल में गया कहाँ?
कोई भी input box यह decide नहीं करता। इनके चारों तरफ़ wrap किया <form> tag decide करता है। एक form एक container plus instructions का एक set है: submit पर, मेरे अंदर सब कुछ collect कीजिए, और इसे एक ख़ास page पर, एक ख़ास method से, भेजिए। वे दो instructions action और method attributes हैं।
Theory
एक address और एक delivery mode वाला envelope
Form एक envelope है। इसके अंदर हर input एक slip है जो आप डालते हैं। Submit पर, envelope seal होकर post हो जाता है।
actionenvelope पर लिखा address है: कौन सा page इसे receive करता है।methoddelivery mode है: किसी के भी पढ़ने के लिए एक postcard पर लिखा (GET), या सिर्फ़ receiver के खोलने के लिए sealed (POST)।
Theory
action और method
- action: वह URL जो data handle करता है, जैसे
action="register.php"। - method: data कैसे travel करता है।
- GET data को URL से जोड़ देता है:
register.php?name=Aditi&event=Robotics। Visible, bookmarkable, length-limited। Searches और safe reads के लिए अच्छा। - POST data को hidden request body में डालता है। URL में नहीं दिखता, कोई length limit नहीं। इसे registrations, logins, कुछ भी जो data बदले या private हो, के लिए इस्तेमाल कीजिए।
अगर आप method छोड़ दें, default GET है।
Practical
FestConnect form shell
<form action="register.php" method="post" autocomplete="on">
<!-- input controls go here (next lesson) -->
<input type="text" name="fullname">
<input type="email" name="email">
<button type="submit">Register</button>
</form>
<!-- method="post" keeps the phone/email out of the visible URL -->This example runs in Gri-Learn on the web, where you can edit it and see the output.
At a glance
बाकी form switches
| Attribute | क्या करता है |
|---|---|
| novalidate | submit पर browser की built-in validation बंद करता है |
| autocomplete | on या off: browser के saved values offer करना |
| target | response कहाँ खुलता है (_self default, _blank नया tab) |
Think first
Registration के लिए GET या POST?
FestConnect एक phone number और email collect करता है। Form को GET या POST इस्तेमाल करना चाहिए, और दूसरे choice से क्या ग़लत होगा? Tap करने से पहले answer दीजिए।
Show the answer
POST इस्तेमाल कीजिए। GET के साथ, phone और email address bar में बैठ जाते (register.php?email=aditi@x.com&phone=98...), कंधे के ऊपर से visible, browser history में saved, और servers द्वारा logged। GET कितना भेज सकते हैं इसकी भी limit लगाता है। POST data को request body में छुपाता है और कोई length limit नहीं है, यही कारण है हर login और sign-up form इसे इस्तेमाल करता है।
Quiz
FestConnect पर एक search box users को results link दोस्तों के साथ URL copy करके share करने देता है। कौन सा method फिट होता है, और क्यों?
- GET: query URL में बैठती है, तो link shareable और bookmarkable है
- POST: यह search term छुपाता है, जो sharing को चाहिए
- दोनों में से कोई भी: method का URL पर कोई असर नहीं
- novalidate: यही URLs को shareable बनाता है
Show the answer
GET: query URL में बैठती है, तो link shareable और bookmarkable है
एक search के लिए जो आप share करना चाहते हैं GET बिल्कुल सही है: term URL में रहता है (?q=robotics), तो link copy करना results reproduce करता है (A)। POST term को body में छुपाता है, तो URL में share करने को कुछ नहीं होता (B)। Method URL को बिल्कुल बदलता है (C ग़लत है, यही तो पूरा GET/POST फ़र्क़ है)। novalidate (D) सिर्फ़ validation disable करता है और URLs से इसका कोई लेना-देना नहीं।
Watch out
GET बनाम POST trap
यह सबसे ज़्यादा पूछा जाने वाला form question है। Summary सही रखिए:
- GET: data URL में, visible, bookmarkable, limited length, reads/searches के लिए।
- POST: data body में, hidden, unlimited, writes/logins/sign-ups के लिए।
Mark-losers: यह कहना 'POST हमेशा ज़्यादा secure है' (POST encryption नहीं है, सिर्फ़ HTTPS है; POST सिर्फ़ data को URL से बाहर रखता है), और यह भूलना कि default method GET है।
Theory
यह empty stage है
अभी form के अंदर लगभग कुछ नहीं है। अगला lesson इसे असली controls से भरता है: text boxes, radios, checkboxes, dropdowns। इनमें से हर एक को इस <form> के अंदर बैठना ज़रूरी है और एक name रखना ज़रूरी है, क्योंकि name वही label है जिसके नीचे इसकी value action को भेजी जाती है। Unit 5 में आप data के जाने से पहले JavaScript validation जोड़ेंगे।
Summary
Key takeaways
- <form> input controls को wrap करता है और submit पर इनका data भेजता है।
- action = वह URL जो data receive करता है; method = यह कैसे भेजा जाता है।
- GET data को visible URL में डालता है (shareable, length-limited, reads के लिए); POST इसे body में छुपाता है (logins/sign-ups के लिए, unlimited)।
- Default method GET है; POST encryption नहीं है, सिर्फ़ HTTPS है।
- novalidate built-in validation disable करता है; autocomplete saved values toggle करता है; target तय करता है response कहाँ खुलता है।
- Memory hook: एक address (action) और एक delivery mode (method) वाला envelope।