js中的表单元素操作

* 1.表单属性
*  1.action:提交的url
*  2.method:提交方式
*  3.elements:表单控件的集合,可以使用下标或者name来访问,
*  如：form1.elements["input01"],如果name相同就会返回所有
*  4.length:表单控件的个数
*  5.reset:重置表单
*  6.submit:提交表单
*
* 2.提交表单；
*  1.使用submit按钮
*  2.使用图片按钮<input type="image" src="images/sky01.jpg"/>
*  3.编程方式调用submit方法(不会触发默认事件)
*
* 3.阻止表单提交；只要阻止默认事件就可以了(一般在验证表单完才会提交,
* 为防止重复提交可以在提交完一次就禁止点击)
*
* 4.除了fieldset外的表单都有的属性:
*  disabled:是否禁用
*  form:所述表单指针
*  name:顾名思义
*  readOnly:是否只读
*  tabIndex:按下tab键的跳转顺序
*  type:控件类型
*  value:提交给服务器的值
*
*  5.对于表单元素都有focus和blur事件,这两个事件可以用来检测表单状态
*
*  6.对于input和textarea而言还有change事件是当内容改变而且失去焦点的时候触发
*      对于select则是当选项改变的时候触发
*
*  7.input中type为text的元素可以设置size属性表示一行的字符个数,maxlength表示最大的输入值
*
*  8.textarea可以使用rows和cols来设置
*
*  9.对于textarea和input有select()方法来选中所有文本和一个select事件在文本被选中的时候触发
*
*  10.要想取得选中的文本在标准浏览器中:在元素对象上有一个selectionStart和selectionEnd表示选中的文本的
*  开始和结尾然后就可以获取选中的文本了,对于ie8-有一个document.selection.createRange().text方法可以
*  获取选中的文本,但是这个方法是从鼠标按下就会选择，连续选中一串字符就会连续触发如:选中“555555”，它会出现
*  5
*  55
*  555
*  5555
*  .。。。
*  的情况，表示你连续选取
*
*  11.对于自动选取部分文本的方法标准浏览器可以使用:setSelectionRange(startIndex,endIndex)
*     对于ie8-可以使用下面的方法:
*          1.创建范围:var range=elem.createTextRange();
*          2.范围折叠:range.collapse(true);
*          3.移到开头:range.moveStart("character",startIndex);
*          4.移到结尾:range.moveEnd("character",endIndex);
*          5.选择:range.select();
*      function selectText(elem,startIndex,endIndex){
*          //标准浏览器
           if(elem.setSelectionRange){
               elem.setSelectionRange(startIndex,endIndex);
           }else if(elem.createTextRange){
           //ie8-
               var range=elem.createTextRange();
               range.collapse(true);
               range.moveStart("character",startIndex);
               range.moveEnd("character",endIndex);
               range.select();
           }
           elem.focus();
       }
*
*
*  12.屏蔽按键:
*  对于键盘事件可以屏蔽某些字母的输入:
*      1.屏蔽所有按键:这个简单，只要在事件处理函数中加上阻止默认就可以了
*      2.屏蔽某些字符:可以使用正则表达式来匹配,满足匹配的阻止默认
*      (对于输入框而言默认就是按下字符就会输入)
*
*           //只能输入数字
*          function  canInputNumber(elem){
*                   elem.οnkeypress=function(ev){
*                   ev=ev?ev:window.event;
*                   var charCode=ev.charCode;
*                   if(/\D/.test(String.fromCharCode(charCode))){
*                       ev.preventDefault();
*                   }
*
*               }
*          }
*
*
*  13.响应剪切板:
*      beforecopy:再复制前触发；
*      copy:复制的时候触发
*      beforecut:剪切之前触发
*      cut:剪切的时候触发
*      beforepaste:粘贴之前触发;
*      paste:粘贴的时候触发
*   当然有事件也就有可以获取的数据:
*      存在一个clipboardData表示剪切板的对象,这个对象有三个方法:
*      getData(文本类型(text或者url)),setData(文本类型,值),clearData()
*      e.g:event.clipboardData.getData("text")
*      (对于ie浏览器clipboardData对象在window中,不再event中)
*          在上面的剪切板事件中只有paste事件才能获取到剪切板的内容,也就是说只有在这个
*      事件中才能使用getData()
*          对于setData()需要在剪切或者复制的时候操作,但是设置值并不能改变剪切板的内容
*      换句话说,就是即使使用了这个方法粘贴出来的内容也不是你设置的内容
*
*  14.焦点的自动切换:
*  这个只是针对特定输入有效，比如电话号码,固定的位数,当用户输入到这么多位数的时候就将焦点
*  切换到下一个控件。
*
*  15.HTML5自定义字段:
*  为了约束输入值和防止禁用js，对于支持HTML5的浏览器有一些系统自带的API:
*  required:<input type="text" required/>只要添加了这个字段，在提交的时候浏览器会自己检测的,没填的话会提示
*  email:<input type="email"/>如果填写的不是email格式提交的时候会有系统自动提示
*  tel:<input type="tel"/>同上
*  。。。。。。。。
*  (只是针对支持HTML5的浏览器有效)
*
*  匹配的另一种方式是pattern=正则表达式
*  <input type="text" pattern="/\d+/"/>
*  (这个方法不能阻止用户输入，只是在提交的时候给出提示)
*  (可以使用js进行简单的验证:
*   elem.checkValidity()方法可以用来检测上面的约束,如果返回true就表示满足上面的约束就能进行下一步操作)
*   if(elem.checkValidity()){
*      //提交表单
*   }else{
*      //不提交
*   }
*
*   16.对于select元素和option元素的操作:
*   select:
*      add(newOption,relOption):插入option,relOption指在这个元素之前插入
*      options:select中的option的HTMLCollection
*      remove(index):删除option
*      multiple:是否多选
*      selectedIndex:选中的option的下标(在多选中只会返回一项,所以最好遍历)
*      size:select中option的个数
*  (使用add的时候如果想在最后插入可以使用add(newOption,undefined))
*
*  option:
*      index:在select中的索引
*      selected:表示是否被选中
*      text:文本选项
*      value:value值
*  (使用dom操嘴也可以实现访问属性和元素操作,但在select中不推荐这么做,效率相对太低)
*  (还有就是在使用innerHTML来插入option在ie9-会出问题,亲测)
*  对于option的增加，删除，查找都已有方法，对于option的重排可以使用insertBefore或者appendChild方法,对于子孙元素,插入相同
*  的元素等于移动原来的元素
*
*  16.表单序列化:
*      对表单元素执行以下操作:
*      1.对表单名称和值进行编码用&连接
*      2.不发送禁用表单
*      3.不发送reset和submit按钮
*      4.select选择选中的发送
*      。。
*     执行序列化可以遍历所有表单元素提取值
*     (当然如果是form提交方法系统会自己序列化,如果是使用ajax来提交就要自己手动序列化了)
*     (序列化方案可以上网搜索,代码太多就不提供了)