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

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

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

आपको हमेशा फ़ॉर्म कंट्रोल को <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 अनुरोध किया जाता है.

फ़ॉर्म का डेटा कैसे ऐक्सेस और प्रोसेस किया जा सकता है? सबमिट किए गए डेटा को GET अनुरोध का इस्तेमाल करके, फ़्रंटएंड पर JavaScript से मैनेज किया जा सकता है. इसके अलावा, 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" का इस्तेमाल करने का सुझाव नहीं दिया जाता.

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

ज़रूरत पड़ने पर, लोगों को फ़ाइलें अपलोड और सबमिट करने की अनुमति देने के लिए, <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 अनुरोध के साथ फ़ाइलें नहीं भेजी जा सकतीं.

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

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

फ़ाइलें सबमिट करने के लिए, enctype की क्या वैल्यू देनी होगी?

multipart/form-data
🎉
multipart/form-files
फिर से कोशिश करें!
form-data
फिर से कोशिश करें!
form-files
फिर से कोशिश करें!

क्या <form> के बिना उपयोगकर्ता का डेटा भेजा जा सकता है

नहीं
फिर से कोशिश करें!
हां, JavaScript की मदद से.
🎉
हां, फ़्लैश के साथ.
फिर से कोशिश करें!
हां, HTML5 के साथ.
फिर से कोशिश करें!

<form> कैसे सबमिट किया जा सकता है?

किसी <button> पर क्लिक करें.
फिर से कोशिश करें!
Enter दबाएं.
फिर से कोशिश करें!
किसी <input type="image"> पर क्लिक करें.
फिर से कोशिश करें!
ऊपर लिखे सभी
🎉

संसाधन