El uso de imágenes en lugar del botón de la radio y la casilla de verificación

La necesidad de utilizar imágenes en vez de casillas de verificación y botones de radio se debe al hecho de que, a través de CSS, los elementos del formulario son difíciles de elementos estilizados así como casillas de verificación, botones de radio y caja de selección, no se puede hacer " plana "a través de las hojas de estilo, por lo que deben recurrir a algunos trucos para compensar la deficiencia de esta estética.

Imágenes de casillas de verificación y botones de radio

Utilizando su programa de gráficos favorito, crear cuatro imágenes, dos representarán a la casilla de verificación no se valora y no se valora la radio, mientras que los otros dos representan a las casillas de verificación de radio y valorados.

En mi NO ser un gráfico que he creado con la pintura de la vieja MS las siguientes imágenes (y sus nombres de archivo):

	checkbox_pieno.jpg
	checkbox_vuoto.jpg
	radio_pieno.jpg
	radio_vuoto.jpg

Guardarlo en nuestro libro.

Formulario HTML

En el libro, cree un archivo HTML y corrediamolo el siguiente código:

 <form name="modulo">







 SEXO <p> </ b> </ p>







 <input type="hidden" name="sesso">







 <p>







 <img src="radio_vuoto.jpg" id="sesso_U" onclick="Sesso('U','D')" align="absmiddle"> hombre







 <img src="radio_vuoto.jpg" id="sesso_D" onclick="Sesso('D','U')" align="absmiddle"> Mujer







 </ P>







 <p> HOBBY </ b> </ p>







 <input type="hidden" name="hobby">







 <p>







 <img src="checkbox_vuoto.jpg" id="hobby_C" onclick="Hobby('C')" align="absmiddle"> Cine







 <img src="checkbox_vuoto.jpg" id="hobby_L" onclick="Hobby('L')" align="absmiddle"> lectura







 <img src="checkbox_vuoto.jpg" id="hobby_S" onclick="Hobby('S')" align="absmiddle"> Deportes







 </ P>







 <input type="button" value=" Aceptar "onclick="Conferma()">







 </ Form>

Vamos a pasar.

Abrir (y cerrar) con regularidad <form>, la importación de imágenes de casillas de verificación y botones de radio en lugar de los elementos tradicionales de la forma, el establecimiento de las primeras imágenes que representan el campo vacío.

Para cada grupo se pasa un ID con un prefijo igual y representativo, con el prefijo (por ejemplo) la descripción inicial de la opción.

La imagen también se han evento onclick, pero dependiendo de si se trata de un botón de selección múltiple, asignar dos o una referencia de parámetro de la función.

En el caso de las casillas, pasar sólo el valor de la opción, pero en el caso de los botones de opción, el valor de la primera pasada y luego el valor que no debe tomar.

En resumen, mediante el análisis de las funciones de JavaScript, estas son razones claras.

Por último, se utiliza un campo oculto (tipo oculto) para ir a guardar el valor o valores que pasan a través de nuestro "images / campos."

La aparición de la forma será como sigue:

Proceder.

• <<
• 1
• 2
• >>