关于javascript:如何使用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 如何调试程序？：https://www.lsbin.com/3221.html
应用 JavaScript 动态创建图像元素：https://www.lsbin.com/2413.html
Javascript 短路运算符：https://www.lsbin.com/1906.html