संबंधित रेडियो बटन का चयन करने के लिए पाठ पर क्लिक करना

Question

मैं PHP का उपयोग करके एक प्रश्नोत्तरी वेब एप्लिकेशन बना रहा हूं। प्रत्येक प्रश्न को एक अलग से सम्‍मिलित किया गया है <label>और इसके 4 संभावित विकल्‍प हैं, जिसके उपयोग radio buttonsसे उपयोगकर्ता अपने उत्तर का चयन कर सकता है। एकल प्रश्न के लिए वर्तमान 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">वस्तु के पाठ को क्लिक करने में सक्षम होना चाहूंगा , क्योंकि केवल रेडियो बटन का चयन करने में सक्षम होने के विपरीत। मुझे पता है कि मैंने इस बारे में पहले भी पढ़ा है लेकिन अपनी समस्या का कोई हल नहीं खोज पाया। किसी भी मदद या सुझाव बहुत सराहना की है!

Answer 1

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

<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विशेषता तो प्रयोग किया जाता है कि रेडियो बटन एक समूह के रूप में कार्य और एक बार में केवल एक भी चयन की अनुमति।

Comments

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

— foochow

Answer 2

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

<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>

Comments

मुझे यह उत्तर पसंद है। लेकिन क्या आप सुनिश्चित हैं कि आपको इस दृष्टिकोण के साथ "फॉर" विशेषताओं की भी आवश्यकता है?

— पिद्दू

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

— user21820

रेडियो बटन और लेबल के बीच अतिरिक्त स्थान से बचने के लिए एक और विकल्प, बस इसे वहां नहीं रखना है <input id="349" type="radio" value="1" name="question1"><label for="349"> Abe</label>(टैग के बीच कोई रिक्त स्थान या नई

— रूपरेखा नहीं है

मैंने क्रोम और फ़ायरफ़ॉक्स में अपने तरीके का परीक्षण किया और पाया कि यह अंतरिक्ष चरित्र को हटाकर अयोग्य स्थान को 7 से 3 पिक्सेल तक कम कर देता है। देखें कि क्यों-वहाँ-एक-अस्पष्टनीय-अंतराल-के बीच-इन-इनलाइन-ब्लॉक-डिव-तत्व हैं । तीन शेष पिक्सेल रेडियो बटन पर डिफ़ॉल्ट सही मार्जिन हैं margin: 3px 3px 0 5px;(यह फ़ायरफ़ॉक्स में अधिक ध्यान देने योग्य है क्योंकि डिफ़ॉल्ट रूप से एक हॉवर प्रभाव है) जिसे सीएसएस के साथ मार्जिन को हटाकर और पैडिंग के साथ प्रतिस्थापित किया जा सकता है।

— एरिल्डमैन

@AryeDovEidelman: मैं देख रहा हूँ, जाँच के लिए धन्यवाद! हालांकि सादगी के लिए मैं लेबल में पूरी बात को शामिल करने के लिए चिपकेगा। =)

— user21820

Answer 3

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

Answer 4

लेबल टैग के भीतर इनपुट टैग को घोंसला बनाना सुनिश्चित करता है कि लेबल रेडियो बटन के ठीक बगल में दिखाई देता है। सुझाए गए पहले दृष्टिकोणों के साथ, आप 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>

Answer 5

आप इसे इस तरह से कर सकते हैं

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

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

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

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

Answer 6

मैं सालों से ऐसा कर रहा हूं, लेकिन इनमें से कोई भी मेरे लिए काम नहीं कर रहा है, चर का उपयोग कर रहा है।

    echo "<input type='radio' name='student' id='$studentID' value='$studentID'>
        <label for='$studentID'>$fname</label> $lname<br />\n";
    echo "<input type='radio' name='student' id='$studentID' value='$studentID'>
        <label for='$studentID'>$fname $lname</label><br />\n";

और यहाँ स्रोत है:

        <input type='radio' name='student' id='986875' value='986875'>
        <label for='986875'>John</label> Brown<br />