Utilisation des images au lieu du bouton de la radio et la case à cocher

La nécessité d'utiliser des images plutôt que de cases à cocher et boutons radio provient du fait que, via CSS, les éléments de formulaire sont difficiles éléments stylisés comme des cases à cocher, boutons radio et boîte de sélection, ne peut être faite " plat »grâce à des feuilles de style, vous devez donc recourir à certaines ruses pour compenser cette esthétique de carence.

Images pour les cases à cocher et des boutons radio

En utilisant votre programme favori graphisme, création de quatre images, deux représenteront la case n'est pas valorisé et pas apprécié la radio, tandis que les deux autres représentent les cases et la radio d'une valeur.

Dans ma PAS être un graphique que j'ai créé avec MS Paint bonnes vieilles images suivantes (et leurs noms de fichiers):

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

Enregistrez-le dans notre classeur.

Formulaire HTML

Dans le classeur, créez un fichier HTML et corrediamolo le code suivant:

 <form name="modulo">







 SEXE <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"> Femme







 </ P>







 <p> HOBBY </ b> </ p>







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







 <p>







 <img src="checkbox_vuoto.jpg" id="hobby_C" onclick="Hobby('C')" align="absmiddle"> Cinéma







 <img src="checkbox_vuoto.jpg" id="hobby_L" onclick="Hobby('L')" align="absmiddle"> lecture







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







 </ P>







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







 </ Form>

Passons en revue.

Ouvrir (et fermer) régulièrement <form>, importation d'images de cases à cocher et des boutons radio au lieu des éléments traditionnels de la forme, fixant les premières images représentant le champ vide.

Pour chaque groupe, nous passons un identifiant avec un préfixe égale et représentant avec le préfixe (par exemple) la description initiale de l'option.

L'image sera aussi l'événement onclick, mais selon qu'il s'agisse d'un bouton radio ou une case à cocher, assigner deux ou une référence de fonction du paramètre.

Dans le cas des cases à cocher, ne laisser passer que la valeur de l'option, mais dans le cas des boutons radio, la valeur de la première passe, puis la valeur que devrait pas prendre.

En bref, en analysant les fonctions JavaScript, ce sont des raisons claires.

Enfin, nous utilisons un champ caché (type caché) pour aller au magasin de la valeur ou des valeurs qui traversent nos "images / champs."

L'apparition de la forme se fera comme suit:

Procéder.

• <<
• 1
• 2
• >>