14 Form表单对象

Form对象
表单对象，文档对象的子对象，Javascript的Runtime Engine自动为每个表单建立对应的表单对象
属性：
 action 表单的动作
 elements 以索引表示的所有表单元素
 encoding MIME的类型
 length 表单元素的个数
 mehtod 方法
 name 表单名称
 target 目标
方法：
 handleEvent(event) 使事件处理程序生效
 reset() 重置
 submit() 提交
 
1、文本对象

访问：document.forms[索引].elements[索引].属性|方法
 document.表单名称.文件本对象名称.属性|方法
属性：
 defaultValue  该对象的value属性
 form 该对象所在的表单名称
 name 该对象的名称
 type 该对象的type属性
 value 该对象的value属性
方法：
 blur() 失去焦点
 focus() 获得焦点
 handleEvent(event) 使事件处理程序生效
 select() 该对象设置为选取状态
事件处理程序:
 onBlur onChange onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onSelect
 
1)获取文本框内容的方法
<form> 姓名：<input type="text" name="txtUserName"/> <input type="button" value="请单击" onClick='alert("谢谢你，"+this.form.txtUserName.value);' /> </form>   
2)文本框获得和失去焦点事件
<mce:script type="text/javascript"><!-- function getFocus(obj){ obj.style.color = "#ff0000"; obj.style.background = "#dbdbdb" ; } function getBlur(obj){ obj.style.color = "#000000"; obj.style.background = "#ffffff"; } // --></mce:script> <form> 电话：<input type="text" name="txtTel" onFocus="getFocus(this)" onBlur="getBlur(this)" /> </form> 
 
3)满四位自动下移到下一个文本框的文字输入
<mce:script type="text/javascript"><!-- var i = 0 ; function movenext(obj,i) { if(obj.value.length == 4) { document.forms[2].elements[i+1].focus(); } } function result() { fm = document.forms[2]; num = fm.elements[0].value + fm.elements[1].value + fm.elements[2].value + fm.elements[3].value ; alert("你输入的信用卡号码为："+num); } // --></mce:script> <form> <input type="text" size="3" maxlength="4" onKeyup="movenext(this,0)">- <input type="text" size="3" maxlength="4" onKeyup="movenext(this,1)">- <input type="text" size="3" maxlength="4" onKeyup="movenext(this,2)">- <input type="text" size="3" maxlength="4" onKeyup="movenext(this,3)"> <input type="button" value="显示" onClick="result()"/> </form> 
 
2、密码对象
 密码对象与文本对象基本相似，只是将type改为password类型。
<mce:script type="text/javascript"><!-- function checkPw(){ fm = document.form4; if(fm.pw2.value != fm.pw1.value){ alert("密码不符，请重新输入！"); document.form4.pw2.select(); }else { alert("谢谢你，"+fm.txtName.value); } } // --></mce:script> <form name="form4"> 姓名：<input type="text" name="txtName" /> 输入密码：<input type="password" name="pw1" /> 重新输入：<input type="password" name="pw2" /> <input type="button" value="填好了" onClick="checkPw()" /> </form> 
 
3、按钮对象、提交按钮对象和重置按钮对象
 type="button"||"submit"||"reset"
4、隐藏对象
 type="hidden"
5、单选按钮对象
 checked 设置该对象为选定状态
 defaultChecked 对应该对象的默认选定状态
 type="radio"

<mce:script type="text/javascript"><!-- function show(){ var x = "先生" ; if(document.form5.sex[1].checked){ x = "小姐" ; } alert(document.form5.txtYourName.value + x); } // --></mce:script> <form name="form5"> 姓名：<input type="text" name="txtYourName" />你是： <input type="radio" name="sex" checked="checked"/>帅哥 <input type="radio" name="sex"/>美女 <input type="button" value="好了" onClick="show()" /> </form> 
 
6、复选框对象
 type="checkbox" 

<mce:script type="text/javascript"><!-- function count(){ var checkCount = 0 ; var num = document.form6.elements.length ; for(var i=0;i<num;i++){ if(document.form6.elements[i].checked){ checkCount ++ ; } } alert("你喜欢"+ checkCount + " 种颜色。"); } // --></mce:script> <form name="form6"> 请选择你喜欢的颜色： <input type="checkbox" name="red" />红色 <input type="checkbox" name="green" />绿色 <input type="checkbox" name="blue" />蓝色 <input type="button" value="好了" onClick="count()"/> </form>   
7、下拉选择框对象
 length 选项的数目
 options option标记集合
 selectedIndex 所选项目的索引值
 
 选项对象：下接选择框对象的子对象
 new Option([显示文本[，值[，defaultSelected[，selected]]]]);
 text 该选项显示的文本
 value 该选项的值
 
<mce:script type="text/javascript"><!-- var URL = new Array(3); URL[0] = "http://www.baidu.com" ; URL[1] = "http://www.google.cn" ; URL[2] = "http://www.yahoo.com.cn" ; function goto(form){ var i = form.menu.selectedIndex ; if(i>0){ location = URL[i-1]; } } // --></mce:script> <form> <select name="menu" onChange="goto(this.form)"> <option>你喜欢哪一个搜索引擎</option> <option>百度</option> <option>谷哥</option> <option>雅虎</option> </select> </form> <mce:script type="text/javascript"><!-- function createOptions(){ var op=new Option(document.form7.select1.value) ; document.form7.select2.options.add(op) ; } // --></mce:script> <form name="form7"> <select name="select1" size="10"> <option >可选择项目</option> <option value="香蕉">香蕉</option> <option value="葡萄">葡萄</option> <option value="苹果">苹果</option> <option value="梨子">梨子</option> </select> <input type="button" value="-->" onClick="createOptions()" /> <select name="select2" size="10"> <option>选择项目</option> </select> </form> 
 
8、文本域对象

<mce:script type="text/javascript"><!-- function isTooLong(elm){ if(elm.length>50){ alert("留言内容太长，请修改后再发送..."); return false; } } // --></mce:script> <form onSubmit="return isTooLong(this.msg.value)"> <textarea name="msg" cols="30" rows="10" onFocus="this.value=''" > 欢迎留言，不过请长话短说...