[formulaire] dynamique [résolu, merci bl@p] + imput personnalisé

+ imput personnalisé [formulaire] dynamique [résolu, merci bl@p] - HTML/CSS - Programmation

Marsh Posté le 02-08-2005 à 14:10:15    

bonjour je voudrais creer un formulaire (on m'a dit que ct en javascript)
je vais expliquer par un exemple :
 
menu déroulant : 1
                 2
                 3
 
ensuite si 1 => une case à cocher ou non
si 2 => un choix entre  2 cases
si 3 => un champ de texte de taille 10
 
comment dois-je faire?
 
2eme question:  
Dans mon formulaire je voudrais pouvoir mettre un champ du type
50% blanc   50% noir => si on augmente le blanc, ça diminue le noir automatiquement. avec un graphique  une regle graduée en haut de 0 à 100 et un bas de 100 à 0 et que l'on puisse faire bouger le curseur... :pt1cable:  
 
 
merci de votre aide
ciao
 
JL :bounce:  :bounce:  :bounce:


Message édité par joyeuxlutin le 02-08-2005 à 22:23:05
Reply

Marsh Posté le 02-08-2005 à 14:10:15   

Reply

Marsh Posté le 02-08-2005 à 14:22:43    

t'a pas un debut de code ??
 
[SPECIAL M ORHTOGRAPHE]
tu n'aurais pas un début de code ? :O
[/SPECIAL M ORHTOGRAPHE]


Message édité par bl@p_psx le 02-08-2005 à 14:24:17

---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 02-08-2005 à 20:19:50    

c justement ça que je cherche, un début de code :s j'ai trouvé vaguement un script qui pourrai me servir mais bon...

Code :
  1. <html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
  2.    <head><title>Test de formulaire dynamique</title></head>
  3.     <body>
  4.        <script language="javascript">
  5.       function add_line(){
  6.          document.getElementById('toto').innerHTML = '<input type="text" value="aaaaa" />';
  7.       }
  8.       </script>
  9.      <input class="button" type="button" name="TEST" id="TEST" value="Cliquez-moi" onClick="add_line()"/>
  10.    <div id="toto"></div>
  11.    </body>
  12. </html>


 
mais je ne vois pas comment l'arranger pour mon cas
de plus ça ne réponds pas à ma 2eme question  :whistle:

Reply

Marsh Posté le 02-08-2005 à 20:24:20    

detaille un peu plus le point 2
 
sinon, pour le point 1, tu creer ton formulaire entier, avec, dans des div separer les parties "visible" "cas1" "cad2" et "cas3" ( en veillant a mettre des id differents pour chaque cas )
 
en CSS tu cache les divs ( display:none )
puis en JS, en fonction de ce qui est selectionner, tu change le display ...
 
@+


---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 02-08-2005 à 20:29:40    

ah ouééééé bonne idée pour le CSS, pour la fonction javascript je vois pas trop (je suis une breloque en javascript)  
si quelqu'un pouvait me la faire  :sweat:  :sweat:  :sweat:  
 
pour la question 2 :  
 

Code :
  1. blanc            50%     
  2.          --------|--------
  3. noir :           50%     
  4. blanc 100%   
  5.          |----------------
  6. noir : 0%


 
avec le | qui es le curseur

Reply

Marsh Posté le 02-08-2005 à 20:57:58    

et ca change quoi au niveau d'eventuelle variables ??


Message édité par bl@p_psx le 02-08-2005 à 21:04:13

---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 02-08-2005 à 21:10:44    

bon, voilà un code qui fonctionne, pas terrible ( accessibilité .... :( ) mais je suis pas doué en JS non plus ...
 
visible ici : http://blap.serveftp.com/test/index.php
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
  3. <head>
  4. <!--CSS-->
  5. <link rel="stylesheet" href="style.css" type="text/css" />
  6.  <title>test</title>
  7. <script type="text/javascript">
  8. function efface() {
  9.  for(i=1;i<4;i++) {
  10.  var div_cache = document.getElementById('cas'+i);
  11.  div_cache.style.visibility = 'hidden';
  12.  }
  13. }
  14. function affiche(id) {
  15. var id = id.substr(3,6)
  16.  var div_cache = document.getElementById(id);
  17.  efface();
  18.  div_cache.style.visibility = 'visible';
  19. }
  20. </script>
  21. </head>
  22. <body>
  23. <div id="form">
  24.  <form name="formulaire" method="post" action="index.php" enctype="multipart/form-data">
  25.   <div id="visible">
  26.    <select name="id_cat" onchange="affiche(this.options[this.selectedIndex].id)">
  27.     <option>&nbsp;</option>
  28.     <option id="id_cas1">Cas1</option>
  29.     <option id="id_cas2">Cas2</option>
  30.     <option id="id_cas3">Cas3</option>
  31.    </select>
  32.   <div id="cas1">
  33.    <label for="chexbox_cas1">Cas1</label><input type="chexbox" id="chexbox_cas1" name="chexbox_cas1" value="chexbox_cas1"/>
  34.   </div>
  35.   <div id="cas2">
  36.    <label for="radio_cas2">Cas2-1</label><input type="radio" id="chexbox_cas1" name="chexbox_cas1"  />
  37.    <label for="radio_cas21">Cas2-2</label><input type="radio" id="chexbox_cas2" name="chexbox_cas1"  />
  38.   </div>
  39.   <div id="cas3">
  40.    <label for="">Cas3</label><input type="text" id="buton_cas3" name="bouton_cas3" size="10" />
  41.   </div>
  42.   <input type="submit" name="envoyer" />
  43.   </div>
  44.  </form>
  45. </div>
  46. </body>
  47. </html>


---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 02-08-2005 à 22:09:25    

merci bcppppppppppppppppppppppp  :love:
 
Pr la question 2 bin on va dire qu'il y a une variable blanc et une noire.
Quand tu fais varier le curseur ça change les variables.
Simplement ce que je veux c'est qu'elles soient liées de la manière ci-dessus je sais pas si t'as compris, sinon j'explique d'une autre manière
 
En fait je vais m'en servir pr la création d'un jeu. Tu pourra creer tes unités, et par exemple les attributs seront liés del a manière suivante.
Vitesse = 1 - armure   d'ou l'interet pour rendre ceci plus ludique de creer une sorte de barre avec un curseur :)


Message édité par joyeuxlutin le 02-08-2005 à 22:14:59
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed