Nhấp vào văn bản để chọn nút radio tương ứng

Question 1

Tôi đang tạo một ứng dụng web đố vui bằng PHP. Mỗi câu hỏi bao gồm một câu hỏi riêng biệt <label>và có 4 lựa chọn khả thi, sử dụng radio buttonsđể cho phép người dùng chọn câu trả lời của mình. HTML hiện tại cho một câu hỏi giống như sau:

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

Tôi muốn người dùng có tùy chọn nhấp vào văn bản được liên kết với nút radio. Ngay bây giờ, người dùng chỉ có thể nhấp vào nút radio - điều mà tôi thấy là một công việc khá rườm rà.

Tôi đọc Không thể chọn một lựa chọn nút radio cụ thể bằng cách nhấp vào văn bản lựa chọn và gợi ý hướng đến việc làm cho các thuộc tính forvà idthuộc tính của các thẻ khớp với nhau. Tôi đã làm điều này và nó vẫn không hoạt động.

Câu hỏi của tôi là: Tôi muốn có thể nhấp vào văn bản của một <input type="radio">đối tượng, thay vì chỉ có thể chọn chính nút radio. Tôi biết tôi đã đọc về điều này trước đây nhưng dường như không thể tìm thấy bất kỳ giải pháp nào cho vấn đề của tôi. Bất kỳ trợ giúp hoặc đề xuất được đánh giá cao!

Question 2

Trong mã của bạn, bạn đã có một nhãn trên chính biểu mẫu. Bạn muốn đặt nhãn trên từng nhóm radio riêng lẻ, như hình dưới đây.

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

Mở rộng đoạn mã

Bạn nên nhớ rằng hai phần tử không bao giờ được có cùng một ID. Các namethuộc tính được sử dụng để các nút radio có chức năng như một nhóm và chỉ cho phép một sự lựa chọn duy nhất tại một thời điểm.

Question 3

Dường như có một khoảng trống nhỏ không thể nhấp vào giữa nút radio và nhãn nếu được thực hiện theo câu trả lời của Nathan . Đây là cách làm cho họ tham gia liền mạch (xem bài viết này ):

<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

Thẻ nhãn phải ở xung quanh mỗi câu trả lời, ví dụ như xung quanh Abe, Andrew, v.v. và nó cần phải là duy nhất cho mỗi câu trả lời.

Question 5

Việc lồng thẻ đầu vào trong thẻ nhãn đảm bảo nhãn xuất hiện ngay bên cạnh nút radio. Với các cách tiếp cận trước đó được đề xuất, bạn có thể đặt thẻ nhãn ở bất kỳ đâu trong tệp html và nó sẽ chọn nút radio được liên kết khi được nhấp vào. Kiểm tra cái này:

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

Mở rộng đoạn mã

Thay vào đó, làm theo cách này để loại bỏ lỗ hổng này:

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

Mở rộng đoạn mã

Question 6

Bạn có thể làm điều đó như thế này

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

Vì vậy, nếu bạn nhấp vào văn bản hoặc nhãn, nó sẽ chọn nút radio. Nhưng nếu bạn làm điều này ...

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

và bạn thêm điều này vào mã mà tôi đã viết ngay trước đó, sau đó nếu bạn nhấp vào nhãn thứ 2 thì nó cũng sẽ chọn radio.

Question 7

Tôi đã làm điều này trong nhiều năm, nhưng cả hai đều không hiệu quả với tôi, bằng cách sử dụng các biến.

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

và đây là nguồn:

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