html - tablas - Hacer clic en el texto para seleccionar el botón de opción correspondiente
input html (5)
Anidar la etiqueta de entrada dentro de la etiqueta de etiqueta asegura que la etiqueta aparezca justo al lado del botón de radio. Con los enfoques anteriores sugeridos, puede poner 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>
Hacerlo de esta manera en su lugar 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>
Estoy creando una aplicación web de prueba usando PHP. Cada pregunta se compone de una <label> separada y tiene 4 opciones posibles, usando radio buttons opción para permitir al usuario seleccionar 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 tenga 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 cual me parece una tarea bastante engorrosa.
He leído No se puede seleccionar una opción de botón de radio particular haciendo clic en el texto de elección y los puntos de sugerencia para hacer coincidir los atributos de id y de id de las etiquetas. He hecho esto y todavía no funciona.
Mi pregunta es: me gustaría poder hacer clic en el texto de un objeto <input type="radio"> , en lugar de solo poder seleccionar 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!
En su código, tiene una etiqueta en el formulario en sí. Desea colocar 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>
Debe tener en cuenta que dos elementos nunca deben tener la misma ID. El atributo de name se usa para que los botones de radio funcionen como un grupo y solo permitan una selección individual a la vez.
La etiqueta debe estar alrededor de cada respuesta, por ejemplo, alrededor de Abe, Andrew, etc., y debe ser única para cada uno de ellos.
Parece que hay un espacio poco elegible entre el botón de radio y la etiqueta si se hace de acuerdo con la respuesta de Nathan . Aquí es cómo hacer que se unan sin problemas (vea 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>
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 radio. Pero si haces esto ...
<label for="1">//</label>
y agrega esto a lo que el código que escribí justo antes de esto, si hace clic en la segunda etiqueta, también seleccionará la radio.