Gebruik van beelden in plaats van radio-knop en Checkbox

De noodzaak om afbeeldingen te gebruiken in plaats van selectievakjes en keuzerondjes komt voort uit het feit dat, via CSS, de vorm-elementen zijn moeilijk gestileerde elementen zoals aankruisvakjes, keuzerondjes en select box, niet kan worden gemaakt " plat 'door middel van style sheets, dus je moet toevlucht nemen tot een aantal trucs te maken voor dit tekort esthetiek.

Afbeeldingen voor selectievakjes en keuzerondjes

Met behulp van uw favoriete grafische programma, maak vier beelden, twee zal vertegenwoordigen de checkbox is niet gewaardeerd en niet gewaardeerd radio, terwijl de andere twee vertegenwoordigen de selectievakjes en radio gewaardeerd.

In mijn NIET een grafische die ik heb gemaakt met een goede oude MS Paint de volgende beelden (en hun bestandsnamen):

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

Sla het op in onze werkmap.

HTML-formulier

Binnen de werkmap, maakt u een HTML-bestand en corrediamolo de volgende 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"> Sport







 </ P>







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







 </ Form>

Laten we gaan door.

Openen (en sluiten) regelmatig <form>, het importeren van afbeeldingen van de selectievakjes en keuzerondjes in plaats van de traditionele elementen van de vorm, waarin de eerste beelden die het veld leeg.

Voor elke groep passeren we een ID met een prefix gelijk en vertegenwoordiger met de prefix (bijvoorbeeld) de eerste beschrijving van de optie.

Het beeld zal ook onclick event, maar afhankelijk van of het nu een radio button of een checkbox, toe te wijzen twee of een parameter functie referentie.

In het geval van checkboxes, gaan alleen de waarde van de optie, maar in het geval van radio buttons, de waarde van de eerste pass en dan de waarde die NIET zou moeten nemen.

Kortom, door het analyseren van de JavaScript-functies, dit zijn duidelijke redenen.

Tot slot maken we gebruik van een verborgen veld (verborgen type) om naar de waarde of waarden die doorheen onze winkel "images / velden."

Het uiterlijk van het formulier ziet er als volgt uit:

Ga verder.

• <<
• 1
• 2
• >>