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

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

方法一：使用document.createElement()创建新元素，使用setAttribute()方法设置元素的属性。通过appendChild()方法将这些元素附加到

元素。最后将元素附加到文档的 元素。本示例创建一个注册表单。

• 例子：

      
          
              Create a Form Dynamically with 
              the JavaScript
          
      
      
          
              GeeksforGeeks
          
          
            Click on the button to create
            a form dynamically
          
          
              click here
          
          
   
      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);
              }
          
      

• 输出：

方法 2：此方法与前一种方法有些相似，但使用 JQuery 方法附加元素。使用document.createElement()创建新元素并使用setAttribute()方法设置元素的属性。通过 JQuery 的append()方法将这些元素附加到 元素。最后将元素附加到文档的 元素。本示例创建一个登录表单。

• 例子：

      
          
              Create a Form Dynamically 
              with the JavaScript
          
      
      
          
              GeeksforGeeks
          
          
                Click on the button to create 
              a form dynamically
          
          
              click here
          
          
          
              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);
              }
          
      

• 输出：