js系列教程9-表单元素全解

全栈工程师开发手册 （作者：栾鹏）

快捷链接：
js系列教程1-数组操作全解
js系列教程2-对象和属性全解
js系列教程3-字符串和正则全解
js系列教程4-函数与参数全解
js系列教程5-容器和算法全解
js系列教程6-BOM操作全解
js系列教程7-DOM操作全解
js系列教程8-事件全解
js系列教程9-表单元素全解
js系列教程10-canvas绘图全解
js系列教程11-json、ajax、comet全解
js系列教程12-离线应用与存储全解
js系列教程13-原型、原型链、作用链、闭包全解

表单Form的属性和方法

在HTML中，表单为form元素，在javascript中，表单为HTMLFormElement元素，继承自HTMLElement。
HTMLFormElement独有以下属性和方法：

acceptCharset: 服务器能够处理的字符集；等价于HTML中的accept-charset特性；action:  接收请求的URL，等价于HTML中的actionelements: 表单中所有控件的集合，进而可以通过索引或名称访问控件enctype: 请求的编码类型；等价于HTML中的enctype特性；length: 表单中控件的数量；method： 要发送的http请求类型，一般是get或者是post，等价于HTML中的method；name: 表单的名称；reset(): 将所有表单域重置为默认值；submit(): 提交表单；target:用于发送请求和接收响应的窗口名称；

表单元素的属性和方法

表单标志的主要元素、属性如下：

<form></form>创建表单<select multiple name="name" size=""></select>创建滚动菜单,size设置在需要滚动前可以看到的表单项数目<option> 设置每个表单项的内容<select name="name"></select>创建下拉菜单<option> 设置每个菜单项的内容<textarea name="name" cols=40 rows=8></textarea>创建一个文本框区域,列的数目设置宽度,行的数目设置高度<input type="checkbox" name="name">创建一个复选框,文字在标签后面<input type="radio" name="name" value="">创建一个单选框,文字在标志后面<input type="file" name="name" value="">创建一个文件选择按钮<input type="text" name="foo" size=20> 创建一个单行文本输入区域,size设置为字符串的宽度<input type="email" name="email"> 创建邮件格式的输入框<input type="url" name="url">  创建网址格式的输入框<input type="submit" value="name">创建提交(submit)按钮<input type="image" border=0 name="name" src="name.gif">创建一个使用图像的提交(submit)按钮<input type="reset">创建重置(reset)按钮

表单元素共有属性和方法：

disabled是否可用，form字段所属表单，name字段名称，readOnly是否只读，tabIndex字段切换序号，type字段类型(控件类型)，value字段的值，checkValidity字段是否有效，focus()聚焦，blur()失去焦点函数，

代码示例：

