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

Я создаю веб-приложение для викторины, используя 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">, а не только выбрать сам переключатель. Я знаю, что я прочитайте об этом раньше, но не можете найти решение моей проблемы. Любая помощь или предложения очень ценятся!

Ответ 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>

Ответ 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>

Ответ 3

Тег метки должен быть вокруг каждого ответа, например. вокруг Эйба, Эндрю и т.д., и это должно быть уникальным для каждого из них.

Ответ 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>

Ответ 5

Вы можете сделать это так:

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

Итак, если вы нажмете на текст или метку, выберете переключатель. Но если вы это сделаете...

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

и вы добавите это в код, который я написал перед этим, тогда, если вы нажмете на вторую метку, тогда он также выберет радио.

Ответ 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 />