7. JavaScript操作表单

7.1 获取表单对象的方法

利用表单在文档中的索引或表单的name属性来引用表单

1. docuemnt.getElementById 通过id获取表单对象

2. document.formName 通过document对象的表单name属性获取表单对象

3. document.forms[i] 通过文档的foms属性得到所有的表单对象，返回表单的数组，通过索引获取对应的表单对象

4. document.forms[formName] 通过文档的foms属性得到所有的表单对象，返回表单的数组，通过表单name属性获取对应的表单对象

代码如下所示:

  
      账号: 
       
 密码: 
     
   获取表单对象获取表单属性

7.2 获取表单常用属性

表单常用属性如下表所示:

代码示例如下所示:

// 获取表单属性function getFormAttr() {   
 var loginForm = document.getElementById("login");// 获取表单的action属性    console.log(loginForm.action);    // 获取表单的长度    console.log(loginForm.length);    // 获取表单的method属性    console.log(loginForm.method);   
 // 获取所有表单域对象，返回的是一个数组    var forms = loginForm.elements;
    for(var i = 0; i < forms.length; i++) {   
   var form = forms[i];        console.log(form); 
   }
}

运行结果如下图所示:

7.3 表单对象的常用方法

表单常用方法如下表所示:

代码示例如下所示:

// 提交表单function submitForm() {    var loginForm = document.getElementById("login");  
  loginForm.submit();
}// 重置表单function resetForm() {var loginForm = document.getElementById("login");
    loginForm.reset();
}

7.4 form表单的常用事件属性

表单常用事件属性如下表所示:

注意:

1.表单点击提交会触发onsubmit事件，执行的函数需要给出返回值，返回true表示可以提交数据，返回false，表示不能提交数据

2.其中onsubmit属性的属性值return关键字不能省略，如果省略的 返回结果为false，还会提交数据和页面跳转。

3.reset表示重置到初始的状态，而不是清空。

7.5 form中表单域对象的获取

可以通过如下三种方式获取:

1. 通过id获取表单域

2. 通过表单的name来获取

3. form.elements[i]; 表单的元素下标来获取

代码示例如下所示:

function getFormField() {
    // 通过id获取表单域     var accountNode = document.getElementById("accountId");   
 console.log(accountNode);    // 通过表单的name来获取     var loginForm = document.getElementById("login");    var accountNode2 = loginForm.account;    console.log(accountNode2);    // form.elements[i]; 表单的元素下标来获取     var accountNode3 = loginForm.elements[0]''   
 console.log(accountNode3);
}

7.5 form表单域组件常用属性和方法.

disabled ：使表单域不能接受用户的操作，变为只读

readonly: 内容不可以更改，变为只读

name ：获取或设置表单域的名称

form：获取该表单域所属的表单

value：获取或设置表单域的值

type ：判断表单域的类型

focus():使表单域获得焦点

blur()：使表单域失去焦点

注意:

1. 设置readonly属性的时候only首字母需要大写才能生效

2. 一个页面只能够有一个组件设置为获得焦点

3. blur方法常用于在失去焦点时进行表单校验，部分代码如下所示：

 账号:  
        密码: 
       
     

readonly和disabled的区别?

共同点：都是导致内容不可以更改

区别：

readonly：中的内容是可以提交的

disabled：数据是不可以提交的,不可以在被操作

代码示例如下所示:

    
        
账号: 
        
密码: 
          
      表单域的常用属性设置    

7.6 单选按钮组和复选框常用操作

通过checked属性获得选中和未选中的状态。

获得单选按钮组的值：只能通过遍历单选按钮来获取被选中的值

复选框的处理类似单选按钮

获取所有单选按钮或者复选按钮对象使用getElementByName("name")

使用复选按钮实现全选和反选效果图如下所示:

代码示例如下所示:

       
   
      
性别: 男
    女
    获取单选框的值   
 
    
    爱好: 游泳    
 足球    
 篮球    
 写代码 
    全选/全不选
    获取多选框的值    多选框全选操作    全选    全不选   
 反选    
    

7.7 下拉列表的使用

常用属性的使用

使用value属性获取和设置下拉列表选中选项的值

使用selectedIndex属性获取当前被选中选项的索引

使用options属性获取所有选项集合

使用option对象的value属性和text属性, 可以读写这两个属性。

使用option对象的selected属性选中该option

示例代码如下所示:

家乡:     南昌    北京    深圳   
 上海获取下拉框的值添加选项

我们也可以通过下拉选项框对象的appendChild方法或者add方法添加option节点，代码如下所示:

function addMyOption() {    // 1. 获取到select节点    var selectNode = document.getElementById("city");    // 2. 创建一个option    var opt = document.createElement("option");   
 // 3. 设置option节点属性    opt.value = "cq";    
opt.text = "重庆";    // 4. 将opt添加到select节点中    selectNode.add(opt);
}

案例: 使用下拉选项框实现左选和右选添加的案例，效果图如下所示：

示例代码如下所示:

 
                  
 #div1 {            width: 1000px;            margin: 0 auto;            margin-top: 200px;       
 }        #div11 {            width: 300px;            height: 400px;            border: 1px solid red;           
 float: left;        
}       
 #div12 {            width: 200px;            height: 400px;           
 border: 1px solid blue;            /*position: absolute;*/           
 /*left: 400px;*/            float: left;       
 }        #div13 {           
 width: 300px;           
 height: 400px;           
 border: 1px solid green;            float: left;        
}      
  input {           
 margin-left: 50px;    
}      
  .add {          
  margin-top: 100px;      
  }        #select1 {            width: 300px;           
 height: 400px;       
 }       
 #select2 {           
 width: 300px;            height: 400px;        
}                                            AAAAAAAAAAAAAAA                BBBBBBBBBBBBBBB                CCCCCCCCCCCCCCC                DDDDDDDDDDDDDDD                EEEEEEEEEEEEEEE