标签：
表单的属性和方法
一. 表单字段的属性(id/name/value/form),这里用value属性来举例
上面的form属性代表获取表单字段的父级表单对象
1. 属性的获取
console.log(document.myform.username.value);
2. 属性的设置
document.myform.username.value="123";
3. 获取表单字段的父级表单对象
console.log(document.myform.username.form);
4. 禁用表单控件(这里是禁用username这个输入控件,等于true表示禁用)
document.myform.username.disable=true;
二. 表单字段的方法
1. focus() 获得焦点后,执行大括号里的代码
document.myform.username.onfocus()=function{.........}
2. blur() 失去焦点后,执行大括号里的代码
document.myform.username.onblur()=function{.........}
三. 表单字段的事件(与方法有一定的区别)
1. focus 事件
2. blur 事件
获取表单的方式
获取表单个数的方式 : document.forms.length
获取表单的方式:
1. document.forms[index] : 通过forms的索引值获取
比如: document.forms[0] : 获取索引值为 0 的表单(即是第一个form表单)
2. document.forms["name的值"] : 通过表单里的name属性的值获取对应的表单
比如: document.forms["myform"] : myform是一个表单的name属性的值
3. document.forms.表单name的值 : 通过表单里的name属性的值获取对应的表单
比如: document.forms.myform : myform是一个表单的name属性的值
4. document.表单name的值 : 通过表单里的name属性的值获取对应的表单
比如: document.myform : myform是一个表单的name属性的值
获取表单元素的方式
一. elements : 表单内的表单字段的集合; 注意: label标签不属于表单内的元素
1. 获取表单内部元素的个数 : document.myform.elements.length
二. 获取表单内部元素
获取对应表单内某个表单字段的属性值: (注意: 在表单中,value值代表表单字段内的文本内容)
方式1 : document.myform.elements[index].属性名
解释: 表单为myform, 获取到索引值为index的表单字段,获取其属性值
方式2 : document.myform.elements["name值"].属性名
解释: 表单为myform, 获取到中括号内对应name值的表单字段,获取其属性值
方式3 : document.myform.elements.表单name值.属性名
解释: 表单为myform, 获取到表单内为name值的表单字段,获取其属性值
方式4 : document.myform.表单name值.属性名 (直接跟表单内的字段name的值)
解释: 表单为myform, 获取到表单内为name值的表单字段,获取其属性值
例子如下 :
document.myform.elements[0].value : 获取到第一个表单字段的value属性的值
document.myform.elements["like[]"].id : 获取到name值为like[]字段的id属性的值
document.myform.elements.username.value : 获取到name值为username字段的value属性的值
document.myform.username.id : 获取到name值为username字段的id属性的值
三. 注意事项
1. elements这个表单元素集合不能用于单选框(type="radio"), 可用于其他表单字段
2. 单选框里的checked属性有两个值:
document.myform.radio[0].checked = true; 表示被选中
document.myform.radio[0].checked = false; 表示没被选中
3. 在if语句中的写法 : if(document.myform.radio[0].checked)
表示document.myform.radio[0]被选中
验证表单
方式一:
1. 在form表单内设置一个 <input type="submit" value="提交">,这个按钮是用于提交这个表单内的内容;
2. 在script块里设置一个校验函数,比如function check(),这个函数用来实现各种控件的验证需求;
3. 在form表单的定义中,设置一个onsubmit="return check()",其作用是当点击提交按钮时(程序触发这个事件时),程序实现check函数里的校验代码,然后在反馈给表单所提交到的地址,其中action="#1",就是用于设置表单所提交到的地址
大概的程序如下:
<body>
form< action="#1" id="myform" name="myform" method="post" onsubmit="return check()" >
<input type="submit" id="tijiao" name="tijiao" value="提交">
</form>
</body>
<script>
function check(){
设置验证需求
}
</script>
方式二:
1. 通过设置的button按钮来提交自己想要的验证需求,可以设置多个button;一个表单中,可以设置多个提交按钮;
2. 在body块里设置button按钮,在script块里给button按钮添加事件;
3. 事件里两条必须的语句:
document.myform.action="#1"; 用于设置表单提交到的地址
document.myform.submit(); 其中的submit()方法表示提交表单,点击按钮提交表单
程序如下:
<body>
<input type="button" id="btn" name="btn" value="提交按钮">
</body>
<script>
document.myform.btn.onclick=function(){
document.myform.action="#2";
document.myform.submit();
}
</script>
标签：
原文地址：http://www.cnblogs.com/Hrbacity/p/4803537.html
