मैं एक बड़े लक्षित क्षेत्र के साथ एक HTML रेडियोधटन कैसे बना सकता हूं?

Question

कुछ इस तरह:

उपयोगकर्ता बटन के किसी भी क्षेत्र पर क्लिक करेंगे कहाँ और यह है कि रेडियो बटन का चयन होगा।

कोई सुझाव?

जहां तक ​​मैं कह सकता हूं, रेडियो बटन स्वयं बंद हो जाते हैं, और अन्य तत्वों के चारों ओर लपेट नहीं सकते हैं।

Answer 1

सबसे अच्छा तरीका भी उसके संबंधित इनपुट ध्यान केंद्रित करने के प्रभाव पड़ता है बस इसके <label> में <input> रैप करने के लिए, एक लेबल क्लिक करने के रूप है आपको लेबल टेक्स्ट को अलग से स्टाइल करने की आवश्यकता है, बस इसे <span> में लपेटें।

Answer 2

आप इसे ऑनक्लिक ईवेंट देकर इस प्रभाव को प्राप्त करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं, या आप कुछ gui-plugins के साथ संयोजन में jQuery का उपयोग कर सकते हैं। मैं क्रॉस-ब्राउज़र संगतता के लिए इस समाधान को प्राथमिकता दूंगा।

<label> 
    <input name="transfer" type="radio">Bank Deposit 
</label> 

नहीं जावास्क्रिप्ट की आवश्यकता:: डेमो: http://jsfiddle.net/GTGan/

तो

Answer 3

क्या आपने LABEL टैग का उपयोग करने का प्रयास किया है? अभिगम्यता के लिए हमें लेबल को टैग्स को हर समय नियंत्रण बनाने के लिए लेबल करने के लिए उपयोग करना चाहिए। न केवल स्क्रीन पाठकों के लिए चीजों को एक साथ जोड़ने में मदद करता है, बल्कि यह लेबल के साथ-साथ नियंत्रण क्लिक करने योग्य बनाता है। radiobuttons चारों ओर बटन बनाने के लिए http://webaim.org/techniques/forms/screen_reader#labels

Answer 4

उपयोग बूटस्ट्रैप,:

आप थोड़ा और अधिक विस्तार पढ़ सकते हैं और यहाँ एक उदाहरण खोजने के

<label class="btn btn-lg btn-default"> 
<input type="radio"> Something 
</label>