2011-10-22 22 views
68

मैं PHP का उपयोग कर एक प्रश्नोत्तरी वेब एप्लिकेशन बना रहा हूं। प्रत्येक प्रश्न में अलग <label> शामिल है और उपयोगकर्ता को अपना उत्तर चुनने के लिए radio buttons का उपयोग करके 4 संभावित विकल्प हैं। एक भी प्रश्न के लिए वर्तमान HTML लगता है:इसी रेडियो बटन का चयन करने के लिए टेक्स्ट पर क्लिक करना

<label for="349">What is my middle name?</label> 
<br> 
<input id="349" type="radio" value="1" name="349">Abe 
<br> 
<input id="349" type="radio" value="2" name="349">Andrew 
<br> 
<input id="349" type="radio" value="3" name="349">Andre 
<br> 
<input id="349" type="radio" value="4" name="349">Anderson 
<br> 

मैं करने के लिए उपयोगकर्ता चाहते हैं रेडियो बटन के साथ जुड़े पाठ पर क्लिक कर सकते हैं। अभी, उपयोगकर्ता केवल रेडियो बटन पर ही क्लिक कर सकता है - जो मुझे काफी बोझिल काम लगता है।

मैंनेपढ़ा और टैग मिलान के for और id विशेषताओं को बनाने की दिशा में सुझाव बिंदु। मैंने यह किया है और यह अभी भी काम नहीं करता है।

मेरा प्रश्न है: मैं <input type="radio"> ऑब्जेक्ट के टेक्स्ट पर क्लिक करने में सक्षम होना चाहता हूं, क्योंकि केवल रेडियो बटन का चयन करने में सक्षम होने के विरोध में। मुझे पता है कि मैंने पहले इस बारे में पढ़ा है लेकिन मेरी समस्या का कोई समाधान नहीं दिख रहा है। किसी भी मदद या सुझावों की बहुत सराहना की जाती है!

उत्तर

136

अपने कोड में, आपके पास फॉर्म पर एक लेबल है। जैसा कि नीचे दिखाया गया है, आप प्रत्येक व्यक्तिगत रेडियो समूह पर लेबल रखना चाहते हैं।

<form> 
 
    <p>What is my middle name?</p> 
 
    <br> 
 
    <input id="349" type="radio" value="1" name="question1"> 
 
    <label for="349">Abe</label> 
 
    <br> 
 
    <input id="350" type="radio" value="2" name="question1"> 
 
    <label for="350">Andrew</label> 
 
    <br> 
 
    <input id="351" type="radio" value="3" name="question1"> 
 
    <label for="351">Andre</label> 
 
    <br> 
 
    <input id="352" type="radio" value="4" name="question1"> 
 
    <label for="352">Anderson</label> 
 
    <br> 
 
</form>

आप मन में है कि दो तत्व एक ही आईडी कभी नहीं होना चाहिए रखना चाहिए। name विशेषता का उपयोग किया जाता है ताकि रेडियो बटन समूह के रूप में कार्य कर सकें और केवल एक ही चयन को एक समय में अनुमति दें।

+6

। इसे प्यार करें जब टैग की लगभग छिपी हुई विशेषता को फिर से खोजा जाता है – foochow

0

लेबल टैग प्रत्येक उत्तर के आसपास होना चाहिए, उदा। एबे, एंड्रयू, आदि के आसपास ... और यह उनमें से प्रत्येक के लिए अद्वितीय होना चाहिए।

27

नाथन के उत्तर के अनुसार किए गए रेडियो बटन और लेबल के बीच एक छोटी सी अनजान जगह प्रतीत होती है। यहाँ (this article देखें) उन्हें कैसे मूल में शामिल होने बनाने के लिए है:

<form> 
    <p>What is my middle name?</p> 
    <br> 
    <label><input id="349" type="radio" value="1" name="question1">Abe</label> 
    <br> 
    <label><input id="350" type="radio" value="2" name="question1">Andrew</label> 
    <br> 
    <label><input id="351" type="radio" value="3" name="question1">Andre</label> 
    <br> 
    <label><input id="352" type="radio" value="4" name="question1">Anderson</label> 
    <br> 
</form> 
+1

मैं यह उत्तर पसंद करता हूं। लेकिन क्या आप वाकई इस दृष्टिकोण के साथ "के लिए" विशेषताओं की आवश्यकता है? – Piddu

+0

@Piddu: मुझे लगता है कि आप सही हैं, इसलिए मैंने अपना जवाब अपडेट कर दिया है। धन्यवाद! – user21820

0

आप इसे इस

<label for="1">hi</label> 
<input type="radio" id="1" /> 

तो तरह कर सकते हैं यदि आप पाठ पर क्लिक करें या लेबल यह रेडियो बटन का चयन करता है। लेकिन अगर आप ऐसा करते हैं ...

<label for="1">//</label> 

और आप यह क्या कोड मैं सिर्फ इस से पहले लिखा था फिर अगर आप 2 लेबल पर क्लिक करें, फिर यह भी रेडियो का चयन करेंगे में जोड़ें।

0

लेबल टैग के भीतर इनपुट टैग को नज़रअंदाज़ करना सुनिश्चित करता है कि लेबल रेडियो बटन के बगल में दिखाई देता है। पहले के सुझावों के साथ, आप लेबल फ़ाइल को HTML फ़ाइल में कहीं भी डाल सकते हैं और क्लिक किए जाने पर संबंधित रेडियो बटन का चयन करेंगे।इस की जाँच करें:

<html> 
 
<body> 
 

 
<form> 
 
    <p>What is my middle name?</p> 
 
    <br> 
 
    <input id="349" type="radio" value="1" name="question1"> 
 

 
    <br> 
 
    <input id="350" type="radio" value="2" name="question1"> 
 
    <label for="350">Andrew</label> 
 
    <br> 
 
    <input id="351" type="radio" value="3" name="question1"> 
 

 
    <br> 
 
    <input id="352" type="radio" value="4" name="question1"> 
 
    <label for="352">Anderson</label> 
 
    <br> 
 
</form><br/> 
 
<p>This is a paragraph</p> 
 
    <label for="349">Abe</label><br/> 
 
    <label for="351">Andre</label> 
 
    
 
</body> 
 
</html>

कर रहा इस तरह के बजाय इस दोष समाप्त:

<form> 
 
    <p>What is my middle name?</p> 
 
    <br> 
 
    
 
    <label> 
 
    <input id="349" type="radio" value="1" name="question1"/>Abe 
 
    </label> 
 
    <br> 
 
    
 
    <label> 
 
    <input id="350" type="radio" value="2" name="question1"/>Andrew 
 
    </label> 
 
    <br> 
 
    
 
    <label> 
 
    <input id="351" type="radio" value="3" name="question1"/>Andre 
 
    </label> 
 
    <br> 
 
    
 
    <label> 
 
    <input id="352" type="radio" value="4" name="question1"/>Anderson 
 
    </label> 
 
    <br> 
 
</form>

उत्कृष्ट सरल
संबंधित मुद्दे