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

पिछले मॉड्यूल में, आपने <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 का अनुरोध करके नहीं भेजा जा सकता.

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

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

संसाधन

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