텍스트를 클릭하여 해당 라디오 버튼 선택

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>

스 니펫 확장

두 요소가 동일한 ID를 가져서는 안된다는 점에 유의해야합니다. 이 name속성은 라디오 버튼이 그룹으로 작동하고 한 번에 하나의 선택 만 허용하도록 사용됩니다.

Question 3

Nathan 의 대답 에 따라 완료되면 라디오 버튼과 레이블 사이에 클릭 할 수없는 약간의 공간이있는 것 같습니다 . 매끄럽게 결합하는 방법은 다음과 같습니다 ( 이 도움말 참조 ).

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

이 코드를 바로 전에 작성한 코드에 추가하고 두 번째 레이블을 클릭하면 라디오도 선택됩니다.

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