2013-04-24 3 views
0

Я динамически создаю HTML-формы с помощью простого метода 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> 
+1

добавить ''
возможно? – gongzhitaao

ответ

0

Просто реализуя комментарий в качестве ответа.

Изменить

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

к следующим

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

Вот это скрипка: http://jsfiddle.net/UR4y7/

0

Я обычно динамически создавать DIV и/или пролеты вокруг HTML-формы, так что вы можете применить CSS к ним, а также. Если вы помещаете свои поля ввода в divs, они должны идти по одной строке за раз, если вы специально не добавите css, чтобы сделать иначе.

Смежные вопросы