Bonjour,

Je suis débutante en programmation, j'ai suivi quelques cours sur Javascript, et là je tente de m'initier à JQuery.
Pour un TP trouvé en ligne, je dois créer un générateur de formulaires.
J'ai plus ou moins réussi à coder ce générateur, enfin... disons que j'ai une base...
Je bloque car tout mes label et input s'affiche sur la même ligne alors que je voudrais qu'ils s'affiche les uns en dessous des autres mais je ne sais pas comment faire.

Voici mon code :
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      body {
        margin: 0;
      }
      #gauche {
        float: left;
        width: 70%;
        height: 1000px;
        background-color: #EFECCA;
      }
      #droite {
        background-color: #CEFFF8;
        height: 1000px;
        padding : 10px;
        padding-left: 71%;
      }
    </style>
  </head>
  <body>
    <div id="gauche">
    </div>
    <div id="droite">
      Utilisez ces boutons pour créer votre formulaire<br><br>
      <button>Label</button>
      <button>Zone de texte</button>
      <button>Bouton</button><br><br>
    </div>
 
    <script src="../JQUERY/jQuery.js"></script>
    <script src="../JAVASCRIPT/activite.js"></script>
  </body>
</html>

et jQuery:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
$(function(){
 
    var coteG = $("#gauche");
    var coteD = $("#droite");
 
    //Ajoute un FORM à gauche:
    var formGauche = $("<form></form>").appendTo(coteG);
    formGauche.css("margin-top", "50px");
 
    //AJOUTE UNE SEPRATION A DROITE
    coteD.append("<hr>");
 
 
 
    //REACTION AU CLIC SUR LE BOUTON LABEL
    $("#droite button:first").on("click", function(){
 
 
        coteD.append("<div id='labelElmt'> <p>Texte du label: <input type='text' id='inputLabel' > <button id='boutonOK'> OK </button> </p> </div>");
 
        //REACTION AU CLIC SUR BOUTON VALIDER
        $("#boutonOK").on("click", function(){
            //sauvegarde la valeur de l'input:
            var titreLabel = $("#inputLabel").val();
            //l'ajoute à la balise <form> de gauche:
            formGauche.append("<span>" + titreLabel + "</span>");
            //efface le formulaire:
            $("#labelElmt").remove();      
        });
    });
 
    $("#droite button:eq(1)").on("click", function() {
 
 
        coteD.append("<div id='idElt'> <p>id de la zone de texte: <input type='text' id='input2'> <button id='boutonOK2'> OK </button> </p> </div>");
 
        $("#boutonOK2").click(function(){
            var textId = $("#input2").val();
            formGauche.append("<input id='newInput' type='text' id=" + textId + " ></input>");
            $("#newInput").css("margin-left", "50px");
            $("#idElt").remove();
        });
 
    });
 
 
 
    $("#droite button:last").click(function(){
 
        coteD.append("<div id='buttonElt'> <p>Texte du bouton: <input type='text' id='input3'> <button id='boutonOK3'> OK </button> </p> </div>");
 
        $("#boutonOK3").click(function(){
            var textButton = $("#input3").val();
            coteG.append("<button id='valider'>" + textButton + "</button>")
            $("#valider").css("margin-top", "50px");
            $("#buttonElt").remove();
        });
 
     });
 
});
Est-ce que vous pourriez me donner un coup de main pour sortir de l'impasse ?
Merci d'avance.