JavaScript : Radio et CheckBox Un peu de fun pour vos formulaires ...

Et pourquoi ne mettrait-on pas un peu de fun dans nos formulaires ??? Le CSS nous a déjà permis un certain nombre de folies mais pourquoi ne jouerait-on pas avec des images ...

Ce tutorial etant dedie au bouttons Radio et CheckBox, nous allons essayer de mettre en place une class et son constructeur afin de remplacer les classiques INPUT par des images.

Exemple :

Utilisation :

- Les variables :

var RC_Img = [ // Repertoire des images  "RadioCheckBox/Img/", // Images Radio ( Off - On )  ["r_0.gif", "r_1.gif"], // Images CheckBox ( Off - On )  ["c_0.gif", "c_1.gif"], // Images Submit ( Off - On )  ["s_0.gif", "s_1.gif"], // Images Browse ( Off - On )  ["b_0.gif", "b_1.gif"] ];

var RC_Data = [  [   "CHECKBOX", "RC_Form", "f_offre", "d_offre", "aaa",   [    ["Recevoir les offres AsP-PhP", "Oui", "Non", "true"]   ]  ],  [   "RADIO", "RC_Form", "f_age", "d_age", "bbb",   [    ["18-25 ans", "18-25", "selected"],    ["25-30 ans", "25-30", ""],    ["30-35 ans", "30-35", ""],    ["35-40 ans", "35-40", ""],    ["+ 40 ans", "+40", ""]   ]  ],  [   "FILE", "s_file", "d_file", "ccc"  ],  [   "BUTTON", "s_submit", "d_submit", "GetValues();"  ] ]; RC_Form etant le nom du formulaire de la page. f_offre et f_age etant le nom des inputs hidden de recuperation. s_file etant le nom de l'input type=file genere. s_submit etant le nom du boutton genere. d_offre, d_age, d_file et d_submit etant les div d'insertion des elements. aaa, bbb et ccc etant les classes CSS a utiliser. Recevoir les offres AsP-PhP etant l'intitule du CheckBox. Oui etant la valeur quand la case est cochee. Non etant la valeur quand la case est decochee. true (ou false) etant la valeur d'initialisation du CheckBox. 18-25 ans etant l'intitule du Radio. 18-25 etant la valeur du Radio. selected (ou "") etant la valeur d'initialisation du Radio. GetValues(); etant la fonction javascript associe au click sur le boutton.

- La syntaxe :

<form name="RC_Form" action="?" method="post"> <div id="d_offre"></div> <br> <div id="d_age"></div> <br> <div id="d_file"></div> <br> <div id="d_submit"></div> <script language="JavaScript"> var RC = new Radio_CheckBox( RC_Img, RC_Data ); </script> </form>

Telecharger la source