HTML Input Form Attributes
In this page:
<input type="submit" form="formid" formaction="url" formmethod="post" formtarget="_blank">form Attribute
डिफ़ॉल्ट रूप से, input फील्ड्स को अपना डेटा सबमिट करने के लिए एक form कंटेनर के अंदर रखा जाना चाहिए। form attribute आपको input फील्ड्स को अपने पेज पर कहीं भी (यहाँ तक कि form टैग के बाहर भी) रखने देता है और उन्हें उसकी unique ID का उपयोग करके किसी specific फॉर्म से लिंक करने देता है।
- form टैग की nesting से बंधे बिना जटिल, रचनात्मक लेआउट बनाने के लिए form attribute का उपयोग करें।
- Accepted values:
- form — the id of a form element in the same document
- Lets a control outside the form belong to it
- Valid on input, button, select, textarea, fieldset, output, object
उदाहरण: The form Attribute
<form id="myForm" action="/submit"></form>
<input type="text" name="username" form="myForm">formaction से Endpoints Override करना
formaction attribute submit बटन पर उपयोग किया जाता है ताकि पैरेंट form टैग के डिफ़ॉल्ट action URL को ओवरराइड किया जा सके। इससे आप अलग-अलग बटन बना सकते हैं जो बिल्कुल एक जैसा फॉर्म डेटा अलग-अलग server endpoints पर भेजते हैं।
- एक ही फॉर्म पर अलग 'Save Draft' और 'Publish Live' बटन बनाने के लिए formaction attribute का उपयोग करें।
- Accepted values:
- formaction — any valid URL
- Valid on input type=submit|image and button
- Overrides the form action
उदाहरण: Overriding Endpoints with formaction
<form action="/save">
<button type="submit" formaction="/save-draft">Save Draft</button>
<button type="submit" formaction="/publish">Publish</button>
</form>formenctype से Data Formats बदलना
formenctype attribute submit बटन पर उपयोग किया जाता है ताकि पैरेंट form टैग के डिफ़ॉल्ट encoding type को ओवरराइड किया जा सके।
यह तब बेहद उपयोगी होता है जब आप चाहते हैं कि एक specific बटन फाइलें अपलोड करे (जिसके लिए multipart/form-data चाहिए होता है) जबकि बाकी फील्ड्स स्टैण्डर्ड टेक्स्ट ही बने रहें।
- एक ही फॉर्म पर text फील्ड्स और file uploads दोनों को डायनामिक रूप से संभालने के लिए formenctype attribute का उपयोग करें।
- Accepted values:
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
उदाहरण: Changing Data Formats with formenctype
<form action="/submit">
<input type="file" name="file">
<button type="submit" formenctype="multipart/form-data">Upload</button>
</form>formmethod से Request Methods बदलना
formmethod attribute submit बटन पर उपयोग किया जाता है ताकि पैरेंट form टैग के डिफ़ॉल्ट HTTP request method (GET या POST) को ओवरराइड किया जा सके, जिससे आप अपना डेटा किस तरह ट्रांसमिट होता है इसे तुरंत बदल सकते हैं।
- public GET requests और secure POST requests के बीच जल्दी टॉगल करने के लिए formmethod का उपयोग करें।
- Accepted values:
- get
- post
- dialog
उदाहरण: Changing Request Methods with formmethod
<form action="/submit" method="get">
<button type="submit" formmethod="post">Submit Securely</button>
</form>formnovalidate से Form Validation को बायपास करना
डिफ़ॉल्ट रूप से, ब्राउज़र सबमिट करने से पहले फॉर्म फील्ड्स पर बेसिक validation checks करते हैं।
formnovalidate attribute submit बटन पर उपयोग किया जाता है ताकि इन native चेक्स को बायपास किया जा सके, जिससे आप required फील्ड्स खाली होने पर भी drafts सेव कर सकते हैं या एक्शन कैंसल कर सकते हैं।
- 'Save Draft' बटन पर formnovalidate attribute का उपयोग करें ताकि यूज़र सभी required फील्ड्स भरे बिना भी अपनी प्रगति सेव कर सकें।
- Accepted values:
- formnovalidate — boolean attribute
- Valid on input type=submit|image and button
- Skips validation only for that button
उदाहरण: Bypassing Form Validation with formnovalidate
<form action="/submit">
<input type="email" required>
<button type="submit" formnovalidate>Save Draft</button>
</form>Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: