Hacer clic en el texto para seleccionar el botón de radio correspondiente

Question 1

Estoy creando una aplicación web de prueba usando PHP. Cada pregunta se compone de una pregunta separada <label>y tiene 4 opciones posibles, que se utilizan radio buttonspara permitir que el usuario seleccione su respuesta. El HTML actual para una sola pregunta se ve así:

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

Me gustaría que el usuario tuviera la opción de hacer clic en el texto asociado con el botón de opción. En este momento, el usuario solo puede hacer clic en el botón de opción, lo que me parece una tarea bastante engorrosa.

Leí No se puede seleccionar una opción de botón de opción en particular al hacer clic en el texto de la opción y la sugerencia apunta a hacer coincidir los atributos fory idde las etiquetas. He hecho esto y todavía no funciona.

Mi pregunta es: me gustaría poder hacer clic en el texto de un <input type="radio">objeto, en lugar de poder seleccionar solo el botón de opción. Sé que he leído sobre esto antes, pero parece que no puedo encontrar ninguna solución a mi problema. ¡Cualquier ayuda o sugerencia es muy apreciada!

Question 2

En su código, tiene una etiqueta en el formulario en sí. Desea poner etiquetas en cada grupo de radio individual, como se muestra a continuación.

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

Expandir fragmento

Debe tener en cuenta que dos elementos nunca deben tener el mismo ID. El nameatributo se utiliza para que los botones de opción funcionen como un grupo y solo permitan una única selección a la vez.

Question 3

Parece haber un pequeño espacio en el que no se puede hacer clic entre el botón de opción y la etiqueta si se hace de acuerdo con la respuesta de Nathan . A continuación, se explica cómo hacer que se unan sin problemas (consulte este artículo ):

<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

La etiqueta debe estar alrededor de cada respuesta, por ejemplo, alrededor de Abe, Andrew, etc. y debe ser única para cada una de ellas.

Question 5

Anidar la etiqueta de entrada dentro de la etiqueta de etiqueta asegura que la etiqueta aparezca justo al lado del botón de opción. Con los enfoques anteriores sugeridos, puede colocar la etiqueta de la etiqueta en cualquier lugar dentro del archivo html y seleccionará el botón de radio asociado cuando se haga clic. Mira esto:

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

Expandir fragmento

En cambio, hacerlo de esta manera elimina este defecto:

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

Expandir fragmento

Question 6

Puedes hacerlo así

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

Entonces, si hace clic en el texto o la etiqueta, selecciona el botón de opción. Pero si haces esto ...

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

y agrega esto al código que escribí justo antes de esto, entonces si hace clic en la segunda etiqueta, también seleccionará la radio.

Question 7

He estado haciendo esto durante años, pero ninguno de estos funciona para mí, usando variables.

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

y aquí está la fuente:

        <input type='radio' name='student' id='986875' value='986875'>
        <label for='986875'>John</label> Brown<br />