Použití obrázků místo přepínač a políčko

Že je třeba používat obrázky místo toho, zaškrtávací políčka a přepínače vyplývá ze skutečnosti, že přes CSS, formulářové prvky jsou těžké stylizované prvky, stejně jako je zaškrtávací políčka, přepínače a vybrat box, a ne být " byt 'po stylů, takže se musí uchýlit k nějaké triky, aby se tento nedostatek estetiky.

Obrázky na zaškrtávací políčka a přepínače

Pomocí vašeho oblíbeného grafického programu, vytvořit čtyři snímky, dva budou reprezentovat políčko není oceněn, a ne oceněna rádio, zatímco další dva představují políčka a rádio oceňuje.

Podle mého to být grafické Vytvořil jsem se starým dobrým Malování následující obrázky (a jejich názvy souborů):

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

Uložte jej v našem sešitu.

HTML podobě

V sešitu, vytvořte soubor HTML a corrediamolo následující 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"> čtení







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







 </ P>







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







 </ Form>

Pojďme se projít.

Open (a zavření) pravidelně <form>, importu snímků z zaškrtávací políčka a přepínače místo tradiční prvky formuláře, nastavení první snímky reprezentující pole prázdné.

Pro každou skupinu předáme ID s předponou stejné a reprezentativní s předponou (např.), úvodní popis této možnosti.

Obraz bude mít také událost OnClick, ale podle toho, zda se jedná o přepínač, nebo políčko, přiřadit dva nebo jeden parametr funkce reference.

U zaškrtávacích políček, projít pouze hodnotu opce, ale v případě přepínačů, hodnotu první průchod a pak hodnota, která by neměla trvat.

Stručně řečeno, na základě analýzy JavaScript funkce, to jsou jasné důvody.

Nakonec jsme pomocí skryté pole (hidden typu) jít k uložení hodnoty nebo hodnoty, které prošly naším "images / pole."

Vzhled formuláře bude vypadat takto:

Pokračovat.

• <<
• 1
• 2
• >>