Maison > interface Web > js tutoriel > Comment créer dynamiquement un formulaire en utilisant JavaScript

Comment créer dynamiquement un formulaire en utilisant JavaScript

WBOY
Libérer: 2023-09-13 23:53:08
avant
915 Les gens l'ont consulté

如何使用 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);
Copier après la connexion
    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”);
Copier après la connexion
    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);
Copier après la connexion

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");
Copier après la connexion

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

userName.setAttribute("placeholder", "Name");
Copier après la connexion

É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);
Copier après la connexion

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

Étape 8Utilisez 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 9Cliquez 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.



   Create form dynamically with js

   
   

*Student registration 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>
Copier après la connexion

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!

source:tutorialspoint.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal