javascript对表单的操作
一、获取对表单的引用
A.直接通过定位的方式获取
document.getElementById("表单id");
document.getElementsByName("表单name")[下标];
document.getElementsByTagName("form")[下标];
B.通过集合的方式来获取
document.forms[下标]
document.forms["表单name"]
document.forms.表单name
C.通过name直接获取
document.表单name
<body>
<form name="myForm" id="form1" action="" method="post">
姓名:<input type="text" name="username"/><br/>
年龄:<input type="text" name="age"/><br/>
性别:<input type="radio" name="gender" value="man"/>男
<input type="radio" name="gender" value="woman"/>女<br/>
爱好:<input type="checkbox" name="hobby[]" value="run"/>跑步
<input type="checkbox" name="hobby[]" value="yoga"/>瑜伽
<input type="checkbox" name="hobby[]" value="football"/>足球<br/>
地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
简介:<br/>
<textarea cols="60" rows="10" name="info"></textarea><br/>
<input type="button" value="提交"/>
</form>
<div id="content"></div>
<script>
var div=document.getElementById("content");
/*var myForm=document.getElementById("form1");
div.innerHTML=myForm.name;*/
/*var myForm=document.getElementsByName("myForm")[0];
div.innerHTML=myForm.name;*/
/* var myForm=document.getElementsByTagName("form")[0];
var div=document.getElementById("content");
div.innerHTML=myForm.name;*/
/*var myForm=document.forms[0];
div.innerHTML=myForm.name;*/
/*var myForm=document.forms["myForm"];
div.innerHTML=myForm.name;*/
/*var myForm=document.forms.myForm;
div.innerHTML=myForm.name;*/
var myForm=document.myForm;
div.innerHTML=myForm.name;
</script>
</body>
二、获取表单元素的引用
A.直接获取
document.getElementById("表单元素id");
document.getElementsByName("表单元素name")[下标];
document.getElementsByTagName("表单元素")[下标];
B.通过集合的方式来获取
表单对象.elements
获取表单里面所有元素的集合
表单对象.elements[下标]
表单对象.elements[表单元素name]
表单对象.elements.表单元素name
C.直接通过name的方式
document.表单name.表单元素name
<form name="myForm" id="form1" action="" method="post">
姓名:<input type="text" name="username" id="username" value="张三"/><br/>
年龄:<input type="text" name="age"/><br/>
性别:<input type="radio" name="gender" value="man"/>男
<input type="radio" name="gender" value="woman"/>女<br/>
爱好:<input type="checkbox" name="hobby[]" value="run"/>跑步
<input type="checkbox" name="hobby[]" value="yoga"/>瑜伽
<input type="checkbox" name="hobby[]" value="football"/>足球<br/>
地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
简介:<br/>
<textarea cols="60" rows="10" name="info"></textarea><br/>
<input type="button" value="提交"/>
</form>
<div id="content"></div>
<script>
var div=document.getElementById("content");
// var username=document.getElementById("username").value;
// var username=document.getElementsByName("username")[0].value;
// var username=document.getElementsByTagName("input")[0].value;
//var eles=document.myForm.elements;
//alert(eles);
//var username=document.myForm.elements[0].value;
//var username=document.myForm.elements["username"].value;
//var username=document.myForm.elements.username.value;
var username=document.myForm.username.value;
div.innerHTML=username;
</script>
三、表单元素共同的属性和方法
3.1获取表单元素的值
表单元素对象.value
获取或者设置值
3.2属性
disabled
获取或者设置表单是否禁用
<form name="myForm" id="form1" action="" method="post">
姓名:<input type="text" name="username" id="username" value="张三"/><br/>
年龄:<input type="text" name="age" value="13"/><br/>
性别:<input type="radio" name="gender" value="man"/>男
<input type="radio" name="gender" value="woman"/>女<br/>
爱好:<input type="checkbox" name="hobby[]" value="run"/>跑步
<input type="checkbox" name="hobby[]" value="yoga"/>瑜伽
<input type="checkbox" name="hobby[]" value="football"/>足球<br/>
地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
简介:<br/>
<textarea cols="60" rows="10" name="info"></textarea><br/>
<input type="button" value="提交"/>
</form>
<script>
document.myForm.username.disabled=true;
document.myForm.address.disabled=true;
</script>
form
指向包含本元素的表单的引用
<form name="myForm" id="form1" action="" method="post">
姓名:<input type="text" name="username" id="username" value="张三"/><br/>
年龄:<input type="text" name="age" value="13"/><br/>
性别:<input type="radio" name="gender" value="man"/>男
<input type="radio" name="gender" value="woman"/>女<br/>
爱好:<input type="checkbox" name="hobby[]" value="run"/>跑步
<input type="checkbox" name="hobby[]" value="yoga"/>瑜伽
<input type="checkbox" name="hobby[]" value="football"/>足球<br/>
地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
简介:<br/>
<textarea cols="60" rows="10" name="info"></textarea><br/>
<input type="button" value="提交"/>
</form>
<div id="content"></div>
<script>
var div=document.getElementById("content");
var age=document.forms[0].elements.age;
div.innerHTML="age:"+age.value+" age所在表单名为:"+age.form.name;
</script>
3.3方法
blur()
失去焦点
foucus()
获得焦点
<body>
<form name="myForm" id="form1" action="" method="post">
姓名:<input type="text" name="username" /><br/>
<input type="button" value="提交"/>
</form>
<script>
var username=document.myForm.username;
username.focus();
</script>
<form name="myForm" id="form1" action="" method="post">
姓名:<input type="text" name="username" value="张三" onblur="getUserName()"/><br/>
</form>
<div id="content"></div>
<script>
var div=document.getElementById("content");
document.myForm.username.focus();
function getUserName(){
div.innerHTML=document.myForm.username.value;
}
</script>
四、表单元素特殊属性和方法
4.1、文本域
<input type="text"/>
操作文本域的值
value
属性,设置或者获取值
<form name="myForm" id="form1" action="" method="post">
姓名:<input type="text" name="username" value="张三"/><br/>
</form>
<div id="content"></div>
<script>
var div=document.getElementById("content");
var username=document.forms[0].elements.username.value;
div.innerHTML=username;
</script>
<form name="myForm" id="form1" action="" method="post">
姓名:<input type="text" name="username" value="张三"/><br/>
</form>
<div id="content"></div>
<script>
var div=document.getElementById("content");
var username=document.forms[0].elements.username.value="李四";
div.innerHTML=username;
</script>
提示内容例子
<form name="myForm" id="form1" action="" method="post">
<input type="text" name="q" value="请输入搜索内容" onfocus="if (this.value=='请输入搜索内容')this.value='' "
onblur="this.value=(this.value==''?'请输入搜索内容':this.value)"/>
<button>搜索</button>
</form>
4.2、单选按钮
checked
返回或者设置单选按钮的选中状态。true选中,false未选中。value属性:获取值。获取选中的值,
必须先判断选中状态
<form name="myForm" id="form1" method="post">
性别:<input type="radio" name="gender" value="man"/>男
<input type="radio" name="gender" value="woman" checked/>女<br/>
<input type="button" onclick="getGender()" value="提交">
</form>
<div id="content"></div>
<script>
var gender=document.myForm.gender;
function getGender(){
for (var i=0;i<gender.length;i++){
if(gender[i].checked){
alert(gender[i].value);
}
}
}
</script>
4.3、多选按钮
checked
返回或者设置多选按钮的选中状态。true选中,false未选中。value属性:获取值。获取选中的值,
必须先判断选中状态
<form name="myForm" id="form1" method="post">
爱好:<input type="checkbox" name="hobby[]" value="run"/>跑步
<input type="checkbox" name="hobby[]" value="yoga" checked/>瑜伽
<input type="checkbox" name="hobby[]" value="football"/>足球<br/>
<input type="button" onclick="getHobby()" value="提交">
</form>
<div id="content"></div>
<script>
function getHobby(){
var div=document.getElementById("content");
var hobby=document.myForm["hobby[]"];
var hobbyArray=[];
for (var i=0;i<hobby.length;i++){
if(hobby[i].checked){
hobbyArray.push(hobby[i].value);
}
}
div.innerHTML=hobbyArray;
}
</script>
4.4、下拉框
selected
返回或者设置下拉框的选中状态。true选中,false未选中。
selectedIndex
设置或者返回下拉框被选中的索引号。
<form name="myForm" id="form1" method="post">
地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
<input type="button" onclick="getAddr()" value="提交">
</form>
<div id="content"></div>
<script>
var address=document.myForm.address;
address[1].selected=true;//上海
</script>
<form name="myForm" id="form1" method="post">
地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
<input type="button" onclick="getAddr()" value="提交">
</form>
<div id="content"></div>
<script>
var address=document.myForm.address;
address.selectedIndex=1;//上海
</script>
<form name="myForm" id="form1" method="post">
地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
<input type="button" onclick="getAddr()" value="提交">
</form>
<hr>
<div id="content"></div>
<script>
var div=document.getElementById("content");
var address=document.myForm.address;
function getAddr() {
div.innerHTML=address[address.selectedIndex].value;
}
</script>
<form name="myForm" id="form1" method="post">
地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
<input type="button" onclick="getAddr()" value="提交">
</form>
<hr>
<div id="content"></div>
<script>
var div=document.getElementById("content");
var address=document.myForm.address;
address.onchange=function () {
div.innerHTML=address[address.selectedIndex].value;
}
</script>
4.5、文本区域
<textarea></textarea>
操作文本区域的值value属性,设置或者获取值
<form name="myForm" id="form1" action="" method="post">
简介:<br/>
<textarea cols="60" rows="10" name="info"></textarea>
<div id="content">一共能输入20个字符,已输入0个,还剩余20个</div>
<input type="button" value="提交"/>
</form>
<script>
var div=document.getElementById("content");
var info=document.myForm.info;
function check(str) {
var num=0;
for(var i=0;i<str.length;i++){
if(str.charCodeAt(i)>=0&&str.charCodeAt(i)<=255){
num++;
}else{
num=num+2;
}
}
return num;
}
info.onkeyup=info.onkeydown=function () {
var str=info.value;
var lengths=check(str);
var totalLength=20;
if(lengths>=totalLength){
lengths=totalLength;
info.style.borderColor="red";
info.value=str.substring(0,totalLength);
}else{
info.style.borderColor="cyan";
}
div.innerHTML="一共能输入"+totalLength+"个字符,已输入"+lengths+"个,还剩余"+(totalLength-lengths)+"个";
}
</script>
五、验证表单
1.事件
onsubmit
当表单提交的时候触发的事件
onblur
失去焦点
onfocus
获得焦点
<form name="myForm" id="form1" action="" method="post" onsubmit="return valid(this)">
姓名:<input type="text" name="username" /><br/>
年龄:<input type="text" name="age" /><br/>
性别:<input type="radio" name="gender" value="man"/>男
<input type="radio" name="gender" value="woman"/>女<br/>
爱好:<input type="checkbox" name="hobby[]" value="run"/>跑步
<input type="checkbox" name="hobby[]" value="yoga"/>瑜伽
<input type="checkbox" name="hobby[]" value="football"/>足球<br/>
地址:<select name="address"><option>北京</option><option>上海</option><option>广州</option></select><br/>
简介:<br/>
<textarea cols="60" rows="10" name="info"></textarea><br/>
<input type="submit" value="提交"/>
</form>
<script>
function valid(obj) {
if(!obj.username.value){
alert("姓名不能为空!") ;
return false;
}
if(!obj.age.value){
alert("年龄不能为空!") ;
return false;
}
var status=0;
for(var i=0;i<obj.gender.length;i++){
if(obj.gender[i].checked){
status=1;
}
}
if(!status){
alert("请选择性别");
return false;
}
}
</script>
提交方法
表单方法表单对象.submit()
<form name="myForm" id="form1" action="" method="post">
姓名:<input type="text" name="username" /><br/>
<input type="button" value="提交" name="submitBtn"/>
</form>
<script>
var submitBtn=document.myForm.submitBtn;
submitBtn.onclick=function () {
document.myForm.action="history1.html";
document.myForm.submit();
};
setTimeout(function(){
alert("超时,结束考试");
document.myForm.action="history1.html";
document.myForm.submit();
},3000);
</script>
网友评论