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表單格式問題

回答

相關問題