Bruk av bilder i stedet for radioknapper og avkrysningsbokser

Behovet for å bruke bilder i stedet for avkrysningsbokser og radioknapper stammer fra det faktum at, via CSS, elementene i skjemaet er vanskelig stiliserte elementer like avkrysningsbokser, radioknapper og velg boksen, ikke kan gjøres " flat "gjennom stilark, så du må ty til noen triks for å gjøre opp for denne mangelen estetikk.

Bilder for avkrysningsbokser og radioknapper

Bruk din favoritt grafikk program, opprette fire bilder, vil to representerer de ikke-forbedret boksen og radio ikke verdsatt, mens de to andre representerer boksene og radio verdsatt.

I min IKKE være en grafisk jeg opprettet med gode gamle MS Paint følgende bilder (og deres filnavnene):

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

La oss redde vår arbeidsbok.

HTML-skjema

Innenfor arbeidsboken, opprette 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>







 <p> HOBBY </ 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>

La oss gå gjennom.

Åpne (og lukke) regelmessig <form> ved å importere bilder av avkrysningsbokser og radioknapper i stedet for den tradisjonelle elementer i skjemaet, i første omgang å sette bildene representerer det tomme feltet.

For hver gruppe passerer vi en ID med et prefiks lik og representativ med prefikset (for eksempel) den første beskrivelsen av alternativet.

Bildet vil også ha onclick event, men avhengig av om det er en radio knapp eller en avmerkingsboks, tildele to eller bare en parameter til funksjonen referanse.

I tilfelle av avmerkingsboksene, pass bare verdien av opsjonen, men i tilfelle av radioknapper, verdien av den første pass og deretter verdien som bør IKKE ta.

Kort sagt, analysere JavaScript-funksjoner, disse grunnene er klare.

Til slutt vil vi bruke et skjult felt (type skjult) hvor skal lagre verdien eller verdier som passerer gjennom vår "images / felt."

Utseendet av skjemaet vil bli som følger:

Vi fortsetter.

• <<
• 1
• 2
• >>