Aide en programmation web

Katsuo49 -  
Bonjour,
je cherche à savoir comment fonctionne une barre défilante avec une flèche comme on trouve avec les zone de recherche mais je voudrais en faire une sans texte à taper et sans bouton de validation comme celui-ci :

http://www.genesis-fr.com/index.php?page=genesis&iddisco=2

merci d'avance
Configuration: Windows XP
Firefox 2.0.0.8

13 réponses

  • Votes
  • Date
  • Date décroissante
  1. HACKER 712 Contributeur
    salut !

    va voir le formulaire orrespondant sur le site du zero !
    1. Psyk974
      Bonjour,

      Alors pour cela tu dois utiliser les évènements

      Voici une liste déroulante classique dans un formulaire 

      <form name="form" method="POST" action="traitement.php">
     <select name="selection">
          <option value=""></option>
          <option value="1">1</option>
          ...
     </select>
</form>


      Pour que ce formulaire se poste tout seul tu dois rajouter l'évènement "onchange" sur ta liste déroulante. Cet évènement devra contenir du code javascript qui permettra d'envoyer ton formulaire automatiquement lorsque tu vas sélectionner un élément. 

      <form name="form" method="POST" action="traitement.php">
     <select name="selection" onchange="this.form.submit();">
          <option value=""></option>
          <option value="1">1</option>
          ...
     </select>
