J'ai commencé à créer un formulaire en HTML/PHP, mais je me trouve confronté à un problème. J'ai quelques bases en HTML mais très peu de maîtrises (je bidouille avec ce que je trouve sur internet ).
Je voulais pouvoir avoir 3 balises input (type="checkbox") qui pourraient faire apparaître une liste déroulante en fonction de quelle balise est cochée.
Je sais qu'il y a de multiples possibilités avec JS (si il y a la possibilité de le faire en HTML/CSS je préférais) et aussi avec <optgroup> mais qui m'intéressent moins car cela regrouperais toutes les solutions, donc moins lisible.
Si vous avez une solution/question je serais ravi de vous répondre au plus vite, Merci!!
En gros, je veux créer un menus déroulant de 3 options qui feront chacune apparaître une liste déroulante à leur tour.
Pour t'expliquer un peu le projet c'est un formulaire médical ou tu dois rentrer la localisation de ton traumatisme ; Ces localisations sont séparer en plusieurs parties : tronc/tête , membres supérieurs, membres inférieurs.
Quand tu dis "accolé" c'est-à-dire lignes adjacentes?
Quand tu dis "accolé" c'est-à-dire lignes adjacentes?
Oui, il faudra que le select se situe juste après l'input.
Sookoi a écrit:
En gros, je veux créer un menus déroulant de 3 options qui feront chacune apparaître une liste déroulante à leur tour.
Pour t'expliquer un peu le projet c'est un formulaire médical ou tu dois rentrer la localisation de ton traumatisme ; Ces localisations sont séparer en plusieurs parties : tronc/tête , membres supérieurs, membres inférieurs.
Donc si je comprends bien, si l'utilisateur affiche une liste déroulante, qu'il se trompe, du coup il va vouloir en afficher une des autres (sans avoir désélectionné dans la précédente) et sélectionner une option de la nouvelle, lorsqu'il va valider le formulaire tu vas te retrouver avec des données erronées.
Attends, maintenant tu veux dire que ce sera un menu déroulant qui en fera apparaître d'autres et non des inputs feront apparaître des selects ?
- Edité par Lartak 28 mars 2020 à 21:42:08
Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.
Bonjour, concrètement quel est le code que vous avez déjà écrit et quel sont les difficultés par rapport à celui-ci.
Il faut effectivement savoir à l'avance quel comportement vas avoir l'affichage des différentes parties sur le formulaire. Quel est le parcours utilisateur, doit il remplir toutes les parties ou pas, quelles sont les champs obligatoires et ceux qui ne le sont pas.
Prenez un crayon et un papier pour établir tout ça car, au vu de vos dire, j'ai l'impression que ce n'est pas complétement réfléchi. Un fois que c'est fait on peux réfléchir à comment implémenter le tout.
Entre les checkbox, un menu déroulant, ou un menu à onglet, il y a le choix de présentation visuelle. Donc tout ceci est à préciser.
Á vous lire, j'ai compris que vous souhaitiez une fonctionnalité qui permettrait de de faire apparaitre un sélect en fonction du choix de l'utilisateur. Trois choix donc trois select différents.
En lisant votre code, je comprends que ce que vous cherchez, c'est de sélectionner un élément d'une liste déroulante (select) en fonction du choix de l'utilisateur. Donc trois choix un select. (ce qui n'est pas la même chose)
Je ne pense pas que cela soit possible en HTML/CSS car les éléments ne sont pas frère. Les options sont dans le select et pour cibler un option en particulier je ne vois que le JavaScript.
Je vous propose d'utiliser la balise <button> pour le choix de l'utilisateur, cela me parait plus adapté pour l'interaction de l'utilisateur.
Le JS est commenté de sorte que vous puissiez le comprendre, et modifier au besoin.
Question: Cette liste est elle dynamique ou statique. Les options sont susceptible de changer dynamiquement ou pas? Si non le code suivant pourrait convenir.
<body>
<form action="test.php" method="post">
<div class="c100">
<button id="btn1" type="button" >Select Membres inférieur</button>
<button id="btn2" type="button" >Select Membres supérieur</button>
<button id="btn3" type="button" >Select Tronc/Tête</button>
</div>
<div>
<label for="loca">Localisation</label>
<select id="loca" name="loca">
<optgroup label="Membres inférieur">
<option value="Pied">Pied</option>
<option value="Cheville">Cheville</option>
<option value="Jambe">Jambe</option>
<option value="Genou">Genou</option>
<option value="Cuisse">Cuisse</option>
<option value="Aine">Aine</option>
<option value="Coxo-fémorale">Coxo-fémorale</option>
</optgroup>
<optgroup label="Membres supérieur" >
<option value="Scapulo Huméral">Scapulo Huméral</option>
<option value="Clavicule">Clavicule</option>
<option value="Acromio claviculaire">Acromio claviculaire</option>
<option value="Bras">Bras</option>
<option value="Coude">Coude</option>
<option value="Av Bras">Av Bras</option>
<option value="Poignet">Poignet</option>
<option value="Main">Main</option>
<option value="Doigt">Doigt</option>
</optgroup>
<optgroup label="Tronc/Tête">
<option value="Fessiers">Fessiers</option>
<option value="charniere LS">charniere LS</option>
<option value="rachis lombaire">rachis lombaire</option>
<option value="Charniere TL">Charniere TL</option>
<option value="Rachis Thoracique">Rachis Thoracique</option>
<option value="Charniere CT">Charniere CT</option>
<option value="Rachis Cervical">Rachis Cervical</option>
</optgroup>
</select>
</div>
<input type="submit">
</form>
<script>
// PARAM
// Les paramètres ci-dessous correspondent à l’emplacement des options cibles du select.
// Attention le premier option possède l’index 0, le deuxième l’index 1 etc….
indexBtn1 = 0;
indexBtn2 = 7;
indexBtn3 = 16;
// FIN PARAM
select = document.getElementById("loca"); // la liste déroulante
// les évènements sur les boutons
document.getElementById('btn1').addEventListener('click', function () {
select.options[indexBtn1].selected = true;
});
document.getElementById('btn2').addEventListener('click', function () {
select.options[indexBtn2].selected = true;
});
document.getElementById('btn3').addEventListener('click', function () {
select.options[indexBtn3].selected = true;
});
</script>
</body>
Est-ce ce que vous cherchez?
PS : attention dans le code que vous nous avez transmis, il y a des erreurs. La valeur de l'attribut for correspond à la valeur de l'attribut id de l'input correspondant. La valeur d'un identifiant ne peut comporter un espace et pas de caractère accentué, c'est de même pour la valeur de l'attribut for.
Le conditionnel sur un formulaire HTML
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.
Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.
Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.