JavaScript 如何动态创建表单

概述

可以使用Document Object Model（DOM）中的一些方法，如 createElement() 、 setAttribute() 和 appendChild() 来完全动态地创建HTML表单。这些DOM方法将帮助我们构建动态的HTML表单。我们创建动态表单的方法是在脚本标签中创建所有元素，设置属性以添加一些功能，并在准备好提供的元素的父元素中将其附加。因此，附加在父表单标签中的所有元素都是子元素。

语法

在此任务中使用的语法如下：

使用 createElement() 方法来创建任何HTML元素。例如：div、button、p、label等。

document.createElement(elements);

setAttribute() 方法用于在元素中插入属性。在setAttribute()方法中，值传递为键值对形式。示例：（”placeholder”，”名称”），（”type”，”提交”），（”value”，”提交”）等。

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

appendChild() 方法将使用createElement()创建的元素插入到任何body标签中。将直接元素的元素引用作为参数传递给appendChild()。

parentElement.appendChild(element);

步骤

步骤1 －在你的编辑器上创建一个简单的HTML基本代码。还要创建一个按钮和一个 form 标签，动态表单将加载在其中。

步骤2 －在 script 标签内创建一个箭头函数。

步骤3 －现在使用 document.getElementById() 将表单赋值给一个变量，因为 form 标签是通过id名称定义的。

步骤4 －从这里开始构建动态表单。使用 document 的 createElement() 方法创建一个新元素。

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

步骤5 − 现在使用setAttribute（）方法在上面创建的元素中设置属性。

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

步骤6 − 使用appendChild()方法将上述创建的元素附加在父元素上，父元素的id为“dform”，名称为“form”。

dform.appendChild(userName);

步骤7 − 重复步骤4～步骤6，并创建表单的所有必需字段。

步骤8 − 使用createElement()创建另一个div元素，分别创建两个按钮submit和reset，并将这两个按钮附加在其中。

步骤9 − 点击“生成表单”按钮，将触发“gForm（）”函数，动态生成表单。

示例

在给定的示例中，我们使用Javascript构建了一个表单。因此，与body标签内的元素一样，表单标签内的元素都不是静态构建的。该表单包含用于学生注册的某些字段。这些字段是姓名、电子邮件、地址、出生日期、电话号码，因此所有这些都是从script标签动态呈现的。

<html>
<head>
   <title>Create form dynamically with js</title>
</head>
   <body style="height: 90vh; width: 50%;display:flex;flex-direction: column;place-content: center; margin: auto;">
   <p style="margin: 0 auto;">*Student registration form</p>
   <button style="margin: 0.5rem auto;width: 10rem;" onclick="gForm()"> Generate Form </button>
   <form id="dynamicForm"> </form>
   <script>
      gForm = () => {
         var dform = document.getElementById("dynamicForm");
         dform.setAttribute("style", "display:flex;flex-direction:column")

         // dform.innerHTML=""
         var userName = document.createElement("input");
         userName.setAttribute("placeholder", "Name");
         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>
</body>
</html>

在下图中显示了上述示例的输出，它显示了学生注册表生成按钮。当未点击生成表单按钮时，显示一个简单的页面如下所示。

当上述“生成表单”按钮被点击时，脚本标签中创建的箭头函数将被触发，其结果是显示一个动态生成的学生注册表中的所有必填字段。