Tom36
Tom36

Javascript-表单脚本

一、表单的基础知识

1、表单提交

  • 普通提交
  • 以编程方式调用submit()方法提交表单
var form  = document.getElementById("myForm");
form.submit();

解决表单重复提交的办法：
1、表单提交后就禁用提交按钮
2、利用onsubmit 事件处理程序取消后续的表单提交操作

2、表单重置

  • 普通重置
  • reset()方法重置
var form  = document.getElementById("myForm");
form.reset();

3、表单字段

每个表单都有elements属性
elements 集合是一个有序列表，其中包含着表单中的所有字段

如果有多个表单控件都在使用一个name（如单选按钮），那么就会返回以该name 命名的一个NodeList。



    
        
    
    
        

            
    
                
  • 
                    
                    Red
                
    • 
                
  • 
                    
                    Yellow
                
    • 
                
  • 
                    
                    Blue
                
    •
  • 共有的表单字段属性
    disabled：布尔值，表示当前字段是否被禁用。
    form：指向当前字段所属表单的指针；只读。
    name：当前字段的名称。
    readOnly：布尔值，表示当前字段是否只读。
    tabIndex：表示当前字段的切换（tab）序号。
    type：当前字段的类型，如"checkbox"、"radio"，等等。
    value：当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。
//修改value属性
field1.value="another value";
alert(field1.form === form);
//把焦点设置到当前字段
field1.focus();
//禁用当前字段
field1.disabled = true;

注意：当我们在提交表单禁用提交按钮的时候，应该在“submit”事件添加事件处理函数。不要用click。因为不同的浏览器存在时差，有的浏览器会在触发表单的submit事件之前触发click事件，有的在这之后。

  • 共有的表单字段方法
    focus() 设置焦点
    blur() 删除焦点
    HTML5 为表单字段新增了一个autofocus 属性。在支持这个属性的浏览器中，只要设置这个属性，不用JavaScript 就能自动把焦点移动到相应字段
  • 共有的表单字段事件
    blur：当前字段失去焦点时触发。
    change：对于和