Foros del Web » Creando para Internet » HTML »

[SOLUCIONADO] Como poner imagenes como botones de formulario

Estas en el tema de Como poner imagenes como botones de formulario en el foro de HTML en Foros del Web. Hola soy nueva en la programación, necesito que alguien me oriente sobre cómo hacer algo parecido al input radius que sólo se puede seleccionar una ...
  #1 (permalink)  
Antiguo 06/09/2015, 14:11
Avatar de As3
As3
 
Fecha de Ingreso: septiembre-2015
Mensajes: 6
Antigüedad: 5 años, 8 meses
Puntos: 0
Como poner imagenes como botones de formulario

Hola soy nueva en la programación, necesito que alguien me oriente sobre cómo hacer algo parecido al input radius que sólo se puede seleccionar una opción, pero al hacer click sobre imágenes en vez del circulo Es para una pagina de enseñanza y que el alumno seleccione entre varias imágenes y luego mandarlo a corregir, para ver si la respuesta fue correcta o incorrecta...Gracias por su ayuda :D
  #2 (permalink)  
Antiguo 06/09/2015, 14:22
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 7 años, 8 meses
Puntos: 578
Respuesta: Como poner imagenes como botones de formulario

Puedes poner las imágenes como labels después de cada input radio. O hacer algo con JavaScript.
  #3 (permalink)  
Antiguo 06/09/2015, 19:53
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 6 años, 5 meses
Puntos: 208
Respuesta: Como poner imagenes como botones de formulario

Si usas la imagen como label tal como dijo PHPeros, podrias colocar el input radio "dentro" de la imagen.. no queda mal.

Para esto tendrías que colocar el label y el input dentro de un div, quedaría algo asi:

Código HTML:
Ver original
  1. <div>
  2.     <label for="imagen1">
  3.         <img src="http://lorempixel.com/500/500" alt="imagen1" />
  4.     </label>
  5.     <input type="radio" name="imagen" id="imagen1" />
  6. </div>

Código CSS:
Ver original
  1. div{
  2.     width:300px;
  3.     height:300px;
  4.     margin:10px;
  5.     float:left;
  6.     position:relative;
  7. }
  8.  
  9. div input{
  10.     position:absolute;
  11.     top:10px;
  12.     left:5px;
  13. }
  14.  
  15. div img{
  16.     width:100%;
  17. }

Demo: http://codepen.io/fede5426/pen/BoNyRx

Saludos
  #4 (permalink)  
Antiguo 07/09/2015, 16:02
Avatar de As3
As3
 
Fecha de Ingreso: septiembre-2015
Mensajes: 6
Antigüedad: 5 años, 8 meses
Puntos: 0
Respuesta: Como poner imagenes como botones de formulario

Muchas gracias por sus respuestas, me ayudó mucho :)

Etiquetas: todo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:01.