Я создаю веб-приложение викторины с использованием 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">объекта, а не только саму радиокнопку. Я знаю, что читал об этом раньше, но не могу найти решение своей проблемы. Любая помощь или предложения очень приветствуются!
Кажется, что между переключателем и меткой есть небольшое пространство, которое нельзя щелкнуть, если это сделано в соответствии с ответом Натана . Вот как заставить их соединиться без проблем (см. Эту статью ):
<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>источник
<input id="349" type="radio" value="1" name="question1"><label for="349"> Abe</label>(без пробелов или новых строк между тегами)margin: 3px 3px 0 5px;(это более заметно в firefox, поскольку по умолчанию есть эффект наведения), который можно исправить с помощью CSS, удалив поле и заменив его заполнением.Тег label должен быть вокруг каждого ответа, например, вокруг Abe, Andrew и т. Д., И он должен быть уникальным для каждого из них.
источник
Вложение тега ввода в тег метки гарантирует, что метка отображается рядом с переключателем. С помощью предложенных ранее подходов вы можете поместить тег 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>источник
Вы можете сделать это так
<label for="1">hi</label> <input type="radio" id="1" />Поэтому, если вы нажимаете на текст или метку, он выбирает переключатель. Но если вы сделаете это ...
<label for="1">//</label>и вы добавляете это к тому, что я написал непосредственно перед этим, тогда, если вы нажмете на второй ярлык, он также выберет радио.
источник
Я занимаюсь этим годами, но ни один из них не работает для меня, используя переменные.
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 />источник