फ़ॉर्म एलिमेंट के बारे में ज़्यादा जानकारी

पिछले मॉड्यूल में, आपने <form> एलिमेंट का इस्तेमाल करने का तरीका सीखा था. इस मॉड्यूल में, आपको यह जानकारी मिलेगी कि फ़ॉर्म कैसे काम करता है और इसका इस्तेमाल कब करना चाहिए.

क्या आपको <form> एलिमेंट का इस्तेमाल करना चाहिए?

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

हालांकि, ज़्यादातर मामलों में उपयोगकर्ताओं का डेटा सेव या प्रोसेस करते समय, आपको <form> एलिमेंट का इस्तेमाल करना चाहिए. इस मॉड्यूल में बताया गया है कि <form> का इस्तेमाल करने से, आपको ब्राउज़र की कई इन-बिल्ट सुविधाएं मिलती हैं. अगर इसका इस्तेमाल नहीं किया जाता, तो आपको ये सुविधाएं खुद बनानी पड़ती हैं. <form> में, सुलभता से जुड़ी कई सुविधाएं डिफ़ॉल्ट रूप से पहले से मौजूद होती हैं. अगर आपको उपयोगकर्ता के फ़ॉर्म सबमिट करने पर पेज को फिर से लोड होने से रोकना है, तो अब भी <form> एलिमेंट का इस्तेमाल किया जा सकता है. हालांकि, इसे JavaScript के साथ इस्तेमाल करें.

<form> कैसे काम करता है?

आपने सीखा कि उपयोगकर्ता के डेटा को मैनेज करने का सबसे अच्छा तरीका <form> है. अब आपके मन में यह सवाल आ सकता है कि फ़ॉर्म कैसे काम करता है?

<form>, इंटरैक्टिव फ़ॉर्म कंट्रोल के लिए एक कंटेनर है.

<form method="post">
  <label for="name">Name</label>
  <input type="text" name="name" id="name">
  <button formaction="/name">Save</button>
</form>

फ़ॉर्म सबमिट करने की सुविधा कैसे काम करती है?

<form> सबमिट करने पर, ब्राउज़र <form> एट्रिब्यूट की जांच करता है. डेटा को method एट्रिब्यूट के हिसाब से, GET या POST अनुरोध के तौर पर भेजा जाता है. अगर कोई method एट्रिब्यूट मौजूद नहीं है, तो मौजूदा पेज के यूआरएल पर GET अनुरोध किया जाता है.

फ़ॉर्म के डेटा को कैसे ऐक्सेस और प्रोसेस किया जा सकता है? सबमिट किए गए डेटा को फ़्रंटएंड पर JavaScript की मदद से हैंडल किया जा सकता है. इसके लिए, GET का अनुरोध करना होगा. इसके अलावा, इसे बैकएंड पर कोड की मदद से भी हैंडल किया जा सकता है. इसके लिए, GET या POST का अनुरोध करना होगा. अनुरोध के टाइप और फ़ॉर्म का डेटा ट्रांसफ़र करने के बारे में ज़्यादा जानें.

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

इसके अलावा, ब्राउज़र <form> एलिमेंट पर अन्य एट्रिब्यूट ढूंढता है. उदाहरण के लिए, यह तय करने के लिए कि फ़ॉर्म की पुष्टि की जानी चाहिए या नहीं (novalidate), ऑटोकंप्लीट का इस्तेमाल किया जाना चाहिए या नहीं (autocomplete="off") या किस एन्कोडिंग का इस्तेमाल किया जाना चाहिए (accept-charset).

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

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

पक्का करें कि उपयोगकर्ता आपका फ़ॉर्म सबमिट कर सकें

फ़ॉर्म सबमिट करने के दो तरीके हैं. किसी भी फ़ॉर्म कंट्रोल का इस्तेमाल करते समय, सबमिट करें बटन पर क्लिक किया जा सकता है या Enter दबाया जा सकता है.

सबमिट करें बटन बनाते समय, हमेशा ऐसी भाषा का इस्तेमाल करें जिससे कार्रवाई की जा सके. उदाहरण के लिए, पेमेंट पर जाएं या बदलाव सेव करें. इससे लोगों को आपके फ़ॉर्म के अगले चरणों के बारे में जानकारी मिलती है.

सबमिट करें बटन को कई तरीकों से जोड़ा जा सकता है. इसके लिए, अपने फ़ॉर्म में <button> एलिमेंट का इस्तेमाल किया जा सकता है. जब तक type="button" का इस्तेमाल नहीं किया जाता, तब तक यह सबमिट करें बटन के तौर पर काम करता है. <input type="submit" value="Submit"> का इस्तेमाल भी किया जा सकता है.

तीसरा विकल्प, ग्राफ़िकल सबमिट करें बटन बनाने के लिए <input type="image" alt="Submit" src="submit.png"> का इस्तेमाल करना है. हालांकि, अब सीएसएस की मदद से ग्राफ़िकल बटन बनाए जा सकते हैं. इसलिए, type="image" का इस्तेमाल करने का सुझाव नहीं दिया जाता.

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

उपयोगकर्ताओं को फ़ाइलें सबमिट करने की अनुमति दें

अगर ज़रूरी हो, तो लोगों को फ़ाइलें अपलोड और सबमिट करने की सुविधा देने के लिए, <input type="file"> का इस्तेमाल करें.

<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>

सबसे पहले, अपने फ़ॉर्म में type="file" के साथ <input> एलिमेंट जोड़ें. अगर उपयोगकर्ताओं को एक से ज़्यादा फ़ाइलें अपलोड करने की अनुमति देनी है, तो multiple एट्रिब्यूट जोड़ें.

यह पक्का करने के लिए कि उपयोगकर्ता फ़ाइलें अपलोड कर सकें, एक और बदलाव करना ज़रूरी है. अपने फ़ॉर्म पर enctype एट्रिब्यूट सेट करें. डिफ़ॉल्ट वैल्यू application/x-www-form-urlencoded है.

<form method="post" enctype="multipart/form-data">
...
</form>

फ़ाइलें सबमिट की जा सकें, इसके लिए इसे multipart/form-data पर सेट करें. इस एन्कोडिंग के बिना, POST अनुरोध के साथ फ़ाइलें नहीं भेजी जा सकतीं.

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

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

संसाधन

• फ़ॉर्म एचटीएमएल एलिमेंट
• 'सबमिट करें' बटन इस्तेमाल करने के सबसे सही तरीके