</form>


      Voila
      2. Katsuo49
        Psyk974 ton code est super mais comme j'arrivais pas à trouver quoi mettre pour avoir un lien différent pour chaque ligne, j'ai récupéré le code, du site que je disais (je l'ai repéré en m'aidant du tien) j'arrive à faire une liste défilante avec un lien par ligne mais dès que je l'intègre à ma page, c'est à dire dans un tableau de manière à en avoir 3 alligné horizontalement, les lien fonctionne plus et je n'arrive pas à les alligné sans tableau sans leur faire perdre les lien.

        Est ce que quelqu'un sait comment faire ??
        2. Katsuo49
          Quelqu'un purrait pas m'aider
          1. Psyk974
            Assure toi quand ta balise <table> est bien entre les balises <form> et </form>
        3. Katsuo49
          du coup mes liste défilante sont plus alligné mais elle ne fonctionne toujours pas
          1. Psyk974
            Montre ton code
        4. Katsuo49
          <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
          <html>
          <head>
          <meta http-equiv="content-type"
          content="text/html; charset=ISO-8859-1">
          <title>index</title>
          </head>
          <body style="background-image: url(images/arriere_plan.jpg);">
          <table style="text-align: left; width: 540px;" border="1"
          cellpadding="2" cellspacing="2">
          <tbody>
          <tr>
          <td>
          <embed type="application/x-shockwave-flash"
          src="file:///C:/Program%20Files/YGO_Base_de_Donn%E9e/images/banniere.swf"
          style="" id="pub" name="pub" quality="high"
          wmode="transparent" flashvars="id_ban=9" height="400"
          width="1255"></td>
          </tr>
          </tbody>
          <table style="text-align: left; width: 1267px; height: 388px;"
          border="0" cellpadding="2" cellspacing="2">
          <tbody>
          <tr>
          <td
          style="vertical-align: top; width: 418px; text-align: center; height: 500px;"><br>
          <br>
          <form name="slb">
          </table>
          <p align="center">
          <select name="sb" size="1"
          onchange="parent.location.href=document.slb.sb.options[document.slb.sb.selectedIndex].value;">
          <option>Choisissez un Booster ou un Pack</option>
          <option
          value="la_legende_du_dragon_blanc_aux_yeux_bleus.html">La
          Légende du Dragon Blanc au Yeux Bleus</option>
          <option value="metal_raider.html">Metal
          Raider</option>
          <option value="le_maitre_des_magies.html">Le
          Maêtre des Magie</option>
          <option value="serviteur_du_pharaon.html">Le
          Serviteur du Pharaon</option>
          <option value="labyrinthe_des_cauchemars.html">Le
          Labyrinthe des Cauchemars</option>
          <option value="sanctuaire_ancestral.html">Sanctuaire
          Ancestral</option>
          <option value="avenement_du_destin.html">Avènement
          du Destin</option>
          <option value="eternite_brulante.html">Eternité
          Brûlante</option>
          <option value="l_ame_du_duelliste.html">L'Âme
          du Duelliste</option>
          <option value="le_millenaire_perdu.html">Le
          Millénaire Perdu</option>
          <option value="revolution_cybernetique.html">Révolution
          Cybernétique</option>
          <option value="sombre_revelation_1.html">Sombre
          Révélation 1</option>
          <option value="genese_tenebreuse_2.html">Genèse
          Ténébreuse 2</option>
          <option value="sombre_revelation_2.html">Sombre
          Révélation 2</option>
          <option value="energie_elementaire.html">Energie
          Elémentaire</option>
          <option value="l_ombre_de_l_infini.html">L'Ombre
          de l'Infini</option>
          <option value="ennemi_du_bien.html">Ennemi
          du Bien</option>
          <option value="puissance_du_duelliste.html">Puissance
          du Duelliste</option>
          <option value="l_impact_des_cybertenebreux.html">L'Impact
          des Cyberténébreux</option>
          <option value="sombre_revelation_3.html">Sombre
          Révélation 3</option>
          <option value="l_attaque_de_neos.html">L'Attaque
          de Néos</option>
          <option value="force_du_destructeur.html">Force
          du Destructeur</option>
          <option value="invasion_des_tenebres.html">Invasion
          des Ténèbres</option>
          <option value="evolution_tactique.html">Evolution
          Tactique</option>
          <option value="l_assaut_du_gladiateur.html">L'Assaut
          du Gladiateur</option>
          <option value="tenebres_fantome.html">Ténèbres
          Fantômes</option>
          <option value="lumiere_de_la_destruction.html">Lumière
          de la Destruction</option>
          <option value="la_genese_du_duelliste.html">La
          Genèse du Duelliste</option>
          <option value="la_croise_du_chaos.html">La
          Croisé du Chaos</option>
          <option value="la_crise_ecarlate.html">La
          Crise Ecarlate</option>
          </select>
          </p>
          </form>
          <img style="width: 150px; height: 250px;" alt="Booster"
          src="images/image_booster.jpg"></td>
          <td
          style="vertical-align: top; width: 403px; text-align: center; height: 500px;"><br>
          <br>
          <form name="slb">
          <p align="center">
          <select name="sb" size="1"
          onchange="parent.location.href=document.slb.sb.options[document.slb.sb.selectedIndex].value;">
          <option>Choisissez un Deck de Démarage ou de
          Structure</option>
          <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
          AFFICHE</option>
          <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
          AFFICHE</option>
          <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
          AFFICHE</option>
          <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
          AFFICHE</option>
          <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
          AFFICHE</option>
          <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
          AFFICHE</option>
          <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
          AFFICHE</option>
          <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
          AFFICHE</option>
          <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
          AFFICHE</option>
          <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
          AFFICHE</option>
          <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
          AFFICHE</option>
          </select>
          </p>
          </table>
          </form>
          <img style="width: 184px; height: 250px;" alt="Deck"
          src="images/image_deck.jpg"><br>
          <br>
          </td>
          <td style="vertical-align: top; width: 418px;"></td>
          </tr>
          </tbody>
          <div style="text-align: center;"><small>Yu-Gi-Oh!
          liste de carte: réalisé par le site
          http://mangamania49.oldiblog.com</small></div>
          </body>
          </html>
          1. Katsuo49
            je t'ai mis le code de toute la page
            1. Psyk974
              Pourquoi tu fais trois formulaire tu peux pas tout mettre dans le même ?

              Je te donne une arborescence à toi d'adapter

              <form name="slb">
              <table>
              <tr>
              <td>
              <select name="1" onchange=".........>
              </select>
              </td>
              <td>
              <select name="2" onchange=".........>
              </select>
              </td>
              <td>
              <select name="3" onchange=".........>
              </select>
              </td>
              </tr>
              </table>
              </form>
          3. Katsuo49
            j'ai fais ce que tu m'a dis mais j'ai bien mes 3 onglet avec la flèche quand je clique sur la flèche ils se déroule mais quand je clique dessus il se passe rien
            1. Psyk974
              J'espere que tu as bien mis le onchange avec la commande Javascript qui va avec ?
          4. Katsuo49
            ça me donne ça:

            <form name="slb">
            <table>
            <tr>
            <td>
            <select name="sb" size="1"
            onchange="parent.location.href=document.slb.sb.options[document.slb.sb.selectedIndex].value;">
            <option>Choisissez un Booster ou un Pack</option>
            <option
            value="la_legende_du_dragon_blanc_aux_yeux_bleus.html">La
            Légende du Dragon Blanc au Yeux Bleus</option>
            <option value="metal_raider.html">Metal
            Raider</option>
            <option value="le_maitre_des_magies.html">Le
            Maêtre des Magie</option>
            <option value="serviteur_du_pharaon.html">Le
            Serviteur du Pharaon</option>
            <option value="labyrinthe_des_cauchemars.html">Le
            Labyrinthe des Cauchemars</option>
            <option value="sanctuaire_ancestral.html">Sanctuaire
            Ancestral</option>
            <option value="avenement_du_destin.html">Avènement
            du Destin</option>
            <option value="eternite_brulante.html">Eternité
            Brûlante</option>
            <option value="l_ame_du_duelliste.html">L'Âme
            du Duelliste</option>
            <option value="le_millenaire_perdu.html">Le
            Millénaire Perdu</option>
            <option value="revolution_cybernetique.html">Révolution
            Cybernétique</option>
            <option value="sombre_revelation_1.html">Sombre
            Révélation 1</option>
            <option value="genese_tenebreuse_2.html">Genèse
            Ténébreuse 2</option>
            <option value="sombre_revelation_2.html">Sombre
            Révélation 2</option>
            <option value="energie_elementaire.html">Energie
            Elémentaire</option>
            <option value="l_ombre_de_l_infini.html">L'Ombre
            de l'Infini</option>
            <option value="ennemi_du_bien.html">Ennemi
            du Bien</option>
            <option value="puissance_du_duelliste.html">Puissance
            du Duelliste</option>
            <option value="l_impact_des_cybertenebreux.html">L'Impact
            des Cyberténébreux</option>
            <option value="sombre_revelation_3.html">Sombre
            Révélation 3</option>
            <option value="l_attaque_de_neos.html">L'Attaque
            de Néos</option>
            <option value="force_du_destructeur.html">Force
            du Destructeur</option>
            <option value="invasion_des_tenebres.html">Invasion
            des Ténèbres</option>
            <option value="evolution_tactique.html">Evolution
            Tactique</option>
            <option value="l_assaut_du_gladiateur.html">L'Assaut
            du Gladiateur</option>
            <option value="tenebres_fantome.html">Ténèbres
            Fantômes</option>
            <option value="lumiere_de_la_destruction.html">Lumière
            de la Destruction</option>
            <option value="la_genese_du_duelliste.html">La
            Genèse du Duelliste</option>
            <option value="la_croise_du_chaos.html">La
            Croisé du Chaos</option>
            <option value="la_crise_ecarlate.html">La
            Crise Ecarlate</option>
            </select>
            </td>
            <td>
            <select name="sb" size="1"
            onchange="parent.location.href=document.slb.sb.options[document.slb.sb.selectedIndex].value;">
            <option>Choisissez un Deck de Démarage ou de Structure</option>
            <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
            AFFICHE</option>
            <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
            AFFICHE</option>
            <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
            AFFICHE</option>
            <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
            AFFICHE</option>
            <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
            AFFICHE</option>
            <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
            AFFICHE</option>
            <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
            AFFICHE</option>
            <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
            AFFICHE</option>
            <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
            AFFICHE</option>
            <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
            AFFICHE</option>
            <option value="NOM DE LA PAGE AVEC EXTENSION">MOTS
            AFFICHE</option>
            </select>
            </td>
            </tr>
            </table>
            </form>
            1. Psyk974
              Chez moi ça fonctionne a merveille avec onchange="this.form.submit();"

              Utilise ce qu'on te donne c'est pas pour rien lol

          5. Katsuo49
            je vien de tout reprendre pour réésayer avec le tien

            il ne trouve pas la page
            et l'adresse qu'il marque c'est : file:///E:/traitement.php
            il me marque exactement la même chose quelque soit la ligne que je selectionne

            voila le code de la page :
            <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
            <html>
            <head>
            <meta http-equiv="content-type"
            content="text/html; charset=ISO-8859-1">
            <title>index</title>
            </head>
            <body style="background-image: url(images/arriere_plan.jpg);">
            <table style="text-align: left; width: 540px;" border="1"
            cellpadding="2" cellspacing="2">
            <tbody>
            <tr>
            <td>
            <embed type="application/x-shockwave-flash"
            src="file:///C:/Program%20Files/YGO_Base_de_Donn%E9e/images/banniere.swf"
            style="" id="pub" name="pub" quality="high"
            wmode="transparent" flashvars="id_ban=9" height="400"
            width="1255"></td>
            <form name="form" method="POST" action="traitement.php">
            <select name="selection" onchange="this.form.submit();">
            <option value="le_maitre_des_magies.htm">le maitre des magies</option>
            <option value="1">1</option>
            </select>
            </form>
            </tbody>
            <div style="text-align: center;"><small>Yu-Gi-Oh!
            liste de carte: réalisé par le site
            http://mangamania49.oldiblog.com</small></div>
            </body>
            </html>
          6. Katsuo49
            je vien de RE fouiller dans ce site mais je n'est pas trouvé comment faire pour créer une liste avec auto-validation
            1. Psyk974
              Le but ici est de savoir comment utiliser les formulaires avec le PHP pas de faire une auto validation ;)

          Discussions similaires

          Comment s’inscrire sur célibataire du web
          Mimi412

          6 réponses
          Que veux dire exclu web et quelle avantage ?
          Cauchie

          7 réponses
          WEBCHOC pourquoi ce site n'est pas interdit?
          Arm56-ddl

          49 réponses