使用 Javascript 动态创建 HTML 表单
[英]Dynamically create a HTML form with Javascript
问题描述
我该如何使用 javascript 创建表单？
我不知道如何继续，我一直在谷歌上搜索我的脸，但没有什么明确的可以告诉我如何用它动态创建表单。
提前谢谢！
8 个解决方案
解决方案1
41 2013-03-14 12:37:03
你可以尝试这样的事情：
HTML部分：
<html>
<head></head>
<body>
<body>
</html>
javascript：
<script>
//create a form
var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"submit.php");
//create input element
var i = document.createElement("input");
i.type = "text";
i.name = "user_name";
i.id = "user_name1";
//create a checkbox
var c = document.createElement("input");
c.type = "checkbox";
c.id = "checkbox1";
c.name = "check1";
//create a button
var s = document.createElement("input");
s.type = "submit";
s.value = "Submit";
// add all elements to the form
f.appendChild(i);
f.appendChild(c);
f.appendChild(s);
// add the form inside the body
$("body").append(f); //using jQuery or
document.getElementsByTagName('body')[0].appendChild(f); //pure javascript
</script>
通过这种方式，您可以动态创建任意数量的元素。
解决方案2
8 已采纳 2010-07-21 07:44:06
我认为发布完整的解决方案太多了，但请查看 jQuery。 我给你一个提示，jQuery 的.append()可能对你非常有用:)
解决方案3
3 2013-08-26 10:36:20
我的想法是，您可以使用 github 中的dform jquery 插件，通过将输入作为 json 数据直接创建表单。
解决方案4
2 2010-07-21 07:46:46
是的，您可以通过运行 JavaScript 创建任意数量的 html，包括表单，
也许：
<html>
<body>
<h1>My Form</h1>
<div id="formcontent">
</div>
</body>
</html>
我们的 JavaScript 可能看起来像：
var el = document.createElement("input");
el.type = "text";
el.name = "myformvar";
var cont = document.getElementById("formcontent")
cont.appendChild(el);
解决方案5
0 2010-07-21 07:43:42
使用document.write或者如果你想要更大的灵活性使用jquery
解决方案6
0 2010-07-21 07:44:21
只需使用标准 DOM API（ document.createElement() ，请参阅这些文档的示例）来创建表单的所有元素。
解决方案7
0 2010-07-21 07:44:43
我的建议是获取underscore.js库并使用其template函数来创建表单。 （如果下划线对你来说太大了，模板函数也可以独立存在）。
解决方案8
0 2011-03-18 19:12:37
尝试这个...
myWin = open("", "displayWindow", "width=800,height=500,status=yes,toolbar=yes,menubar=yes");
myWin.document.open();
myWin.document.write("<html><head><title>V E N U S </title>");
myWin.document.write("<style type='text/css'>.hdr{.......}</style>");
myWin.document.write("</head><body onload='window.print()'>");
myWin.document.write("<div class='hdr'>");
myWin.document.write("what ever you want");
.
.
myWin.document.write("</div>");
myWin.document.write("</body></html>");
myWin.document.close();
这将创建一个包含 DIV 的表单......
如何动态创建HTML表单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.