HTML Academy · पाठ

FormData API

FormData इंटरफ़ेस से प्रोग्राम के माध्यम से फ़ॉर्म डेटा एकत्र करें

पाठ 1, कुल 4 में से13 चरण

FormData API, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

FormData क्या है

FormData एक अंतर्निहित वस्तु है, जो फ़ॉर्म फ़ील्ड और उनके मानों का प्रतिनिधित्व करती है। इसे फ़ेच या एक्सएमएलएचटीटीपीरिक्वेस्ट के माध्यम से सीधे सबमिट किया जा सकता है। यह बिना मैन्युअल क्रमबद्धीकरण के फ़ाइल अपलोड, मल्टीपार्ट एन्कोडिंग और मनमाने कुंजी-मान युग्मों को संभालती है।

फ़ॉर्म से बनाना

कन्स्ट्रक्टर को एक <form> तत्व दीजिए: const data = new FormData(formElement)। परिणाम में प्रत्येक सफल फ़ॉर्म नियंत्रण (नाम वाले इनपुट, चयन सूचियाँ, पाठ क्षेत्र, चुने हुए चेकबॉक्स, फ़ाइलें) शामिल होता है। अक्षम और अनचिह्नित नियंत्रण अपने-आप बाहर रह जाते हैं।

document.forms.checkout.addEventListener("submit", async (e) => {
  e.preventDefault();
  const data = new FormData(e.target);
  await fetch("/api/checkout", { method: "POST", body: data });
});

fetch से सबमिट करना

FormData को फ़ेच के बॉडी के रूप में देने पर अनुरोध का सामग्री-प्रकार अपने-आप multipart/form-data पर सेट हो जाता है (उचित सीमा के साथ)। सामग्री-प्रकार को मैन्युअल रूप से सेट न कीजिए — सीमा फ़ेच को स्वयं बनानी होती है।

append, निर्धारित करना, हटाना

data.append(key, value) एक कुंजी जोड़ता है (डुप्लिकेट की अनुमति के साथ)। data.set(key, value) उस कुंजी के मौजूदा मान को बदल देता है। data.delete(key) किसी कुंजी के सभी मान हटा देता है। data.has(key) मौजूदगी की जाँच करता है।

const data = new FormData();
data.append("tag", "html");
data.append("tag", "css");
console.log(data.getAll("tag")); // ["html", "css"]

फ़ाइल अपलोड

FormData फ़ाइलों को पारदर्शी ढंग से संभालती है: data.append("avatar", fileInput.files[0])। सर्वर को फ़ाइल के नाम और MIME प्रकार के साथ मल्टीपार्ट अपलोड प्राप्त होता है। आधुनिक कोड में फ़ेच के साथ फ़ाइलें अपलोड करने का यह मानक तरीका है।

पुनरावृत्ति

FormData पर पुनरावृत्ति की जा सकती है: for (const [key, value] of data) { ... }। विशिष्ट पुनरावृत्तियों के लिए data.entries(), data.keys(), data.values() का उपयोग कीजिए। यह लॉग दर्ज करने, सत्यापन करने या फ़ॉर्म की जेसन प्रति बनाने में उपयोगी है।

जेसन में बदलना

मल्टीपार्ट के बजाय जेसन के रूप में भेजने के लिए Object.fromEntries(data) एक साधारण वस्तु बनाता है — लेकिन डुप्लिकेट कुंजियाँ खो जाती हैं। डुप्लिकेट को सही ढंग से संभालने के लिए प्रविष्टियों पर पुनरावृत्ति कीजिए और उन्हें स्वयं समूहित कीजिए। केवल जेसन एपीआई के लिए, FormData के माध्यम से जाने के बजाय वस्तु सीधे बनाना अधिक सरल है।

प्रोग्राम द्वारा भरना

एक खाली FormData बनाकर मानों को मैन्युअल रूप से जोड़िए: const data = new FormData(); data.append("title", title); data.append("file", file);। यह तब उपयोगी है, जब भेजा जाने वाला डेटा किसी फ़ॉर्म से न आया हो (खींचकर छोड़ी गई फ़ाइलें, एपीआई प्रतिक्रियाएँ, बनाए गए पेलोड)।

सबमिटकर्ता की पहचान

यदि कई सबमिट बटन हों, तो सबमिटकर्ता को FormData के दूसरे तर्क के रूप में दीजिए: new FormData(form, e.submitter)। सबमिटकर्ता का नाम और मान डेटा में शामिल हो जाते हैं — बहु-क्रिया फ़ॉर्म के लिए यह महत्वपूर्ण है।

URLSearchParams का समकक्ष

एप्लिकेशन/एक्स-डब्ल्यूडब्ल्यूडब्ल्यू-फ़ॉर्म-यूआरएलएन्कोडेड एन्कोडिंग (फ़ाइलों के बिना डिफ़ॉल्ट फ़ॉर्म एन्कोडिंग) के लिए FormData से यूआरएल खोज-पैरामीटर बनाइए: new URLSearchParams(data)। केवल सामान्य पाठ वाले फ़ॉर्म के लिए यह मल्टीपार्ट से कम खर्चीला है।

सामान्य भूल

फ़ेच के सामग्री-प्रकार हेडर को स्पष्ट रूप से "multipart/form-data" पर सेट करने से अपलोड टूट जाता है — ब्राउज़र आवश्यक सीमा नहीं जोड़ पाता। FormData भेजते समय सामग्री-प्रकार को छोड़ दीजिए और इसे फ़ेच पर छोड़ दीजिए।

ज्ञान परीक्षण

फ़ेच के साथ FormData भेजते समय आपको सामग्री-प्रकार को हाथ से सेट क्यों NOT करना चाहिए?

इंटरैक्टिव पाठ में इसका उत्तर दें

सारांश

FormData फ़ॉर्म की सामग्री का प्रतिनिधित्व करती है और फ़ेच के साथ आसानी से सबमिट हो जाती है — इसमें मल्टीपार्ट/फ़ॉर्म-डेटा के माध्यम से फ़ाइल अपलोड भी शामिल हैं। फ़ॉर्म तत्व से बनाइए, प्रविष्टियाँ जोड़िए, निर्धारित कीजिए या हटाइए और आवश्यकतानुसार पुनरावृत्ति कीजिए। भेजते समय सामग्री-प्रकार सेट न कीजिए — फ़ेच सीमा अपने-आप बनाता है। केवल पाठ वाले यूआरएल-एन्कोडेड फ़ॉर्म के लिए URLSearchParams का उपयोग कीजिए।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “FormData API” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “FormData API” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“FormData API” में मैं क्या सीखूँगा?

FormData इंटरफ़ेस से प्रोग्राम के माध्यम से फ़ॉर्म डेटा एकत्र करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“FormData API” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← HTML Academy पर वापस जाएँ