HTML表单格式问题

我使用一个简单的方法makeInput（）动态创建HTML表单，并且想知道如何使文本输入框每行显示一个，而不是以从右到左的方式显示。到目前为止，当您点击“添加课程”按钮时，它会在旧的旁边添加新的文字输入，而不是在新的一行上。这里是我的代码至今：HTML表单格式问题

<html> 
<head>COURSES</head> 
<title>Add Courses</title> 
<script type="text/javascript"> 
var x = 0; 
var f = document.createElement("form"); 
f.setAttribute('method',"post"); 
f.setAttribute('action',"tron.php"); 
f.id = "form1"; 
var s = document.createElement("input"); //input element, Submit button 
s.setAttribute('type',"submit"); 
s.setAttribute('value',"Submit Courses"); 
f.appendChild(s); 
function makeInput() 
{ 

var i = document.createElement("input"); 
i.type = "text"; 
i.name = "cname"+ x; 
i.id = "cname"+ x; 

f.appendChild(i); 
document.getElementById("test").appendChild(f); 

x = x+1; 
document.getElementById("course").innerHTML= "Number of courses: " + x; 
} 

</script> 
<body> 
<p id="course">Number of courses: </p> 
<button onclick="makeInput()">Add Course</button> 
<p id="test"></p> 


</body> 
</html>

来源

2013-04-24 Alex Alex

添加一个''
也许？ – gongzhitaao 2013-04-24 02:47:04

只是实施评论作为答案。

变化

document.getElementById("test").appendChild(f);

以下

document.getElementById("test").appendChild(f).innerHTML += '<br />';

这里是小提琴：http://jsfiddle.net/UR4y7/

来源

2013-04-24 02:55:20 hjpotter92

我通常是动态创建div的和/或周围HTML表单跨度，这样就可以应用CSS给他们。如果你把你的输入框放在div中，他们应该一次去一行，除非你专门添加css来做别的。

来源

2013-04-24 02:51:25 SilicaGel

HTML表单格式问题

回答

相关问题