Brug af billeder i stedet for radio-knappen og Afkrydsningsfelt

Behovet for at bruge billeder i stedet for afkrydsningsfelter og radioknapper stammer fra det faktum, at via CSS, form elementer er vanskelige stiliserede elementer lige så afkrydsningsfelter, radioknapper og vælg boks, kan ikke gøres " flade 'via style sheets, så du skal ty til nogle krumspring for at kompensere for denne mangel æstetik.

Billeder til afkrydsningsfelter og alternativknapper

Brug dine foretrukne grafikprogram, oprette fire billeder, hvoraf to vil repræsentere afkrydsningsfeltet er ikke værdsat og ikke værdsat radio, mens de to andre repræsenterer afkrydsningsfelter og radio værdsat.

I min IKKE være en grafisk lavede jeg med gode gamle MS Paint følgende billeder (og deres filnavne):

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

Gem det i vores projektmappe.

HTML-formular

I projektmappen, skal du oprette en HTML-fil og corrediamolo følgende kode:

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







 </ P>







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







 </ Form>

Lad os gå igennem.

Åbne (og lukke) regelmæssigt <form>, importere billeder af afkrydsningsfelter og alternativknapper i stedet for de traditionelle elementer i den form, fastsættelsen af ​​den første billeder, der repræsenterer feltet tomt.

For hver gruppe kommer vi forbi et id med et præfiks lige og repræsentative med præfikset (for eksempel) den indledende beskrivelse af optionen.

Billedet vil også have onclick begivenhed, men afhængigt af om det er en radio-knap eller et afkrydsningsfelt, to eller én parameter funktion henvisning tildele.

I tilfælde af afkrydsningsfelter, passerer kun værdien af ​​optionen, men i tilfælde af radio-knapper, værdien af ​​det første gennemløb, og den værdi, bør ikke tage.

Kort sagt, ved at analysere de JavaScript-funktioner, som disse er klare grunde.

Endelig bruger vi et skjult felt (skjult type) til at gå for at gemme eller flere værdier, der passerer gennem vores "billeder / felter."

Fremkomsten af ​​skemaet vil være som følger:

Fortsæt.

• <<
• 1
• 2
• >>