Comment faire pour utiliser des images au lieu de boutons radio
Dans cet article, vous apprendrez comment utiliser des images au lieu des boutons radio pour fournir un look personnalisé pour vos formulaires.
Chaque champ de formulaire de bouton radio est placé dans une balise span avec un écran: aucun propriété afin de ne pas afficher dans le navigateur. Mais il est encore très bien une partie de la forme.
A côté du champ de formulaire de bouton radio, l'une des deux images est affichée, soit une image représentant un bouton radio contrôlé et une image représentant un bouton radio désactivée.
Pour chaque bouton radio de l'ensemble, l'image est commuté sur l'image sans contrôle et le bouton radio est désactivée. (Un ensemble de boutons radio est tous les boutons radio avec le même nom de champ de formulaire.)
Le bouton radio qui a été cliqué est cochée et que l'image est mis à l'image cochée.
De cette façon, les boutons radio seront dans l'état correct cochée / décochée lorsque le formulaire est soumis.
Comment faire pour rendre le travail
Ces instructions vous assumez avez déjà une forme avec des boutons radio. Si tel est le cas contraire, créer un maintenant. Ensuite, continuez avec ces instructions.
Les images radio
Obtenir ou créer deux images. L'une des images représente un bouton radio vérifié et on représente un bouton radio sans contrôle. Les deux images doivent être de la même largeur et la hauteur pour éviter une crispation ou le tremblement du contenu de la page Web lorsque l'image passe de l'un à l'autre.
Nous vous invitons à utiliser les images utilisées dans l'exemple de cet article.
Téléchargez les images à votre serveur et notez leurs URL.
La balise de formulaire doit avoir une carte d'identité. Exemple:
Effectuez les opérations suivantes pour chaque bouton radio sous la forme qui sera représentée par une image. Il y a 2 étapes pour chaque bouton radio.
Bouton radio, étape 1 -
Donnez le champ de formulaire de bouton radio un attribut id si elle ne possède pas déjà un. Voici un exemple.
La valeur id du formulaire bouton radio-dessus du champ est RadioFieldID1. Dans le code complet pour l'exemple de travail (ci-dessous), vous verrez les deux autres valeurs d'identification des boutons radio sont RadioFieldID2 et RadioFieldID3.
Remarque: Toutes les valeurs id sur une page Web doit être unique. Peuvent confondre les navigateurs Duplicates.
Note 2: Une valeur identifiant commence par une lettre alphabétique et est composé uniquement de lettres et de chiffres.
Maintenant que le champ de formulaire de bouton radio a une carte d'identité, l'envelopper dans une balise span avec affichage de style: none. Cela enlèvera son écran de la fenêtre du navigateur, mais gardez toujours une partie de la forme. Exemple:
Bouton radio, étape 2 -
Immédiatement après le champ de formulaire de bouton radio qui a été retiré de l'affichage avec une étiquette de durée, mettre l'étiquette d'image (voir ci-dessous pour les personnalisations):
Voici une liste des attributs utilisés dans tag ci-dessus img (image), avec des notes de personnalisation.
L'exemple de travail (ci-dessous) a trois boutons radio. Celle du milieu est pré-enregistrés. Voir l'exemple de travail code source présenté ci-dessous l'exemple.
Spécifier la largeur de l'image représentative de bouton radio.
Indiquez la hauteur de l'image représentant bouton radio.
Le RadioClicked () nécessite trois paramètres.
Le premier paramètre est l'identifiant du champ de formulaire de bouton radio que l'image représente.
Le deuxième paramètre est le nom du champ de formulaire du bouton radio.
Le troisième paramètre est l'identifiant de la forme (la valeur de l'identifiant de l'étiquette de forme).
Avec cette information, la fonction RadioClicked () peut changer d'état de champ de formulaire de bouton radio selon les besoins et afficher l'image représentative correcte.
Le style contient le curseur: la propriété de pointeur. Il fait le changement de curseur sur le même que lorsqu'il se trouve sur un lien.
Le champ de formulaire de bouton radio d'origine ne soit plus affichée. L'image représentative est affichée, au lieu.
Faites les deux étapes ci-dessus pour chaque bouton radio sous la forme qui sera représenté par une image.
Un exemple de travail
Voici un exemple concret de la façon dont cela fonctionne.
Et voici le code source de l'exemple de travail ci-dessus.
Avec le code présenté dans cet article tutoriel, vous pouvez utiliser une image représentative pour toutes et tous les boutons radio d'un formulaire.
Cet article était utile pour vous?
Toutes les informations dans les articles WillMaster Bibliothèque est présenté AS-IS.
Nous ne proposons et nous recommandons ce que nous croyons de la valeur. En rémunération pour le temps et la recherche implique de fournir des liens de qualité, nous utilisons généralement des liens d'affiliation quand nous le pouvons. Chaque fois que nous associons à quelque chose pas notre propre, vous devez supposer qu'ils sont des liens d'affiliation ou que nous bénéficions d'une certaine façon.