表单操作
# 表单操作
1. ## 表单的引用:</br>
1)直接定位: id / name/ tagname
2)集合方式:
document.forms[index];通过下标
document.forms["表单name名"];
document.forms."表单name名";
document."表单name名";
2. ## 表单内总元素引用:</br>
1)直接定位: id / name/ tagname
2)集合方式:
document."表单name名".elements[index];通过下标
document."表单name名"."表单内元素name名";
document."表单name名".elements."表单内元素name名";
document."表单name名".elements["表单内元素name名"];
document."表单name名"["表单内元素name名"];
3. ## 表单元素属性及方法: </br>
1)属性: disabled(是否可用) form(返回包含字段的表单)
2)方法: blur()(失去焦点) focus()(获得焦点)
4. ## 示例 ##
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
//当输入框中没有输入,显示默认值,否则显示输入的值
var a = document.form.text.value;
document.form.text.onfocus=function(){
document.form.text.value = "";
};
document.form.text.onblur = function(){
if(!document.form.text.value){
document.form.text.value = a;
}
};
document.form.tijiao.onclick=function() {
//找到单选按钮选定的值
for (var i = 0; i < document.form.xingbie.length; i++) {
if (document.form.xingbie[i].checked) {
alert(document.form.xingbie[i].value);
}
}
//找到复选按钮选定的值
var arr = [];
for(var i = 0 ;i < document.form.aihao.length;i++){
if(document.form.aihao[i].checked){
arr.push(document.form.aihao[i]);
}
}
for(var i = 0;i < arr.length;i++){
alert(arr[i].value);
}
}
for (var i = 0; i < document.form.aihao.length; i++) {
if (document.form.aihao[i].checked) {
alert(document.form.aihao[i].value);
}
}
}
}
</script>
</head>
<body>
<form name="form" action="#" onsubmit="return test()" method="get">
<label for="text">姓名:</label><input id="text" value="" name="text" type="text"/><br/>
<label >性别:</label>
<input id="nan" name="xingbie" value="男" type="radio"/><label for="nan">男</label>
<input id="nv" name="xingbie" value="女" type="radio"/><label for="nv">女</label><br/>
<label >爱好:</label>
<input id="cg" name="aihao" value="唱歌" type="checkbox"/><label for="cg">唱歌</label>
<input id="tw" name="aihao" value="跳舞" type="checkbox"/><label for="tw">跳舞</label>
<input id="pb" name="aihao" value="跑步" type="checkbox"/><label for="pb">跑步</label>
<input id="ly" name="aihao" value="旅游" type="checkbox"/><label for="ly">旅游</label>
<input id="tq" name="aihao" value="弹琴" type="checkbox"/><label for="tq">弹琴</label>
<input id="yd" name="aihao" value="阅读" type="checkbox"/><label for="yd">阅读</label><br/>
<label >地址:</label>
<select style="width: 60px" name="dizhi" id="">
<option value="成都">成都</option>
<option value="南充">南充</option>
<option value="遂宁">遂宁</option>
<option value="北京">北京</option>
<option value="大连">大连</option>
<option value="重庆">重庆</option>
</select><br/>
<textarea name="textarea" id="textarea" cols="30" rows="10"></textarea><br/>
<input name="tijiao" value="提交" type="submit"/>
<input name="tijiao1" value="提交" type="submit"/>
<input name="cz" value="重置" type="reset"/>
</form>
</body>
</html>
<script>
function test(){
//文本未填提交处理
if(document.form.text.value.trim() == ""){
document.form.text.style.border = "2px solid red";
return false;
}
//按钮未选提交处理
var a = 0;
for(var i = 0 ;i < document.form.xingbie.length;i++){
if(document.form.xingbie[i].checked){
a = 1;
}
}
if(!a){
return false;
}
document.form.tijiao1.onclick=function() {
document.form.action="#2";
document.form.submit();
}
}
</script>
