如何使用JavaScript动态创建表单？

任务是在JavaScript的帮助下动态创建HTML表单。下面讨论了两种方法。

方法1：采用document.createElement()创建新元素并使用setAttribute()设置元素属性的方法。将这些元素附加到<form>元素依据appendChild()方法。最后附加<form>元素<body>文档的元素。本示例创建一个注册表单。

例子：

<!DOCTYPE html>
<html>
     <head>
         <title>
             Create a Form Dynamically with 
             the JavaScript
         </title>
     </head>
     <body style = "text-align: center;">
         <h1 style = "color: green;">
             lsbin
         </h1>
         <p>
           Click on the button to create
           a form dynamically
         </p>
         <button onClick = "GFG_Fun()">
             click here
         </button>
         <p id = "GFG_DOWN"></p>
  <script>
     var down = document.getElementById("GFG_DOWN");
            
     // Create a break line element
     var br = document.createElement("br"); 
     function GFG_Fun() {
                
     // Create a form synamically
     var form = document.createElement("form");
     form.setAttribute("method", "post");
     form.setAttribute("action", "submit.php");
  
     // Create an input element for Full Name
     var FN = document.createElement("input");
     FN.setAttribute("type", "text");
     FN.setAttribute("name", "FullName");
     FN.setAttribute("placeholder", "Full Name");
  
      // Create an input element for date of birth
      var DOB = document.createElement("input");
      DOB.setAttribute("type", "text");
      DOB.setAttribute("name", "dob");
      DOB.setAttribute("placeholder", "DOB");
  
      // Create an input element for emailID
      var EID = document.createElement("input");
      EID.setAttribute("type", "text");
      EID.setAttribute("name", "emailID");
      EID.setAttribute("placeholder", "E-Mail ID");
  
       // Create an input element for password
       var PWD = document.createElement("input");
       PWD.setAttribute("type", "password");
       PWD.setAttribute("name", "password");
       PWD.setAttribute("placeholder", "Password");
  
        // Create an input element for retype-password
        var RPWD = document.createElement("input");
        RPWD.setAttribute("type", "password");
        RPWD.setAttribute("name", "reTypePassword");
        RPWD.setAttribute("placeholder", "ReEnter Password");
  
                 // create a submit button
                 var s = document.createElement("input");
                 s.setAttribute("type", "submit");
                 s.setAttribute("value", "Submit");
                  
                 // Append the full name input to the form
                 form.appendChild(FN); 
                  
                 // Inserting a line break
                 form.appendChild(br.cloneNode()); 
                  
                 // Append the DOB to the form
                 form.appendChild(DOB); 
                 form.appendChild(br.cloneNode()); 
                  
                 // Append the emailID to the form
                 form.appendChild(EID); 
                 form.appendChild(br.cloneNode()); 
                  
                 // Append the Password to the form
                 form.appendChild(PWD); 
                 form.appendChild(br.cloneNode()); 
                  
                 // Append the ReEnterPassword to the form
                 form.appendChild(RPWD); 
                 form.appendChild(br.cloneNode()); 
                  
                 // Append the submit button to the form
                 form.appendChild(s); 
  
                 document.getElementsByTagName("body")[0]
                .appendChild(form);
             }
         </script>
     </body>
</html>

输出如下：

方法二：这种方法与前一种方法有些相似, 但是使用JQuery方法附加元素。采用document.createElement()创建新元素并使用setAttribute()设置元素属性的方法。通过以下方式将这些元素追加到<form>元素附加()JQuery的方法。最后附加<form>元素<body>文档的元素。本示例创建一个LOGIN表单。

例子：

<!DOCTYPE html>
<html>
     <head>
         <title>
             Create a Form Dynamically 
             with the JavaScript
         </title>
     </head>
     <body style = "text-align: center;">
         <h1 style = "color: green;">
             lsbin
         </h1>
         <p>
               Click on the button to create 
             a form dynamically
         </p>
         <button onClick = "GFG_Fun()">
             click here
         </button>
         <p id = "GFG_DOWN"></p>
         <script>
             var down = document.getElementById("GFG_DOWN");
             function GFG_Fun() {
                
                 // Create a form synamically
                 var form = document.createElement("form");
                 form.setAttribute("method", "post");
                 form.setAttribute("action", "submit.php");
  
                 // Create an input element for emailID
                 var ID = document.createElement("input");
                 ID.setAttribute("type", "text");
                 ID.setAttribute("name", "emailID");
                 ID.setAttribute("placeholder", "E-Mail ID");
  
                 // Create an input element for password
                 var PWD = document.createElement("input");
                 PWD.setAttribute("type", "password");
                 PWD.setAttribute("name", "password");
                 PWD.setAttribute("placeholder", "Password");
  
                 // Create a submit button
                 var s = document.createElement("input");
                 s.setAttribute("type", "submit");
                 s.setAttribute("value", "Submit");
  
                 // Append the email_ID input to the form
                 form.append(ID); 
                
                 // Append the password to the form
                 form.append(PWD); 
                
                 // Append the button to the form
                 form.append(s); 
  
                 document.getElementsByTagName("body")[0]
                .appendChild(form);
             }
         </script>
     </body>
</html>

输出如下：

更多前端开发相关内容请参考：lsbin - IT开发技术：https://www.lsbin.com/

查看以下更多JS相关的内容：

如何使用JavaScript动态创建表单？

一盏木人

引用和评论

如何在Java中将字符串转换为布尔值？

100个React最佳实践小技巧

Javascript(turfjs)等值线图绘制

2024最全ECharts 实战大全（速记版+资源）

Jerry和您聊聊Chrome开发者工具

CSS 如何模拟“真实的”进度条？

一些react使用小技巧（中）