फॉर्म बेसिक्स
आज हम छोटा form बनाते हैं — form tag, text input से जुड़ा label, और submit button जो name field भेजता है।
- 1
Form क्या होता है
पिछले लेसन में document head भरा। आज लोग पेज पर टाइप करते हैं। Form वह शीट है जो जवाब इकट्ठा करके कहीं भेजती है।
बाहरी tag
<form>है। अंदर<label>, text<input>, और submit<button>। पहला form लेसन इतना ही है। - 2
समस्या: सिर्फ़ टेक्स्ट पढ़ने के बजाय यूज़र से डेटा इकट्ठा कैसे करें
केवल टेक्स्ट दिखाने वाले पेज यूज़र से उसका नाम, पता या फीडबैक नहीं ले सकते। वेबसाइट को इंटरएक्टिव बनाने के लिए खाली इनपुट बॉक्स, पास में स्पष्ट सवाल (लेबल), और डेटा भेजने वाला बटन चाहिए था।
इसीलिए HTML ने पूरी शीट के लिए
<form>, सवाल के लिए<label>, इनपुट के लिए<input type="text">, और भेजने के लिए<button type="submit">तैयार किया। - 3
Browser फॉर्म पेलोड को कैसे पैक और सबमिट करता है
जब यूज़र सबमिट बटन दबाता है, ब्राउज़र फॉर्म के अंदर मौजूद उन सभी इनपुट्स को ढूँढता है जिनमें
nameएट्रिब्यूट लगा हो। यह उन्हेंname=valueके रूप में बंडल करता है।फिर ब्राउज़र इस डेटा को
actionमें दिए गए सर्वर URL पर भेजता है—या तोGETविधि से URL में जोड़कर, याPOSTविधि से सुरक्षित बॉडी के रूप में। - 4
आज की प्रैक्टिस: Inputs, Accessible Labels और Submit बटन का तालमेल
नीचे दिए गए फॉर्म में टाइप करके देखें। ध्यान दें कि लेबल टेक्स्ट पर क्लिक करने से भी इनपुट बॉक्स तुरंत फ़ोकस हो जाता है, क्योंकि लेबल का
forइनपुट केidसे जुड़ा है। - 5
मूल सिद्धांत: स्पष्ट Name और शुद्ध Label बाइंडिंग
forऔरidबिल्कुल मिलाओ। हर जवाब वाले field परnameदो। Form भेजने वाले बटन परtype="submit"लगाओ।
डेटा को सीधे ब्राउज़र के URL में जोड़कर भेजता है। सर्च बॉक्स और फ़िल्टर के लिए बेहतरीन, ताकि रिज़ल्ट्स बुकमार्क किए जा सकें। पासवर्ड के लिए कभी न इस्तेमाल करें।
डेटा को बैकग्राउंड में HTTP रिक्वेस्ट बॉडी में रखकर भेजता है। लॉगिन, पासवर्ड, पेमेंट कार्ड और फाइल अपलोड के लिए अनिवार्य सुरक्षा मानक।
आप क्या सीखेंगे
- 1Form जवाब इकट्ठा करके भेजता है
- 2label सवाल पूछता है
- 3text input भरने की खाली जगह है
- 4name वह चाबी है जो submit होती है
- 5submit button form भेजता है
लाइन-बाय-लाइन
<form action="#" method="post">Form शुरू।
action= data कहाँ जाएगा।method="post"उसे request body में भेजता है।<label for="name">Name</label>दिखने वाला सवाल।
for="name"उस input से जुड़ता है जिसकाidnameहै।<input id="name" name="name" type="text">खाली जगह।
idlabel से जोड़ता है।namesubmit होता है।type="text"सामान्य text field है।<button type="submit">Submit</button>Form भेजता है।
type="submit"साफ़ लिखो ताकि बटन submit ही करे।
खुद ट्राई करो
एक labelled text field city और Submit बटन वाला form बनाओ। for और id जोड़ो, input पर name="city" लगाओ।
हिंट: सब कुछ <form> में लपेटो। for/id मिलाओ। Input को name दो।
गलती कहाँ होती है
- 1.असली
<label>के बिना input। Placeholder label नहीं — टाइप करते ही गायब हो जाता है। - 2.Input पर
nameभूल जाना। वह field form के साथ नहीं भेजी जाएगी।
इंटरव्यू की तैयारी
Q: Label पर for और Input पर id जोड़ना क्यों अनिवार्य है?↓
यह इनपुट और उसके लेबल को प्रोग्रामेटिक रूप से बाँधता है। स्क्रीन रीडर इनपुट पर पहुँचते ही उसका लेबल बोलकर सुनाते हैं। साथ ही लेबल के टेक्स्ट पर क्लिक करने से भी इनपुट बॉक्स तुरंत फ़ोकस हो जाता है।
Q: यदि किसी <input> में name attribute न हो तो क्या होगा?↓
ब्राउज़र सबमिशन के समय उस इनपुट को पूरी तरह नज़रअंदाज़ कर देगा। उसका डेटा HTTP रिक्वेस्ट में शामिल नहीं होगा और सर्वर को उस फ़ील्ड का कोई मान प्राप्त नहीं होगा।
Q: GET और POST में से कब किसका चुनाव करना चाहिए?↓
जब भी संवेदनशील डेटा (पासवर्ड, कार्ड डिटेल्स) भेजना हो या सर्वर पर नया डेटा बनाना/बदलना हो, तो हमेशा POST का उपयोग करें। केवल सर्च बार या फ़िल्टर जैसे सुरक्षित रीड-ओनली अनुरोधों के लिए GET का उपयोग करें।