Wykorzystywanie zdjęć zamiast przycisków i Checkbox

Potrzebę wykorzystania zdjęć zamiast pól wyboru i przycisków opcji wynika z faktu, że poprzez CSS, elementy formularza są trudne stylizowane elementy jak pola wyboru, przyciski opcji i wybrania, nie może być wprowadzone " płaskich "przez arkusze stylów, więc musisz uciekać się do kilku sztuczek, żeby nadrobić ten brak estetyki.

Obrazy dla pól wyboru i przycisków opcji

Za pomocą ulubionego programu graficznego, tworzenia czterech obrazów, dwóch będzie reprezentować pole wyboru nie jest ceniona, a nie wartości radio, podczas gdy dwa pozostałe stanowią pola wyboru i cenione radio.

W moim nie jest graficzny stworzyłem z stary dobry MS Paint następujące obrazy (i ich nazwy pliku):

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

Zapisz go w naszym skoroszycie.

Formularza HTML

W skoroszycie, utworzyć plik HTML i corrediamolo następujący kod:

 <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')" Man align="absmiddle">







 <img src="radio_vuoto.jpg" id="sesso_D" onclick="Sesso('D','U')" Kobieta align="absmiddle">







 </ 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')" Reading align="absmiddle">







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







 </ P>







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







 </ Form>

Przejdźmy przez.

Open (i zamknij) regularnie <form>, importowanie zdjęć z pól wyboru i przycisków opcji zamiast tradycyjnych elementów formularza, ustawiając początkowy obrazów przedstawiających pole puste.

Dla każdej grupy mijamy ID z prefiksem równe i przedstawiciel z prefiksem (na przykład) wstępnego opisu opcji.

Obraz będzie także zdarzenie onclick, ale w zależności od tego, czy jest to przycisk lub pole wyboru, przypisać dwie lub jedna funkcja odniesienia parametrów.

W przypadku pól, przekaż tylko wartość opcji, ale w przypadku przycisków opcji, wartość pierwszego przejścia, a następnie wartość, która nie powinna.

W skrócie, poprzez analizę funkcji JavaScript, są jasne powody.

W końcu użyć ukrytego pola (hidden typ), aby przejść do przechowywania wartości lub wartości, które przechodzą przez nasze "images / pola."

Wygląd postaci będzie w następujący sposób:

Kontynuuj.

• <<
• 1
• 2
• >>