Use of images instead of radio button and Checkbox

The need to use images instead of checkboxes and radio buttons stems from the fact that, via CSS, the form elements are difficult stylized elements just as checkboxes, radio buttons and select box, can not be made ​​" flat 'through style sheets, so you must resort to some trickery to make up for this deficiency aesthetics.

Images for checkboxes and radio buttons

Using your favorite graphics program, create four images, two will represent the checkbox is not valued and not valued radio, while the other two represent the checkboxes and radio valued.

In my NOT be a graphic I created with good old MS Paint the following images (and their file names):

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

Save it in our workbook.

HTML form

Within the workbook, create an HTML file and corrediamolo the following code:

 <form name="modulo">







 <p> SEX </ b> </ p>







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







 <p>







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







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







 </ P>







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







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







 <p>







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







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







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







 </ P>







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







 </ Form>

Let's go through.

Open (and close) regularly <form>, importing images of checkboxes and radio buttons instead of the traditional elements of the form, setting the initial images representing the field empty.

For each group we pass an ID with a prefix equal and representative with the prefix (for example) the initial description of the option.

The image will also have onclick event, but depending on whether it's a radio button or a checkbox, assign two or one parameter function reference.

In the case of checkboxes, pass only the value of the option, but in the case of radio buttons, the value of the first pass and then the value that should NOT take.

In short, by analyzing the JavaScript functions, these are clear reasons.

Finally, we use a hidden field (hidden type) to go to store the value or values ​​that pass through our "images / fields."

The appearance of the form will be as follows:

Proceed.

• <<
• 1
• 2
• >>