input1.onkeyup = function(event){    var target = event.target;                                //获取事件目标元素，也就是this    if(target.value.length == target.maxLength) {             //value字段的值，maxLength属性        var form = target.form;                                 //form目标所属表单        if(form.elements[1] && !form.elements[1].readOnly){    //elements表单元素集合，readOnly字段属性            form.elements[1].focus();                           //focus字段函数-聚焦            form.reset();                                       //表单函数-恢复默认        }    }};

文件元素，input type=”file”

myfile.onchange = function(event){    var files = event.target.files;    var reader = new FileReader();                      //异步读取文件    var type = "default";    if(/image/.test(files[0].type)){                     //test判断是否匹配，"名称"：files[0].name，"类型"：files[0].type，"大小"：files[0].size        type  = "image";        reader.readAsDataURL(files[0]);                   //readAsdataURL读取文件以数据URL的形式保存，readAsText以纯文本形式读取指定编码形式文件，readAsBinaryString读取文件成字符串，readAsArrayBuffer读取文件成数组    }else{        reader.readAsText(files[0]);        type="text";    }    reader.onerror = function(){alert("读取文件出错"+reader.error.code);};    reader.onprogress = function(event){                //每50ms更新一次进度        if(event.lengthComputable)            var rate = event.loaded/event.total;        alert("加载比例"+rate);    };    reader.onload=function(){        switch (type){            case "image":hintdiv.insertAdjacentHTML("beforeend","<img src='"+reader.result+"'>");break;            case "text":hintdiv.insertAdjacentHTML("beforeend",reader.result);break;        }    };};

文本框元素，input type=”text”或textarea

text1.select();                                     //text和textarea文本内容被全部选择，会自动聚焦text1.setSelectionRange(1,4);                       //选择部分文本，参数为起点和终点索引，会选中包含起点，但不包含终点的文本console.log(text1.value.substring(text1.selectionStart,text1.selectionEnd-1));  //selectionStart选择的文本的起点，selectionEnd选择的文本的终点

选择框元素，option、select

select 选择框属性和方法：

selectedIndex选中项索引，size选中框可见行数，multiple是否允许多选,options选项元素合集，add(newoption,reloption)，remove(index)删除选项，

option选项属性：

index选项索引，label选项标签，selected是否被选中，text选项的文本，value选项的value值

示例代码

var myselect = document.getElementById("myselect");var newoption = document.createElement("option");               //创建选项元素newoption.appendChild(document.createTextNode("第3个选项"));    //选项添加文本newoption.setAttribute("value","myoption3");                    //选项添加valuemyselect.appendChild(newoption);                                 //添加选项newoption = new Option("第4个选项","myoption4");                //创建选项元素myselect.appendChild(newoption);                                  //插入新选项newoption = new Option("第5个选项","myoption5");                 //创建选项元素myselect.add(newoption,undefined);                               //插入新选项myselect.removeChild(myselect.options[0]);                       //options选项合集，removeChild删除子元素myselect.remove(0);                                                //删除第一个选项，myselect.options[0]=null;                                         //删除第一个选项，myselect.insertBefore(myselect.options[1],myselect.options[0]); //调换选项位置myselect.options[1].selected=true;                                //设置第二个选项被选中var selectoption = myselect.options[myselect.selectedIndex];   //selectedIndex当前选中项索引console.log(selectoption.text+selectoption.value);

表单提交

对于在提交前需要执行检验数据等函数的，可以使用以下两种方式。

1、仍然使用submit按钮

表单的写法<form id="formid"  name= "myform" method = 'post'  action = 'user_login_submit.action' onsubmit = "return 你的函数();" >js代码function 你的函数(){     return false;//不提交     return true;//提交}

2、button代替提交按钮

表单内<input type="button" onclick = "你的函数();" />js代码function 你的函数(){     return false;//不提交     document.getElementById("formid").submit();//提交}

除了使用submit按钮提交外，这里介绍将表单序列化。将表单序列化为字符串，以get方式发送数据。

完成表单的序列化，主要实现下面几步

1. 对表单字段的名称和值进行URL编码，使用&分割；
2. 不发送禁用的表单字段；
3. 只发送勾选的单选框和复选框按钮数据；
4. 不发送type为reset和button的按钮；
5. 多选选择框中的每个选中的值单独一个条目；
6. Select元素的值，就是选中option元素的value的值，如果option没有属性value，则是选中的文本值；

function serialize(form) {    var arrs = [],    field = null,    i,    len,    j,    optLen,    option,    optValue;    for(i = 0,len = form.elements.length; i < len; i++) {        field = form.elements[i];        switch(field.type) {            case "select-one":               case  "select-multiple":            if(field.name.length) {                 for(j = 0,optLen = field.options.length; j < optLen; j++) {                       option = field.options[j];                       if(option.selected) {                           optValue = '';                           if(option.hasAttribute) {                               optValue = option.hasAttribute("value") ? option.value : option.text;                           }else {                               optValue = option.attributes["value"].specified ? option.value : option.text;                           }                           arrs.push(encodeURIComponent(field.name) + "=" +encodeURIComponent(optValue));                       }                   }             }            break;            case undefined:      //字段集            case "file":         // 文件输入            case "submit":       // 提交按钮            case "reset":        // 重置按钮            case "button":       // 自定义按钮            break;            case "radio":        // 单选框            case "checkbox":     // 复选框            if(!field.checked) {                break;            }            /* 执行默认动作 */           default:           // 不包含没有名字的表单字段           if(field.name.length) {               arrs.push(encodeURIComponent(field.name) + "=" +encodeURIComponent(field.value));           }       }    }    return arrs.join("&");}

测试代码

var formId = document.getElementById("formId");console.log(serialize(formId));