आप जो याद कर रहे हैं वह सिमेंटिक मार्कअप , और DOM की समझ है ।
वास्तविक रूप से, आप HTML5 मार्कअप के साथ जो चाहें कर सकते हैं, और बहुत सारे ब्राउज़र इसे पार्स करेंगे। पिछली बार मैंने जाँच की, वेबकिट / Blink भी अनुमति देता है अंदर छद्म तत्वों <input>तत्वों , जो कल्पना का स्पष्ट उल्लंघन है - छिपकली इतना नहीं। हालाँकि, आपको अपने मार्कअप के साथ जो कुछ भी करना है वह निस्संदेह इसे अमान्य कर देगा जहां तक शब्दार्थ का संबंध है।
हम <input>तत्वों को अंदर क्यों डालते <form>हैं? उसी कारण से हम <li>टैग को अंदर रखते हैं <ul>और <ol>तत्व - यह वह जगह है जहाँ वे हैं। यह शब्दार्थ है सही है, और मार्कअप को परिभाषित करने में मदद करता है। पार्सर्स, स्क्रीन रीडर, और विभिन्न सॉफ्टवेयर आपके मार्कअप को तब बेहतर ढंग से समझ सकते हैं जब यह शब्दार्थ सही हो - जब मार्कअप का अर्थ होता है, न कि केवल संरचना।
<form>तत्व भी आप को परिभाषित करने की अनुमति देता है methodऔर actionजिम्मेदार बताते हैं, जो ब्राउज़र क्या जब फ़ॉर्म सबमिट किया जाता करने के लिए बताओ। AJAX एक 100% कवरेज उपकरण नहीं है, और एक वेब डेवलपर के रूप में आपको सुशोभित गिरावट का अभ्यास करना चाहिए - प्रपत्र सबमिट किए जाने में सक्षम होना चाहिए, और जेएस के बंद होने पर भी डेटा स्थानांतरित किया जाना चाहिए।
अंत में, सभी डोम में ठीक से पंजीकृत हैं। हम जावास्क्रिप्ट के साथ इस पर एक नज़र डाल सकते हैं। यदि आप इस पृष्ठ पर अपना कंसोल खोलते हैं, और टाइप करें:
document.forms
आपको पृष्ठ पर सभी रूपों का एक अच्छा संग्रह मिलेगा। सर्चबार, टिप्पणी बॉक्स, उत्तर बॉक्स - सभी उचित रूप। यह इंटरफ़ेस जानकारी तक पहुंचने और इन तत्वों के साथ बातचीत करने के लिए उपयोगी हो सकता है। उदाहरण के लिए, रूपों को बहुत आसानी से क्रमबद्ध किया जा सकता है ।
यहाँ कुछ पढ़ने की सामग्री है:
नोट: <input>तत्वों का उपयोग प्रपत्रों के बाहर किया जा सकता है, लेकिन यदि आपका इरादा किसी भी तरह से डेटा जमा करने का है, तो आपको फ़ॉर्म का उपयोग करना चाहिए।
यह उस उत्तर का हिस्सा है जहां मैं प्रश्न को चारों ओर घुमाता हूं।
मैं रूपों से बचकर अपने जीवन को कठिन कैसे बना रहा हूं?
सबसे पहले और सबसे महत्वपूर्ण - कंटेनर तत्व। कौन जरूरत है उन्हें, सही ?!
निश्चित रूप से आपके छोटे <input>और <button>तत्वों को किसी प्रकार के कंटेनर तत्व के अंदर घोंसला किया जाता है? वे अभी बाकी चीजों के बीच में नहीं घूम सकते। तो अगर नहीं <form>, तो क्या? ए <div>? ए <span>?
इन तत्वों को कहीं न कहीं निवास करना पड़ता है, और जब तक आपका मार्कअप एक पागल गड़बड़ है तब तक कंटेनर तत्व बस एक रूप हो सकता है।
नहीं? ओह।
इस बिंदु पर मेरे सिर में आवाज़ें बहुत उत्सुक हैं कि आप इन सभी अलग-अलग AJAX स्थितियों के लिए अपने ईवेंट हैंडलर कैसे बनाते हैं। बहुत कुछ होना चाहिए, अगर आपको बाइट्स बचाने के लिए अपने मार्कअप में कटौती करने की आवश्यकता है। फिर आपको प्रत्येक AJAX घटना के लिए कस्टम फ़ंक्शंस बनाने होंगे जो तत्वों के प्रत्येक 'सेट' से मेल खाती है - जिसे आपको व्यक्तिगत रूप से या कक्षाओं के साथ लक्षित करना होगा, है ना? वास्तव में इन तत्वों को उदारतापूर्वक समूहित करने का कोई तरीका नहीं है, क्योंकि हमने स्थापित किया है कि वे मार्कअप के चारों ओर घूमते हैं, जो भी तब तक करते हैं जब तक कि उन्हें ज़रूरत न हो।
तो आप कुछ हैंडलर कस्टम कोड करते हैं।
$('#searchButton').on('click', function (e) {
e.preventDefault();
var search = $('#mySearch');
$.ajax({
url: 'http://example.com/text',
type: 'GET',
dataType: 'text',
data: 'query=' + search.val(),
success: function (data) {
console.log(data);
}
});
});
$('#login').on('click', function (e) {
e.preventDefault();
var user = $('#username'),
pass = $('#password'),
rem = $('#remember');
$.ajax({
url: 'http://example.com/login',
type: 'POST',
data: user.add(pass, rem).serialize(),
dataType: 'text',
success: function (data) {
console.log(data);
}
});
});
<!-- No containers, extra markup is silly. -->
<input type="text" id="mySearch" value="query" />
<button id="searchButton">Search</button>
<input type="text" id="username" name="username" value="user" />
<input type="password" id="password" name="password" value="pass" />
<input type="checkbox" id="remember" name="remember" checked /> stay logged in
<button id="login">Login</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
यह वह भाग है जहाँ आप कुछ कहते हैं:
हालांकि मैं पूरी तरह से पुन: प्रयोज्य कार्यों का उपयोग करता हूं। अतिरंजना बंद करो। '
उचित पर्याप्त है, लेकिन आपको अभी भी अद्वितीय तत्वों, या लक्ष्य वर्ग सेटों के इन सेटों को बनाने की आवश्यकता है, है ना? आपको अभी भी इन तत्वों को किसी तरह समूह बनाना है ।
मुझे अपनी आंखें (या कान, अगर आप एक स्क्रीन रीडर का उपयोग कर रहे हैं और कुछ सहायता की आवश्यकता है - मुझे उधार दें - अच्छी बात है कि हम इस सभी शब्दार्थ मार्कअप में कुछ ARIA जोड़ सकते हैं , ठीक है?), और सामान्य रूप की शक्ति को निहारना।
function genericAjaxForm (e) {
e.preventDefault();
var form = $(this);
return $.ajax({
url: form.attr('action'),
type: form.attr('method'),
dataType: form.data('type'),
data: form.serialize()
});
}
$('#login-form').on('submit', function (e) {
genericAjaxForm.call(this, e).done(function (data) {
console.log(data);
});
});
<form action="http://example.com/login" method="POST" data-type="text" id="login-form">
<input type="text" name="username" value="user" />
<input type="password" name="password" value="mypass" />
<label>
<input type="checkbox" name="remember" /> Remember me
</label>
<button type="submit">Login</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
हम किसी भी सामान्य रूप के साथ इसका उपयोग कर सकते हैं, हमारे सुंदर गिरावट को बनाए रख सकते हैं, और फॉर्म को पूरी तरह से वर्णन करते हैं कि यह कैसे कार्य करना चाहिए। हम एक सामान्य शैली रखते हुए इस बेस कार्यक्षमता पर विस्तार कर सकते हैं - अधिक मॉड्यूलर, कम सिरदर्द। जावास्क्रिप्ट केवल अपनी चीजों के बारे में चिंता करता है, जैसे कि उपयुक्त तत्वों को छिपाना, या हमें मिलने वाली किसी भी प्रतिक्रिया को संभालना।
और अब आप कहते हैं:
'लेकिन मैं अपने छद्म रूपों को उन <div>तत्वों में लपेटता हूं जिनमें विशिष्ट आईडी हैं - मैं तब के साथ .findऔर .serializeउनके साथ शिथिलता से इनपुट को लक्षित कर सकता हूं, और ...'
ओह, वह क्या है? आप वास्तव में अपने <input>तत्वों को एक कंटेनर में लपेटते हैं ?
तो यह अभी तक एक रूप क्यों नहीं है?