Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: LoboBlanco en 10 de Febrero 2017, 20:51
-
Hola a todos :)
Estoy intentando presentar en pantalla un formulario de 4 lineas con control de boton radio, para seleccionar una de ellas.
Y que se pueda seleccionar haciendo click con el ratón en toda su linea, no solo haciendo click justo en el boton.
Supongo que es con alguna función que se active con el onclik en el div de esa linea, pero no se hacerlo.
He llegado a hacer que la linea cambie de color al pasar por encima el puntero del ratón, utilizando el onmouseover y el onmouseout.
¿Alguien podría ayudarme? Muchas gracias
El código que he hecho es:
<html>
<head>
<title>Control radio mejorado</title>
</head>
<body>
<form action="FORMULARIO_control_radio_mejoradob.php" method="post">
<div onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor=''" >
<input type="radio" name="radio1" value="respuesta1" name="linea1"> Linea1
</div>
<div onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor=''" >
<input type="radio" name="radio1" value="linea2" >Linea2
</div>
<div onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor=''" >
<input type="radio" name="radio1" value="respuesta3">Linea3
</div>
<div onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor=''" >
<input type="radio" name="radio1" value="respuesta4">Linea2
</div>
<br>
<input type="submit" name="Confirmar" value="Enviar Respuesta">
</form>
</body>
</html>
-
Hola LoboBlanco.
Para empezar recomendarte que leas el siguiente enlace donde puedes ver como colocar el código correctamente en tus consultas entre otras cosas.
https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0
Sobre tu consulta, me imagino que querrás decir JavaScript y no Java.
Para hacer que se seleccione el radio pulsando sobre el texto es suficiente con que el texto esté entre etiquetas "label" con la propiedad "for='nombreDelIdDelRadio'".
<input type="radio" name="radio1" value="respuesta1" id="opcion1"><label for="opcion1">Linea1</label>
o también se puede hacer que el radio este entre las etiquetas label, de esta forma no haría falta usar la propiedad for.
<label onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor=''" >
<input type="radio" name="radio1" value="linea2" >Linea2
</label>
Saludos. ;D
-
Muchisimas gracias Pedro :) :)
Es lo que buscaba. Y de forma mucho más sencilla a lo que pensaba.
Próximas veces pondré el codigo correctamente, para que se lea mejor, mis disculpas y gracias