उपयोगकर्ताओं से डेटा पाने के लिए फ़ॉर्म का इस्तेमाल करना

फ़ॉर्म एलिमेंट के बारे में इस जानकारी की मदद से, वेब पर फ़ॉर्म इस्तेमाल करने के बारे में बुनियादी बातें जानें.

मान लें कि आपको अपनी वेबसाइट पर लोगों से उनके पसंदीदा जानवर के बारे में पूछना है. सबसे पहले, आपको डेटा इकट्ठा करने का तरीका तय करना होगा.

एचटीएमएल में, इसे फ़ॉर्म एलिमेंट (<form>), <label> के साथ <input>, और सबमिट <button> का इस्तेमाल करके बनाया जा सकता है.

<form>
  <label for="animal">What is your favorite animal?</label>
  <input type="text" id="animal" name="animal">
  <button>Save</button>
</form>

फ़ॉर्म एलिमेंट क्या होता है?

फ़ॉर्म एलिमेंट में ये चीज़ें शामिल होती हैं: स्टार्ट टैग <form>, स्टार्ट टैग में तय किए गए वैकल्पिक एट्रिब्यूट, और एंड टैग </form>.

स्टार्ट और एंड टैग के बीच, फ़ॉर्म एलिमेंट शामिल किए जा सकते हैं. जैसे, <input> और <textarea>. इनका इस्तेमाल, उपयोगकर्ता से अलग-अलग तरह का इनपुट लेने के लिए किया जाता है. अगले मॉड्यूल में, आपको फ़ॉर्म एलिमेंट के बारे में ज़्यादा जानकारी मिलेगी.

डेटा को कहां प्रोसेस किया जाता है?

जब कोई फ़ॉर्म सबमिट किया जाता है (उदाहरण के लिए, जब उपयोगकर्ता सबमिट करें बटन पर क्लिक करता है), तो ब्राउज़र एक अनुरोध करता है. कोई स्क्रिप्ट उस अनुरोध का जवाब दे सकती है और डेटा को प्रोसेस कर सकती है.

डिफ़ॉल्ट रूप से, अनुरोध उस पेज पर किया जाता है जहां फ़ॉर्म दिखाया जाता है.

मान लें कि आपको फ़ॉर्म का डेटा प्रोसेस करने के लिए, https://web.dev पर कोई स्क्रिप्ट चलानी है. इसके लिए, आपको क्या करना होगा? इसे CodePen पर आज़माएं!

      <form action="https://example.com/animals"></form>

ऊपर दिए गए उदाहरण में, https://example.com/animals से अनुरोध किया गया है. example.com के बैकएंड पर मौजूद स्क्रिप्ट, /animals से मिले अनुरोधों को मैनेज कर सकती है. साथ ही, फ़ॉर्म से मिले डेटा को प्रोसेस कर सकती है.

डेटा कैसे ट्रांसफ़र किया जाता है?

डिफ़ॉल्ट रूप से, फ़ॉर्म का डेटा GET अनुरोध के तौर पर भेजा जाता है. इसमें सबमिट किया गया डेटा, यूआरएल में जोड़ दिया जाता है. अगर कोई उपयोगकर्ता पिछले उदाहरण में 'frog' सबमिट करता है, तो ब्राउज़र इस यूआरएल पर अनुरोध करता है:

https://example.com/animals?animal=frog

इस मामले में, यूआरएल से डेटा हासिल करके, फ़्रंटएंड या बैकएंड पर डेटा ऐक्सेस किया जा सकता है.

अगर आपको फ़ॉर्म को POST अनुरोध का इस्तेमाल करने का निर्देश देना है, तो method एट्रिब्यूट को बदलें.

<form method="post">
...
</form>

POST का इस्तेमाल करके, डेटा को अनुरोध के मुख्य हिस्से में शामिल किया जाता है.

यह डेटा यूआरएल में नहीं दिखेगा. इसे सिर्फ़ फ़्रंटएंड या बैकएंड स्क्रिप्ट से ऐक्सेस किया जा सकता है.

आपको कौनसा तरीका इस्तेमाल करना चाहिए?

इन दोनों तरीकों के इस्तेमाल के उदाहरण मौजूद हैं.

संवेदनशील डेटा को प्रोसेस करने वाले फ़ॉर्म के लिए, POST तरीके का इस्तेमाल करें. अगर एचटीटीपीएस का इस्तेमाल किया जाता है, तो डेटा को एन्क्रिप्ट (सुरक्षित) किया जाता है. साथ ही, इसे सिर्फ़ बैकएंड स्क्रिप्ट ऐक्सेस कर सकती है. यह स्क्रिप्ट, अनुरोध को प्रोसेस करती है. यूआरएल में डेटा नहीं दिखता. इसका एक सामान्य उदाहरण, साइन-इन फ़ॉर्म है.

अगर डेटा शेयर किया जा सकता है, तो GET तरीके का इस्तेमाल करें. इसके बाद, डेटा को आपके ब्राउज़र के इतिहास में जोड़ दिया जाता है, क्योंकि यह यूआरएल में शामिल होता है. खोज के लिए इस्तेमाल किए जाने वाले फ़ॉर्म में अक्सर इसका इस्तेमाल किया जाता है. इससे, खोज नतीजे वाले पेज को बुकमार्क किया जा सकता है.

अब जब आपने फ़ॉर्म एलिमेंट के बारे में जान लिया है, तो अब फ़ॉर्म फ़ील्ड के बारे में जानने का समय है, ताकि आपके फ़ॉर्म इंटरैक्टिव बन सकें.

देखें कि आपको कितना समझ आया

फ़ॉर्म एलिमेंट के बारे में अपनी जानकारी की जांच करना

संसाधन

<form> एलिमेंट.