javascript form 第22节
<html>
<head>
<title>Form对象</title>
</style>
<script type="text/javascript">
function showForm() {
// var oForm = document.forms[0];
//var oForm = document.forms['form1'];
var oForm = document.form1;
alert(oForm.action);
//oForm.action = "内置对象.htm";
}
function showEle() {
var oForm = document.form1;
var a = oForm.elements;
var msg = "";
for(var i = 0; i < a.length; i++ ) {
msg += a[i].name + " = > "+ a[i].value + "\n";
}
alert(msg);
}
</script>
</head>
<body>
<div>表单对象</div>
1.Form对象</br>
<script type="text/javascript">
//return false 阻止对象的默认事件
</script>
<form action="javascriptDemo.htm" method="GET" name="form1" onsubmit="alert('你想提交吗'); return false;" onreset="alert('确定重填')">
<table border="1" width="500px" cellpadding="5" cellspacing="0" align="left">
<tr>
<th colspan="2">学员注册表</th>
</tr>
<tr>
<td align="right">姓名:</td><td><input type="text" name="username" /></td>
</tr>
<tr>
<td align="right">密码:</td><td><input type="password" name="password"/></td>
</tr>
<tr>
<td align="right">性别:</td>
<td>
<input type="radio" name="sex" value='男' checked="checked"/>男
<input type="radio" name="sex" value='女'/>女
</td>
</tr>
<tr>
<td align="right">爱好:</td>
<td>
<input type="checkbox" name="loves" value='足球' checked="checked"/>足球
<input type="checkbox" name="loves" value='看书' />看书
<input type="checkbox" name="loves" value='旅游' />旅游
<input type="checkbox" name="loves" value='游戏' />游戏
</td>
</tr>
<tr>
<td align="right">班级:</td>
<td>
<select name="clazz">
<option value="clazz1">clazz1</option>
<option value="clazz2" selected="seleted">clazz2</option>
<option value="clazz3">clazz3</option>
<option value="clazz4">clazz4</option>
</select>
</td>
</tr>
<tr>
<td align="right">照片:</td>
<td>
<input type="file" name="photo" size="40"/>
</td>
</tr>
<tr>
<td align="right">个人简历:</td>
<td>
<textarea rows="6" cols="40" name="intro">请输入....
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="登陆"/>
<input type="reset" value="重填"/>
<input type="hidden" name="hidden" value="yfs" />
</td>
</tr>
</table>
</form></br>
2.Form对象</br>
<input type="button" value="获取表单" onclick="showForm()"/>
<input type="button" value="获取表单元素" onclick="showEle()"/>
<input type="button" value="提交表单" onclick="document.form1.submit()"/>
<input type="button" value="重置表单" onclick="document.form1.reset()"/>
</body>
</html>
rs:
