Použitie obrázkov miesto prepínač a políčko

Že je potrebné používať obrázky namiesto toho, zaškrtávacie políčka a prepínače vyplýva zo skutočnosti, že cez CSS, formulárové prvky sú ťažké štylizované prvky, rovnako ako je zaškrtávacie políčka, prepínače a vybrať box, a nie byť " byt 'po štýlov, takže sa musí uchýliť k nejakej triky, aby sa tento nedostatok estetiky.

Obrázky na zaškrtávacie políčka a prepínače

Pomocou vášho obľúbeného grafického programu, vytvoriť štyri snímky, dva budú reprezentovať políčko nie je ocenený, a nie ocenená rádio, zatiaľ čo ďalšie dva predstavujú políčka a rádio oceňuje.

Podľa môjho to byť grafické Vytvoril som sa starým dobrým Maľovanie nasledujúce obrázky (a ich názvy súborov):

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

Uložte ho v našom zošite.

HTML podobe

V zošite, vytvorte súbor HTML a corrediamolo nasledujúci kód:

 <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"> žena







 </ P>







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







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







 <p>







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







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







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







 </ P>







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







 </ Form>

Poďme sa prejsť.

Open (a zatvorenie) pravidelne <form>, importu snímok z zaškrtávacie políčka a prepínače miesto tradičné prvky formulára, nastavenie prvé snímky reprezentujúce pole prázdne.

Pre každú skupinu odovzdáme ID s predponou rovnaké a reprezentatívne s predponou (napr.), úvodný popis tejto možnosti.

Obraz bude mať aj udalosť OnClick, ale podľa toho, či sa jedná o prepínač, alebo políčko, priradiť dva alebo jeden parameter funkcie referencie.

U začiarkavacích políčok, prejsť len hodnotu opcie, ale v prípade prepínačov, hodnotu prvý priechod a potom hodnota, ktorá by nemala trvať.

Stručne povedané, na základe analýzy JavaScript funkcie, to sú jasné dôvody.

Nakoniec sme pomocou skrytej pole (hidden typu) ísť na uloženie hodnoty alebo hodnoty, ktoré prešli naším "images / pole."

Vzhľad formulára bude vyzerať takto:

Pokračovať.

• <<
• 1
• 2
• >>