पिछले मॉड्यूल में, आपने <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>
एट्रिब्यूट की जांच करता है. डेटा को GET
के तौर पर भेजा जाता है
या method
एट्रिब्यूट के हिसाब से 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"
का इस्तेमाल करने का सुझाव नहीं दिया जाता है.
उपयोगकर्ताओं को फ़ाइलें सबमिट करने की अनुमति दें
अगर ज़रूरी हो, तो लोगों को फ़ाइलें अपलोड और सबमिट करने की सुविधा देने के लिए, <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
form-files
form-data
multipart/form-files
क्या <form>
के बिना, उपयोगकर्ता का डेटा भेजा जा सकता है
<form>
कैसे सबमिट किया जा सकता है?
Enter
दबाएं.<button>
पर क्लिक करें.<input type="image">
पर क्लिक करें.