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!
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>fuente
<input id="349" type="radio" value="1" name="question1"><label for="349"> Abe</label>(sin espacios ni líneas nuevas entre las etiquetas)margin: 3px 3px 0 5px;(es más notable en Firefox ya que hay un efecto de desplazamiento por defecto) que se puede arreglar con CSS eliminando el margen y reemplazándolo con relleno.La etiqueta debe estar alrededor de cada respuesta, por ejemplo, alrededor de Abe, Andrew, etc. y debe ser única para cada una de ellas.
fuente
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>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>fuente
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.
fuente
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 />fuente