Щелкните текст, чтобы выбрать соответствующий переключатель

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

Тег label должен быть вокруг каждого ответа, например, вокруг Abe, Andrew и т. Д., И он должен быть уникальным для каждого из них.

Question 5

Вложение тега ввода в тег метки гарантирует, что метка отображается рядом с переключателем. С помощью предложенных ранее подходов вы можете поместить тег label в любом месте 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 />