共计 3914 个字符，预计需要花费 10 分钟才能阅读完成。
工作是在 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
正文完
发表至： javascript
2021-03-30
