ब्राउज़र लगातार नई HTML, JavaScript और CSS सुविधाएँ जोड़ रहे हैं। यहां उन फ़ॉर्म के साथ काम करने के लिए कुछ उपयोगी जोड़ दिए गए हैं जिन्हें आपने शायद याद किया हो…
requestSubmit()
सफारी 16 के लिए समर्थन जोड़ने वाला अंतिम ब्राउज़र होगा requestSubmit.
इससे पहले कि हम देखें कि कैसे .requestSubmit() काम करता है, आइए खुद को याद दिलाएं कि जावास्क्रिप्ट के साथ एक फॉर्म को प्रोग्रामेटिक रूप से सबमिट करते समय कैसे काम करता है .submit() तरीका। के साथ एक फॉर्म जमा करना submit() सबमिट ईवेंट ट्रिगर नहीं करता है। तो निम्नलिखित कोड में, फॉर्म जमा किया जाता है, preventDefault() कोई प्रभाव नहीं पड़ता है, और कंसोल में कुछ भी लॉग नहीं होता है:
const form = document.forms[0];
form.addEventListener('submit', function(event) {
// code to submit the form goes here
event.preventDefault();
console.log('form submitted!');
});
document.querySelector('.btn').addEventListener('click', function() {
form.submit();
}).submit() किसी भी HTML फॉर्म सत्यापन को भी अनदेखा कर देगा। निम्नलिखित मार्कअप को देखते हुए, इनपुट के खाली होने पर भी फॉर्म जमा किया जाएगा, भले ही इनपुट में a required विशेषता:
<form>
<label for="name">Name</label>
<input required name="name" id="name" type="text">
</form>.requestSubmit() जावास्क्रिप्ट का उपयोग करके फॉर्म जमा करने का एक वैकल्पिक तरीका है, लेकिन इसके विपरीत .submit(), HTML फॉर्म सत्यापन फॉर्म को जमा होने से रोकेगा। यदि फॉर्म में दर्ज किया गया सभी डेटा सत्यापन पास कर लेता है, तो submit ईवेंट निकाल दिया जाएगा, जिसका अर्थ है "फ़ॉर्म सबमिट किया गया!" निम्नलिखित उदाहरण में कंसोल में लॉग किया जाएगा:
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('form submitted!');
});
document.querySelector('.btn').addEventListener('click', function() {
form.requestSubmit();
})आप फ़ॉर्म के सबमिट बटन पर प्रोग्रामेटिक रूप से क्लिक करके इसे पहले ही प्राप्त कर सकते हैं, लेकिन requestSubmit शायद एक और अधिक सुरुचिपूर्ण समाधान है।
submitter घटना जमा करने की संपत्ति
RSI SubmitEvent.submitter संपत्ति अर्जित पूर्ण क्रॉस-ब्राउज़र समर्थन सफारी 15.4 की रिलीज के साथ। यह केवल-पढ़ने के लिए गुण निर्दिष्ट करता है <button> or <input type="submit"> तत्व जो एक फॉर्म जमा करने का कारण बनता है।
<form>
<button name="foo" value="bar" type="submit">Bar</button>
<button name="foo" value="baz" type="submit">Baz</button>
</form>जब आपके पास एकाधिक सबमिट बटन या इनपुट होते हैं, प्रत्येक का एक अलग मान होता है, तो केवल उस बटन या इनपुट का मान जिसे फ़ॉर्म सबमिट करने के लिए क्लिक किया गया था, दोनों मानों के बजाय सर्वर पर भेजा जाएगा। यह कोई नई बात नहीं है। नया क्या है कि सबमिट ईवेंट के लिए ईवेंट श्रोता के पास अब तक पहुंच है event.submitter संपत्ति। आप इसका उपयोग बटन या इनपुट में एक वर्ग जोड़ने के लिए कर सकते हैं, जो फ़ॉर्म सबमिशन को ट्रिगर करता है, उदाहरण के लिए, या इसे प्राप्त करने के लिए value या इसकी कोई अन्य HTML विशेषताएँ।
document.forms[0].addEventListener('submit', function(event) {
event.preventDefault();
console.log(event.submitter.value);
console.log(event.submitter.formaction);
event.submitter.classList.add('spinner-animation');
})formdata घटना
यह विशेष रूप से नया नहीं है, लेकिन केवल क्रॉस-ब्राउज़र समर्थन हासिल किया सफारी 15 के रिलीज के साथ। के लिए मुख्य उपयोग मामला formdata ईवेंट कस्टम तत्वों को फ़ॉर्म सबमिशन में भाग लेने में सक्षम बना रहा है। वेब घटकों के बाहर, हालांकि, यह अभी भी उपयोगी हो सकता है।
आप a . जोड़ें formdata ईवेंट श्रोता उस फ़ॉर्म पर जिसके साथ आप इंटरैक्ट करना चाहते हैं:
document.querySelector('form').addEventListener('formdata', handleFormdata);घटना को नियमित HTML फॉर्म जमा करने और एक घटना के द्वारा भी निकाल दिया जाता है new FormData(). event.formData प्रस्तुत किए जा रहे सभी डेटा को रखता है।
function handleFormdata(event) {
for (const entry of event.formData.values()) {
console.log(entry);
}
}के लिए कॉलबैक फ़ंक्शन formdata ईवेंट श्रोता सर्वर पर डेटा भेजे जाने से पहले चलता है, जिससे आपको भेजे जा रहे डेटा को जोड़ने या संशोधित करने का मौका मिलता है।
function handleFormdata(event) {
event.formData.append('name', 'John');
}आप संशोधित या जोड़ सकते थे FormData सबमिट इवेंट हैंडलर के अंदर लेकिन formdata आपको तर्क को अलग करने की अनुमति देता है। यह उन मामलों में आपके फ़ॉर्म के मार्कअप में छिपे हुए इनपुट का उपयोग करने का एक विकल्प भी है जहां आप "पुराने तरीके से" फ़ॉर्म सबमिट कर रहे हैं - यानी फ़ॉर्म को सबमिट करने के बजाय HTML की अंतर्निहित कार्यक्षमता पर निर्भर है। fetch.
showPicker() इनपुट तत्वों के लिए
showPicker() कर दिया गया है समर्थित चूंकि क्रोम 99, फ़ायरफ़ॉक्स 101, और आगामी सफारी 16 में। इनपुट तत्व के लिए जिसका प्रकार विशेषता दिनांक, महीना, सप्ताह, समय है, datetime-local, रंग, या फ़ाइल, showPicker() चयन UI प्रदर्शित करने के लिए प्रोग्रामेटिक तरीका प्रदान करता है। रंग और फ़ाइल इनपुट के लिए, कॉल करके पिकर को प्रोग्रामेटिक रूप से दिखाना हमेशा संभव होता है .click इनपुट पर:
document.querySelector('input[type="color"]').click();वह दृष्टिकोण दिनांक इनपुट पर काम नहीं करता है, यही वजह है कि यह नया एपीआई जोड़ा गया था। .showPicker() रंग और फ़ाइल इनपुट के साथ भी काम करेगा लेकिन इसका उपयोग करने का कोई वास्तविक लाभ नहीं है .click().
निष्क्रिय विशेषता
एक से अधिक इनपुट को एक साथ HTML में लपेटकर अक्षम करना हमेशा संभव रहा है fieldset और अक्षम कर रहा है fieldset:
Inert एक नई HTML विशेषता है। यह न केवल रूपों के लिए है, बल्कि फॉर्म निश्चित रूप से एक महत्वपूर्ण उपयोग-मामला है। से भिन्न disabled विशेषता, inert ए पर लागू किया जा सकता है form तत्व ही। फॉर्म के भीतर सब कुछ गैर-फोकस करने योग्य और गैर-क्लिक करने योग्य होगा। जब सहायक तकनीकों की बात आती है, inert सेटिंग के समान है aria-hidden="true"। से भिन्न disabled विशेषता, inert डिफ़ॉल्ट रूप से कोई स्टाइल लागू नहीं होता है, लेकिन अपना खुद का जोड़ना आसान है:
form[inert] {
opacity: .2;
}अभी और भी बहुत कुछ आना बाकी है...
बड़ा वाला स्टाइल है <select> तत्व, कुछ डेवलपर्स दशकों से चाहते हैं। यह की शुरूआत के साथ जल्द ही एक वास्तविकता बनने के लिए तैयार है selectmenu.
लेकिन अभी के लिए इतना ही! हाल के अपडेट उन सुविधाओं को बनाने के लिए पूर्ण ब्राउज़र समर्थन लाते हैं जिनकी हम प्रतीक्षा कर रहे हैं, उन्हें उत्पादन के उपयोग के लिए प्रमुख बनाते हैं।
