Comment créer dynamiquement un formulaire en utilisant JavaScript

Vue d'ensemble

Pour créer un formulaire HTML entièrement dynamique, vous pouvez utiliser certaines méthodes DOM (Document Object Model) telles que createElement(), setAttribute(), appendChild(). Ces méthodes DOM nous aideront à créer des formulaires HTML dynamiques. La façon dont nous construisons ce formulaire dynamique consiste à créer tous les éléments dans des balises de script, à définir des propriétés pour ajouter des fonctionnalités, et enfin, lorsque notre élément est prêt à être servi, nous l'ajoutons à l'élément parent de l'élément. Par conséquent, tous les éléments ajoutés dans la balise de formulaire parent sont des éléments enfants.

Grammaire

Syntaxe utilisée dans cette tâche -

La méthode

• createElement() est utilisée pour créer n'importe quel élément HTML. Exemple : div, bouton, p, étiquette, etc.

document.createElement(elements);

La méthode

• setAttribute() est utilisée pour insérer des attributs dans des éléments. Les valeurs de la méthode setAttribute() sont transmises sous forme de paires clé-valeur. Par exemple : ("Placeholder", "Name"), ("Type", "Submit"), ("Value", "Submit"), etc.

element.setAttribute(“Key”,“Value”);

La méthode

• appendChild() insère l'élément que nous avons créé à l'aide de createElement() dans n'importe quelle balise body. La référence d'élément de l'élément direct est passée en argument à appendChild().

parentElement.appendChild(element);

Algorithme

Étape 1 −Créez un code passe-partout HTML simple dans l'éditeur. Créez également un bouton et une étiquette de formulaire où notre formulaire dynamique se chargera.

Étape 2 − Créez une fonction de flèche JavaScript à l'intérieur de la balise de script.

Étape 3− Utilisez maintenant document.getElementById() pour obtenir le formulaire dans la variable puisque la balise form est définie par le nom de l'ID.

Étape 4 − Commencez à créer votre formulaire dynamique ici. Créez un nouvel élément à l'aide de la méthode createElement() du document.

var userName = document.createElement("input");

Étape 5 − Utilisez maintenant la méthode setAttribute() pour définir les attributs dans l'élément créé ci-dessus.

userName.setAttribute("placeholder", "Name");

Étape 6 − Utilisez la méthode appendChild() pour ajouter l'élément créé ci-dessus à l'élément parent "form" en tant que nom d'identification "dform".

dform.appendChild(userName);

Étape 7 − Répétez les étapes 4 à 6 et créez tous les champs obligatoires du formulaire.

Étape 8− Utilisez createElement() pour créer un autre élément div, créez deux boutons pour soumettre et réinitialiser respectivement, et attachez-y ces deux boutons.

Étape 9−Cliquez sur le bouton "Générer le formulaire", qui déclenchera la fonction "gForm()" et générera dynamiquement le formulaire.

Exemple

Dans l'exemple donné, nous avons construit un formulaire en utilisant Javascript. Par conséquent, tous les éléments de la balise form ne sont pas construits de manière aussi statique qu’ils le seraient avec des éléments de la balise body. Ce formulaire contient certains champs pour l'inscription des étudiants. Les champs sont le nom, l'e-mail, l'adresse, la date de naissance, le numéro de téléphone, donc tous ces éléments sont rendus dynamiquement à partir des balises de script.

   

   
   
*Student registration form
    Generate Form 
   
 
   <script>
      gForm = () => {
         var dform = document.getElementById("dynamicForm");
         dform.setAttribute("style", "display:flex;flex-direction:column")
         
         // dform.innerHTML=""
         var userName = document.createElement(&quot;input&quot;);
         userName.setAttribute(&quot;placeholder&quot;, &quot;Name&quot;);
         dform.appendChild(userName);
         var userEmail = document.createElement("input");
         userEmail.setAttribute("placeholder", "Email");
         userEmail.setAttribute("type", "email");
         dform.appendChild(userEmail);
         var userAdd = document.createElement("input");
         userAdd.setAttribute("placeholder", "Address");
         dform.appendChild(userAdd);
         var userDob = document.createElement("input");
         userDob.setAttribute("placeholder", "D.O.B");
         userDob.setAttribute("type", "date");
         dform.appendChild(userDob);
         var userPhn = document.createElement("input");
         userPhn.setAttribute("placeholder", "Phone number");
         dform.appendChild(userPhn);
         var sBtn = document.createElement("input");
         sBtn.setAttribute("value", "submit");
         sBtn.setAttribute("type", "submit");
         var rBtn = document.createElement("input");
         rBtn.setAttribute("value", "reset");
         rBtn.setAttribute("type", "reset");
         var btns = document.createElement("div");
         btns.setAttribute("style","margin:0.4rem auto")
         dform.appendChild(btns);
         btns.appendChild(sBtn);
         btns.appendChild(rBtn);
      }
   </script>

Dans l'image ci-dessous, elle montre le résultat de l'exemple ci-dessus, où le bouton de génération du formulaire d'inscription étudiant est affiché. Lorsque vous ne cliquez pas sur le bouton Générer un formulaire, il affiche une page simple comme indiqué ci-dessous.

Lorsque vous cliquez sur le bouton "Générer le formulaire" ci-dessus, la fonction flèche créée dans la balise de script est déclenchée et le résultat est un formulaire généré dynamiquement avec tous les champs requis pour l'inscription des étudiants.

Conclusion

En accomplissant cette tâche, nous pouvons créer n'importe quel élément dynamique dans une page Web. Le contenu dynamique d'une page Web accélère le chargement de la page car le serveur n'a pas à répondre à l'intégralité du code énorme au début lors du chargement de la page. Les formulaires dynamiques rendent également les pages plus interactives.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!