Использование изображений вместо кнопки радио и Флажок

Необходимость использования изображений вместо флажков и переключателей связано с тем, что с помощью CSS, элементов формы трудно стилизованные элементы так же, как флажки, радио-кнопки и выберите поле, не может быть сделано " плоским "с помощью таблиц стилей, поэтому вы должны прибегнуть к некоторым хитрости, чтобы компенсировать этот недостаток эстетики.

Изображения для флажков и переключателей

Используя ваш любимый графический редактор, создать четыре изображения, два будут представлять флажок не ценят и не ценится радио, в то время как две другие представляют флажков и радио ценят.

На мой НЕ быть графический я создал с хорошей старой краски MS следующих изображений (и их имена файлов):

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

Сохраните его в нашей книге.

HTML-формы

В книге, создать HTML файл и corrediamolo следующий код:

 <form name="modulo">







 <p> СЕКС </ B> </ P>







 <input type="hidden" name="sesso">







 <p>







 <img src="radio_vuoto.jpg" id="sesso_U" onclick="Sesso('U','D')" align="absmiddle"> человек







 <img src="radio_vuoto.jpg" id="sesso_D" onclick="Sesso('D','U')" align="absmiddle"> женщина







 </ P>







 ХОББИ <p> </ B> </ P>







 <input type="hidden" name="hobby">







 <p>







 <img src="checkbox_vuoto.jpg" id="hobby_C" onclick="Hobby('C')" align="absmiddle"> кино







 <img src="checkbox_vuoto.jpg" id="hobby_L" onclick="Hobby('L')" align="absmiddle"> чтения







 <img src="checkbox_vuoto.jpg" id="hobby_S" onclick="Hobby('S')" align="absmiddle"> спорта







 </ P>







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







 </ FORM>

Пройдем.

Запуск (завершение работы) регулярно <form>, импорт изображений флажков и переключателей вместо традиционных элементов формы, установка начального изображения, представляющие поле пустым.

Для каждой группы мы передаем идентификатор с префиксом равным и представителя с префиксом (например), первоначальное описание опции.

Изображение также будет иметь OnClick событие, но в зависимости от того, что это кнопка радио или флажок, назначить два или один параметр функции ссылке.

В случае с флажками, передайте только стоимость опциона, но в случае с радио-кнопки, значение первого прохода, а затем значение, которое не должно.

Короче говоря, на основе анализа функций JavaScript, это понятным причинам.

Наконец, мы используем скрытое поле (скрытый тип), чтобы пойти для хранения значения или ценности, которые проходят через наш "изображения / полей".

Внешний вид формы будет выглядеть следующим образом:

Приступить.

• <<
• 1
• 2
• >>