คลิกข้อความเพื่อเลือกปุ่มตัวเลือกที่เกี่ยวข้อง

Question 1

ฉันกำลังสร้างเว็บแอปพลิเคชันแบบทดสอบโดยใช้ 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">วัตถุได้ซึ่งตรงข้ามกับการเลือกปุ่มตัวเลือกเองเท่านั้น ฉันรู้ว่าฉันเคยอ่านเกี่ยวกับเรื่องนี้มาก่อน แต่ดูเหมือนจะหาวิธีแก้ปัญหาของฉันไม่ได้ ความช่วยเหลือหรือข้อเสนอแนะใด ๆ ที่ชื่นชมมาก!

Question 2

ในโค้ดของคุณคุณมีป้ายกำกับในแบบฟอร์ม คุณต้องการใส่ป้ายกำกับในกลุ่มวิทยุแต่ละกลุ่มดังที่แสดงด้านล่าง

<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แอตทริบิวต์ถูกนำมาใช้เพื่อให้ปุ่มทำงานเป็นกลุ่มและเพียง แต่ช่วยให้การเลือกเดียวในเวลา

Question 3

ดูเหมือนว่าจะมีช่องว่างที่ไม่สามารถคลิกได้เล็กน้อยระหว่างปุ่มตัวเลือกและป้ายกำกับหากทำตามคำตอบของนาธาน นี่คือวิธีทำให้พวกเขาเข้าร่วมได้อย่างราบรื่น (ดูบทความนี้ ):

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

Question 4

ป้ายฉลากควรอยู่รอบ ๆ คำตอบแต่ละข้อเช่นรอบ ๆ Abe, Andrew เป็นต้นและจะต้องไม่ซ้ำกันสำหรับแต่ละคำตอบ

Question 5

การซ้อนแท็กอินพุตภายในแท็กฉลากทำให้แน่ใจว่าป้ายกำกับจะปรากฏถัดจากปุ่มตัวเลือก ด้วยวิธีการที่แนะนำก่อนหน้านี้คุณสามารถวางป้ายกำกับไว้ที่ใดก็ได้ภายในไฟล์ 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>

ขยายข้อมูลโค้ด

Question 6

คุณสามารถทำได้เช่นนี้

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

ดังนั้นหากคุณคลิกที่ข้อความหรือติดป้ายก็จะเลือกปุ่มตัวเลือก แต่ถ้าทำแบบนี้ ...

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

และคุณเพิ่มสิ่งนี้ลงในโค้ดที่ฉันเขียนไว้ก่อนหน้านี้ถ้าคุณคลิกที่ป้ายกำกับที่ 2 ก็จะเลือกวิทยุด้วย

Question 7

ฉันทำสิ่งนี้มาหลายปีแล้ว แต่ทั้งสองอย่างนี้ไม่ได้ผลสำหรับฉันโดยใช้ตัวแปร

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