Клацнувши текст, виберіть відповідний перемикач

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

Тег мітки повинен бути навколо кожної відповіді, наприклад, навколо Ейба, Ендрю тощо ... і він повинен бути унікальним для кожного з них.

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>

і ви додаєте це до того коду, який я писав перед цим, тоді, якщо ви натиснете на 2-й ярлик, тоді він також вибере радіо.

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