की स्थापना और सत्यापन रेडियो के बटन प्रतीत होता है फार्म का मैदान यह कई वेबमास्टरों को स्थापित करने में सबसे अधिक कठिनाई देता है। वास्तविक रूप में इन क्षेत्रों का सेटअप वैध बनाने के लिए सभी फॉर्म फील्डों में से सबसे सरल है क्योंकि रेडियो बटन एक ऐसा मूल्य निर्धारित करते हैं, जिसे केवल फॉर्म जमा करने के समय परीक्षण करने की आवश्यकता होती है।
रेडियो बटन के साथ कठिनाई यह है कि कम से कम दो और आमतौर पर अधिक फ़ील्ड होते हैं जिन्हें फ़ॉर्म पर रखा जाना चाहिए, एक साथ संबंधित और एक समूह के रूप में परीक्षण किया जाता है। बशर्ते कि आप अपने बटनों के लिए सही नामकरण सम्मेलनों और लेआउट का उपयोग करें, तो आपको कोई परेशानी नहीं होगी।
रेडियो बटन समूह सेट करें
हमारे फॉर्म पर रेडियो बटन का उपयोग करते समय देखने वाली पहली बात यह है कि रेडियो बटन को ठीक से काम करने के लिए बटन को कैसे कोडित किया जाना चाहिए। हम जो वांछित व्यवहार चाहते हैं, वह एक समय में केवल एक बटन का चयन करना है; जब एक बटन का चयन किया जाता है तो किसी भी पहले से चयनित बटन को स्वचालित रूप से हटा दिया जाएगा।
यहां समाधान यह है कि समूह के भीतर सभी रेडियो बटन एक ही नाम पर अलग-अलग मान दिए जाएं। यहाँ पर रेडियो बटन के लिए स्वयं उपयोग किया गया कोड है।
एक रूप के लिए रेडियो बटन के कई समूहों का निर्माण भी सीधा है। आपको केवल दूसरे समूह के लिए उपयोग किए जाने वाले एक अलग नाम के साथ रेडियो बटन का दूसरा समूह प्रदान करना है।
नाम फ़ील्ड यह निर्धारित करता है कि कोई विशेष बटन किस समूह का है। फॉर्म सबमिट होने पर एक विशिष्ट समूह के लिए पास किया जाने वाला मान उस समूह के भीतर बटन का मूल्य होगा जो उस समय सबमिट किया जाता है जब फॉर्म सबमिट किया जाता है।
प्रत्येक बटन का वर्णन करें
फॉर्म को भरने वाले व्यक्ति को यह समझने के लिए कि हमारे समूह में प्रत्येक रेडियो बटन क्या करता है, हमें प्रत्येक बटन के लिए विवरण प्रदान करने की आवश्यकता है। ऐसा करने का सबसे सरल तरीका बटन के तुरंत बाद पाठ के रूप में विवरण प्रदान करना है।
हालाँकि, सादे पाठ के उपयोग से कुछ समस्याएं हैं:
- पाठ नेत्रहीन रूप से रेडियो बटन से जुड़ा हो सकता है, लेकिन उदाहरण के लिए, स्क्रीन रीडर का उपयोग करने वाले कुछ लोगों के लिए यह स्पष्ट नहीं हो सकता है।
- ज्यादातर उपयोगकर्ता इंटरफेस रेडियो बटन का उपयोग करते हुए, बटन से संबंधित पाठ क्लिक करने योग्य है और अपने संबंधित रेडियो बटन का चयन करने में सक्षम है। हमारे मामले में, पाठ तब तक इस तरह से काम नहीं करेगा जब तक कि पाठ विशेष रूप से बटन के साथ जुड़ा नहीं है।
रेडियो बटन के साथ पाठ को जोड़ना
पाठ को उसके संबंधित रेडियो बटन के साथ जोड़ने के लिए, ताकि पाठ पर क्लिक करने से उस बटन का चयन हो, हमें इसकी आवश्यकता है पूरे बटन को घेरकर और उसके भीतर संबंधित पाठ को प्रत्येक बटन के लिए कोड के अलावा जोड़ दें लेबल।
यहाँ एक बटन के लिए पूरा HTML कैसा दिखेगा:
आईडी नाम के साथ रेडियो बटन के रूप में संदर्भित के लिये लेबल टैग का पैरामीटर वास्तव में टैग के भीतर ही समाहित है, के लिये तथा आईडी कुछ ब्राउज़रों में पैरामीटर निरर्थक हैं। हालांकि, उनके ब्राउज़र अक्सर नेस्टिंग को पहचानने के लिए पर्याप्त स्मार्ट नहीं होते हैं, इसलिए यह उन ब्राउज़रों की संख्या को अधिकतम करने के लिए लायक है जिनमें कोड कार्य करेगा।
जो कि रेडियो बटन की कोडिंग को स्वयं पूरा करता है। अंतिम चरण रेडियो बटन सत्यापन का उपयोग करना है जावास्क्रिप्ट.
सेटअप रेडियो बटन सत्यापन
रेडियो बटन के समूहों का सत्यापन स्पष्ट नहीं हो सकता है, लेकिन एक बार जब आप जानते हैं कि यह सीधा है।
निम्न फ़ंक्शन यह पुष्टि करेगा कि एक समूह में रेडियो बटन में से एक का चयन किया गया है:
// रेडियो बटन सत्यापन
// कॉपीराइट स्टीफन चैपमैन, 15 नवंबर 2004,14 सितंबर 2005
// आप इस फ़ंक्शन की प्रतिलिपि बना सकते हैं, लेकिन कृपया इसके साथ कॉपीराइट नोटिस रखें
फ़ंक्शन वैल्बटन (btn) {
var cnt = -1;
के लिए (var i = btn.length-1; मैं> -1; मैं--) {
if (btn [i] .checked) {cnt = i; मैं = -1;}
}
if (cnt> -1) वापसी btn [cnt] .value;
और वापसी;
}
उपरोक्त फ़ंक्शन का उपयोग करने के लिए, इसे अपने फ़ॉर्म सत्यापन रूटीन के भीतर से कॉल करें और इसे रेडियो बटन समूह नाम दें। यह चयनित समूह के भीतर बटन का मान लौटाएगा, या यदि समूह में कोई भी बटन चयनित नहीं है, तो शून्य मान लौटाएगा।
उदाहरण के लिए, यहां वह कोड है जो रेडियो बटन सत्यापन करेगा:
var btn = valButton (form.group1);
if (btn == null) अलर्ट ('कोई रेडियो बटन चयनित नहीं');
और सतर्क ('बटन मान' + btn + 'चयनित');
इस कोड को a द्वारा बुलाए गए फ़ंक्शन में शामिल किया गया था क्लिक पर फॉर्म पर मान्य (या सबमिट) बटन से जुड़ी घटना।
पूरे फॉर्म का एक संदर्भ फ़ंक्शन में एक पैरामीटर के रूप में पारित किया गया था, जो पूर्ण फॉर्म को संदर्भित करने के लिए "फ़ॉर्म" तर्क का उपयोग करता है। इसलिए, हम Group1 नाम के साथ रेडियो बटन समूह को मान्य करने के लिए, valButton फ़ंक्शन के लिए form.group1 पास करें।
सभी रेडियो बटन समूह जिनकी आपको कभी आवश्यकता होगी, ऊपर दिए गए चरणों का उपयोग करके नियंत्रित किया जा सकता है।