Utilização de imagens em vez de botão de rádio e Checkbox

A necessidade de usar imagens em vez de caixas de seleção e botões de rádio decorre do fato de que, via CSS, os elementos do formulário são difíceis elementos estilizados como caixas de seleção, botões de rádio e caixa de seleção, não pode ser feito " flat 'através de folhas de estilo, assim que você deve recorrer a alguns truques para compensar essa deficiência estética.

Imagens para checkboxes e botões de rádio

Usando seu programa gráfico favorito, criar quatro imagens, dois vão representar a caixa de seleção não é valorizado e não valorizado rádio, enquanto os outros dois representam as caixas de rádio e valorizada.

Em meu ser não um gráfico que eu criei com boas MS Paint idade as imagens a seguir (e seus nomes de arquivo):

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

Salvá-lo em nossa pasta de trabalho.

Formulário HTML

Dentro da pasta de trabalho, crie um arquivo HTML e corrediamolo o seguinte código:

 <form name="modulo">







 Sexo <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')" Mulher 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')" Leitura align="absmiddle">







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







 </ P>







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







 </ Form>

Vamos passar.

Abrir (e fechar) regularmente <form>, importar imagens de caixas de seleção e botões de rádio em vez de os elementos tradicionais da forma, a definição das imagens iniciais que representam o campo vazio.

Para cada grupo de nós passamos um ID com um prefixo igual e representativo, com o prefixo (por exemplo) a descrição inicial da opção.

A imagem também terá evento onclick, mas dependendo se é um botão de opção ou uma caixa de seleção, atribuir duas ou uma referência função do parâmetro.

No caso de caixas de seleção, passe apenas o valor da opção, mas no caso de botões de rádio, o valor da primeira passagem e então o valor que não deve tomar.

Em suma, analisando as funções de JavaScript, estas são razões claras.

Finalmente, usamos um campo oculto (tipo hidden) para ir para armazenar o valor ou valores que passam pelo nosso "images / campos."

A aparência do formulário será o seguinte:

Prosseguir.

• <<
• 1
• 2
• >>