JS基础11-DOM操作表单元素
一、DOM访问表单控件的常用属性和方法如下：
|
action |
返回该表单的提交地址 |
|
elements |
返回表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件。 |
|
length |
返回表单内表单域的个数 |
|
method |
返回表单内的method属性，主要有get和post两个值 |
|
target |
确定提交表单时的结果窗口，主要有_self、_blank、_top等 |
|
reset()、submit() |
重置表单和确定表单方法 |
二、在elments返回的数组中访问具体的表单控件语法如下：
|
.elements[index] |
返回该表单中第index个表单控件 |
|
.elements[elementName] |
返回表单内id或name为elementName的表单控件 |
|
.elementName |
返回表单内id或name为elementName的表单控件 |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM操作表单元素</title>
</head>
<body>
<form id="myform" action="https://www.baidu.com/" method="get" target="_blank">
<input type="text" value="张三"><br>
<input type="text" value="123" id="t2"><br>
<select name="" id="t3">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="淄博">淄博</option>
<option value="昆明" selected>昆明</option>
</select>
<br>
<input type="button" value="获取表单内第一个控件" onClick="show(c.elements[0])">
<input type="button" value="获取表单内第二个控件" onClick="show(c.elements['t2'])">
<input type="button" value="获取表单内第三个控件" onClick="show(c.t3)">
<input type="button" value="操作表单" onClick="show(c.reset())">
</form>
<!--从上往下执行，计算机先读取到id="myform",之后才能给声明的变量c赋值-->
<script type="text/javascript">
var c=document.getElementById('myform');
function show(curr){
alert(curr.value);
}
</script>
</body>
</html>
