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

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

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

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

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

<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> एलिमेंट.