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

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

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

एचटीएमएल की मदद से यह काम कैसे किया जा सकता है?

एचटीएमएल में, इसे फ़ॉर्म एलिमेंट (<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 पर स्क्रिप्ट चलाना है फ़ॉर्म डेटा को प्रोसेस करने के लिए क्या करना चाहिए? इसे आज़माएं!

जवाब को टॉगल करें

action एट्रिब्यूट का इस्तेमाल करके, स्क्रिप्ट की जगह चुनी जा सकती है.

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

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

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

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

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

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

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

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

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

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

आपको कौनसा तरीका अपनाना चाहिए?

दोनों तरीकों के लिए इस्तेमाल के उदाहरण यहां दिए गए हैं.

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

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

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

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

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

फ़ॉर्म एलिमेंट का शुरुआती टैग कैसा दिखता है?

</form>
करीब-करीब, यह <form> एलिमेंट का आखिरी टैग है.
<form-container>
फिर से कोशिश करें!
<form>
🎉
<form-element>
फिर से कोशिश करें!

<form> कहां प्रोसेस किया जाता है, यह बताने के लिए किस एट्रिब्यूट का इस्तेमाल किया जा सकता है?

where
फिर से कोशिश करें!
action
हां, action एट्रिब्यूट से पता चलता है कि <form> को कहां प्रोसेस किया जाता है.
href
फिर से कोशिश करें!
url
फिर से कोशिश करें!

अनुरोध करने का डिफ़ॉल्ट तरीका क्या है?

GET
🎉
POST
फिर से कोशिश करें!

संसाधन

<form> एलिमेंट.