<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DOM访问表单元素</title>
<script type="text/javascript">
function one(){
var form = document.getElementById("myform");
//表单 .elements[下标]
var name = form.elements[0];
/* var name = form.elements["username"];
var name = form.username;
和上面等价*/
alert(name.value);
}
function two(){
var form = document.getElementById("myform");
var password = form.elements[1];
alert(password.value);
}
function three(){
var form = document.getElementById("myform");
var city = form.elements[2];
alert(city.value);
}
function four(){
//能够让点击普通按钮的时候完成提交动作
var form = document.getElementById("myform");
//提交
form.submit();
}
</script>
</head>
<body>
<form id="myform" action="http://www.baidu.com" method="get"
target="_self">
<input name="username" type="text" value="xiaoming"/><br/>
<input name="password" type="text" value="123456"/><br/>
<select name="city">
<option value="shanghai">上海</option>
<option value="nanjing" selected="selected">南京</option>
</select><br/>
<input type="button" value="获取表单内第一个控件"
onclick="one()"/>
<input type="button" value="获取表单内第二个控件"
onclick="two()"/>
<input type="button" value="获取表单内第三个控件"
onclick="three()"/>
<input type="button" value="操作表单"
onclick="four()"/>
</form>
</body>
</html>
