Question

如何使用javascript创建表单？

我不知道如何继续，我一直在谷歌搜索我的脸，但没有什么明确的可以告诉我如何用它动态创建表单。

提前Thanx！

Answer 1

您可以尝试这样的事情：

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>

通过这种方式，您可以动态创建任意数量的元素。

Answer 2

我认为发布一个完整的解决方案会太多，但请查看jQuery。我给你一个提示，jQuery的.append()对你非常有用：）

Answer 3

是的，您可以通过运行javascript，

创建任意数量的html，包括表单

也许：`

<html>
  <body>
    <h1>My Form</h1>
    <div id="formcontent">
    </div>
  </body>
</html>

我们的javascript可能如下：

var e1 = document.CreateElement("input");
el.type = "text";
el.name = "myformvar";

var cont = document.GetElementById("formcontent")
cont.appendChild(e1);

Answer 4

我的想法是你可以使用github的dform jquery插件直接创建表单，输入为json数据。

Answer 5

使用document.write或者如果您想要更灵活，请使用jquery

Answer 6

只需使用标准DOM API（document.createElement()，see these docs for an example）即可创建表单的所有元素。

Answer 7

我的建议是获取underscore.js库并使用其template函数来创建表单。（如果下划线对你来说太大，模板函数也可以独立存在）。

Answer 8

尝试这个......

 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的表单......

使用Javascript动态创建HTML表单

8 个答案: