Användning av bilder istället för radio-knappen Kryssruta

Behovet av att använda bilder istället för kryssrutor och alternativknappar härrör från det faktum att, via CSS, form elementen är svåra stiliserade element precis som kryssrutor, alternativknappar och markera rutan inte kan göras " platt "genom stilmallar, så du måste ta till några knep för att kompensera för denna brist estetik.

Bilder för kryssrutor och alternativknappar

Använda din favorit grafikprogram skapa fyra bilder, två kommer att representera kryssrutan inte värderas och inte värderas radio, medan de andra två representerar de kryssrutor och radio värderas.

I min INTE en grafisk jag skapat med gamla goda MS Paint följande bilder (och deras filnamn):

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

Spara den i vår arbetsbok.

HTML-formulär

Inom arbetsboken skapa en HTML-fil och corrediamolo följande kod:

 <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"> kvinna







 </ 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"> Läsning







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







 </ P>







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







 </ Form>

Låt oss gå igenom.

Öppna (och stänga) regelbundet <form>, importera bilder av kryssrutor och alternativknappar i stället för de traditionella inslagen i form, inställning de första bilderna som representerar fältet tomt.

För varje grupp passerar vi ett ID med ett prefix jämlika och representativa med prefixet (till exempel) den inledande beskrivningen av alternativet.

Bilden kommer också att ha onclick händelse, men beroende på om det är en radioknapp eller kryssruta, tilldela två eller en parameter funktion referens.

I fråga om kryssrutor, passera bara värdet på alternativet, men i fallet med radioknappar, värdet av det första passet och sedan det värde som inte bör ta.

Kort sagt, genom att analysera de JavaScript-funktioner, dessa är tydliga skäl.

Slutligen använder vi ett dolt fält (dold typ) att gå för att lagra det eller de värden som passerar genom våra "bilder / områden."

Utseendet på den form kommer att vara följande:

Fortsätt.

• <<
• 1
• 2
• >>