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

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

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

ब्राउज़र सहायता

  • 1
  • 12
  • 1
  • 1

सोर्स

आपको हमेशा किसी <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" का इस्तेमाल करने का सुझाव नहीं दिया जाता.

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

अगर ज़रूरी हो, तो <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 की मदद से.
🎉
हां, Flash के साथ.
फिर से कोशिश करें!
हां, HTML5 के साथ.
फिर से कोशिश करें!

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

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

रिसॉर्स