工作是在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