Utilizarea de imagini in loc de butonul radio şi Checkbox

Necesitatea de a folosi imagini în loc de casetele şi butoanele radio rezultă din faptul că, prin intermediul CSS, elementele de formular sunt elemente la fel de dificil stilizate checkbox, butoane radio şi selectaţi caseta, nu pot fi făcute " "plat prin foi de stil, aşa că trebuie să recurgă la unele trucuri pentru a compensa acest deficit de estetică.

Imagini pentru casetele şi butoanele radio

Utilizarea preferat program grafic, de a crea patru imagini, doi vor reprezenta pe caseta de selectare nu este apreciată şi nu de prim rang de radio, în timp ce celelalte două reprezintă casetele de selectare şi de radio de prim rang.

În NU mea să fie o ilustraţie l-am creat cu buna vopsea veche MS următoarele imagini (şi numele de fişier):

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

Salvaţi-l în registrul de lucru noastre.

HTML forma

În registrul de lucru, creaţi un fişier HTML şi corrediamolo codul de mai jos:

 <form name="modulo">







 SEX <p> </ 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"> Femeie







 </ 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"> lectură







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







 </ P>







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







 </ Form>

Să mergem prin intermediul.

Deschiderea (şi închiderea) în mod regulat <form>, importul imaginilor de casetele şi butoanele radio în loc de elemente tradiţionale ale formularului, setarea imaginile iniţiale care reprezintă câmpul gol.

Pentru fiecare grup se trece o identitate cu un prefix egale şi reprezentative cu prefixul (de exemplu) descrierea iniţială a opţiunii.

Imaginea va avea, de asemenea, onclick eveniment, dar în funcţie de faptul dacă este un buton radio sau o casetă de selectare, atribui două sau o singură funcţie de referinţă parametru.

În cazul în care casetele de validare, treci numai valoarea de opţiune, dar în cazul de butoane radio, valoarea de la primul pasaj şi apoi valoare care nu ar trebui să ia.

Pe scurt, prin analizarea funcţiilor JavaScript, acestea sunt motive clare.

În cele din urmă, vom folosi un câmp ascuns (de tip ascuns) pentru a merge pentru a stoca valoarea sau valorile care trec prin intermediul nostru "imagini / domenii."

Aspectul formular vor fi, după cum urmează:

Mai departe.

• <<
• 1
• 2
• >>