如下文所示,假设我们希望能够提取到form中每一个元素(包含最后提交按钮)的值,然后可以拿作它用,比如说在页面下面显示一遍:
---------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<body>
<h1>使用 document.forms 查找 HTML 元素</h1>
<form id="form1">
test1: <input type="text" name="test1" value="第1个元素"><br>
test2: <input type="text" name="test2" value="第2个元素"><br>
test3: <input type="text" name="test3" value="第3个元素"><br>
test4: <input type="text" name="test4" value="第4个元素"><br>
test5: <input type="text" name="test5" value="第5个元素"><br>
test6: <input type="text" name="test6" value="第6个元素"><br>
test7: <input type="text" name="test7" value="第7个元素"><br>
test8: <input type="text" name="test8" value="第8个元素"><br>
<input type="submit" value="提交">
</form>
<p id="show"></p>
<p>单击“试一试”按钮,显示表单中每个元素的值。</p>
</body>
</html>
-----------------------------------------------------------------------------------------
我们可以在body最后增加以下方法:
-------------------------------------------------------------------------
<button οnclick="myFunction()">试一试</button>
<script>
function myFunction() {
var x = document.forms["form1"];
var text = "";
var i;
for (i = 0; i < x.length ;i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("show").innerHTML = text;
}
</script>
--------------------------------------------------------------------------
假如不想看到最后的“提交”这个内容,只要改变for循环的条件即可:for (i = 0; i < x.length-1 ;i++)
特别注意以下2句的语法:
var x = document.forms["frm1"]; 坑位警告:<form id="frm1"> 和 var x = document.forms["frm1"]; 红色部分不能少。
x.elements[i].value .value不能少