HTML इनपुट के form गुण
पहले required, placeholder और सीमाएँ फ़ील्ड व्यवहार सुधारती थीं। इनपुट form गुण पूछते हैं: कौन-सा फॉर्म मालिक है, और क्या एक बटन action अस्थायी बदल सकता है? मुख्य गुण form="id" फॉर्म के बाहर। सबमिट पर form* केवल उसी क्लिक का गंतव्य बदलते हैं।
फॉर्म जुड़ाव क्यों मायने रखता है
ज़्यादातर फ़ील्ड फॉर्म के अंदर होते हैं। कभी लेआउट नियंत्रण बाहर रखता है। बिना जुड़ाव payload में नहीं आता। form फॉर्म की id से जोड़ता है। नेस्टिंग स्पष्ट डिफ़ॉल्ट है; जुड़ाव कठिन लेआउट के लिए है।
सीधा उत्तर
1) form पर id। 2) बाहर form="वही-id"। 3) name और label अभी भी ज़रूरी। 4) सबमिट बटन पर वैकल्पिक formaction, formmethod, formenctype, formnovalidate, formtarget केवल उसी क्लिक। 5) स्वामित्व और रूटिंग — पिछले मूल्य नियम नहीं।
📊 Form association and submit overrides
| Attribute | Where | Beginner tip |
|---|---|---|
| form | input (or other control) | Value must match the form’s id exactly |
| formaction | submit button | Overrides form action for that click only |
| formmethod | submit button | Overrides method (get/post) for that click |
| formenctype | submit button | Overrides enctype when uploading via that button |
| formtarget | submit button | Overrides where the response opens (_blank, etc.) |
चेकआउट: फॉर्म के बाहर फ़ील्ड
छोटा चेकआउट ईमेल और मात्रा अंदर रखता है। प्रोमो बाद में — label और name के साथ — form="checkout" से जुड़ता है।
<form id="checkout" action="/checkout" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<label for="qty">Qty</label>
<input id="qty" name="qty" type="number" min="1" value="1">
<button type="submit">Pay</button>
</form>
<p>Promo field rendered later in the layout:</p>
<label for="promo">Promo code</label>
<input id="promo" name="promo" type="text" form="checkout"
placeholder="SAVE10">
चेकआउट डेमो पढ़ें
- id=checkout हुक है
- form=checkout प्रोमो को सबमिट से जोड़ता है
- name=promo अभी भी कुंजी है
- अंदर ईमेल/qty को form= नहीं चाहिए
- हर दृश्य नियंत्रण पर label
- required/min हो सकते हैं; फोकस जुड़ाव है
दो बटन: action ओवरराइड
कभी एक फॉर्म, दो गंतव्य — ड्राफ्ट और प्रकाशित। एक form; हर बटन पर अलग formaction। केवल उसी क्लिक।
<form id="article" action="/articles/publish" method="post">
<label for="title">Title</label>
<input id="title" name="title" type="text" required>
<label for="body">Body</label>
<input id="body" name="body" type="text">
<button type="submit">Publish</button>
<button type="submit" formaction="/articles/draft"
formmethod="post">Save draft</button>
</form>
दो-बटन डेमो पढ़ें
- डिफ़ॉल्ट पथ form action
- ड्राफ्ट formaction से दूसरी URL
- formmethod=post इरादा रखता है
- दोनों समान नामित फ़ील्ड भेजते हैं
- form= स्वामित्व; formaction बटन रूटिंग
- अगला: बहुपंक्ति textarea
जुड़ाव बनाम ओवरराइड चुनें
- पेड़ के बाहर फ़ील्ड: form="form-id"
- समान फ़ील्ड, अलग URL: formaction
- एक क्लिक अलग method: formmethod
- अपलोड enctype: formenctype
- जाँच छोड़ना (दुर्लभ): formnovalidate
- प्रतिक्रिया कहीं और: formtarget
- लेआउट अनुमति दे तो नेस्ट करें
- required/placeholder से न उलझाएँ
अभ्यास — स्वामित्व और ओवरराइड
- चेकआउट; प्रोमो से form= हटाएँ फिर लौटाएँ
- id गलत लिखें — जुड़ाव टूटेगा
- दूसरा बाहर notes फ़ील्ड form=checkout से
- ड्राफ्ट formaction बदलें
- अस्थायी formmethod=get
- वाक्य: form= मालिक चुनता है; formaction केवल वही बटन
- प्रोमो अंदर नेस्ट करें और form= हटाएँ
आसान गलतियाँ
- id और form= में टाइपो
- बिना name के form=
- अनावश्यक अलग फ़ील्ड
- पिछले सहायकों से उलझन
- form= और formaction मिलाना
- हर नियंत्रण को form= चाहिए — गलत
- फ़ील्ड ठीक करने के बजाय formnovalidate
सार
- form="id" बाहरी नियंत्रण जोड़ता है
- मेल खाती id; name और label मायने रखते हैं
- बटन formaction/formmethod/form* से ओवरराइड
- जब हो नेस्ट; लेआउट बाध्य करे तो associate
- स्वामित्व/रूट ≠ पिछले फ़ील्ड नियम
- अगला: textarea
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी