# 表单操作
1. ## 表单的引用:</br>
1)直接定位: id / name/ tagname
2)集合方式:
document.forms[index];通过下标
document.forms["表单name名"];
document.forms."表单name名";
document."表单name名";
2. ## 表单内总元素引用:
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()(获得焦点)
##实例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
document.form1.username.blur();
document.form1.username.onfocus=function(){
document.form1.username.value="";
};
document.form1.username.onblur=function(){
if(document.form1.username.value){
return 0;
}
else{
document.form1.username.value="输入姓名";
}
};
//
// //单选btn1事件
// document.form1.btn1.onclick=function(){
// // console.log(document.form1.sex.length);//找到name为sex的长度
// for(var i=0;i<document.form1.sex.length;i++){
// if(document.form1.sex[i].checked){
// console.log(document.form1.sex[i].value);
// }
// }
// };
//
//
// //复选btn2事件
// document.form1.btn2.onclick=function(){
// for(var i=0;i<document.form1.sex.length;i++){
// if(document.form1.aihao[i].checked){
// console.log(document.form1.aihao[i].id);//获取相应的复选框name为aihao的id值
// }
// }
// };
//
//
// //下拉btn3事件
// document.form1.btn3.onclick=function(){
//
// // alert(document.form1.address.length);
// for(var i=0;i<document.form1.address.length;i++){
// //判断下拉列表中的元素是否被选中
// if(document.form1.address[i].selected){
// console.log(document.form1.address[i].value);//后台输出选中的value
//
// }
// }
//
// };
//表单的校验
// function check(){
//
// //姓名的判断 1.将value="输入姓名"的默认值去掉
// //2.判断输入框name为username的value值是否为空
// if(document.form1.username.value==""){
// document.form1.username.style.border="1px solid red";
// return false;
// }
//
//
// }
};
</script>
</head>
<body>
<form action="#" id="form1" name="form1" method="get" onsubmit="return check()">
<label for="">姓名</label><input type="text" name="username" id="username1" value=""/><br/>
<label for="" name="age">年龄</label><input type="text" id="age"/><br/>
<label for="" name="sex">性别</label>
<label for="" >男</label><input type="radio" value="male" name="sex"/>
<label for="" >女</label><input type="radio" value="female" name="sex"/><br/>
爱好<input type="checkbox" id="run" name="aihao"/> <label for="" >跑步</label>
<input type="checkbox" id="music" name="aihao"/> <label for="" >音乐</label>
<input type="checkbox" id="movie" name="aihao"/> <label for="" >电影</label><br/>
<select name="address" id="address" multiple="multiple">
<option value="cd">成都</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select><br/>
<textarea name="" id="" cols="30" rows="10"></textarea><br/>
<input type="submit" value="提交"/>
<input type="button" value="单选" name="btn1"/>
<input type="button" value="复选" name="btn2"/>
<input type="button" value="下拉" name="btn3"/>
<input type="button" value="提交" name="btn4"/>
<input type="button" value="提交" name="btn5"/>
</form>
</body>
</html>
<script>
function check(){
// 姓名的判断 1.将value="输入姓名"的默认值去掉
//2.判断输入框name为username的value值是否为空
if(document.form1.username.value==""){
document.form1.username.style.border="1px solid red";
return false;
}
//性别的校验
var statu=false;
for(var i=0;i<document.form1.sex.length;i++){
if(document.form1.sex[i].checked){
statu=true;
}
}
if(!statu){
return false;
}
// document.form1.btn4.onclick=function(){
//
// document.form1.action="#2";//修改它提交的地址
// document.form1.submit();//js提供的submit()方法
//
// };
// document.form1.btn5.onclick=function(){
// document.form1.action="#3";//修改它提交的地址
// document.form1.submit();//js提供的submit()方法
//
// };
//
}
// //多个按钮提交到不同的·地址
document.form1.btn4.onclick=function(){
document.form1.action="#2";//修改它提交的地址
document.form1.submit();//js提供的submit()方法
};
document.form1.btn5.onclick=function(){
document.form1.action="#3";//修改它提交的地址
document.form1.submit();//js提供的submit()方法
};
</script>