HTML表單格式問題

Question

我正在使用簡單的方法makeInput（）動態創建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>

Answer 1

我通常會動態地在html表單周圍創建div和/或spans，以便您也可以將CSS應用於它們。 如果將輸入框放在div內，除非您專門添加css否則它們應該一次只一行。

Answer 2

只是將評論作為答案。

更改

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

到以下

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

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

HTML表單格式問題

問題描述

2 個解決方案

解決方案1
0 2013-04-24 02:51:25

解決方案2
0 已采納 2013-04-24 02:55:20

HTML表單格式問題

問題描述

2 個解決方案

解決方案1 0 2013-04-24 02:51:25

解決方案2 0 已采納 2013-04-24 02:55:20

解決方案1
0 2013-04-24 02:51:25

解決方案2
0 已采納 2013-04-24 02:55:20