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中的action
elements: 表单中所有控件的集合，进而可以通过索引或名称访问控件
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;                                //获取事件目标元素，也就是thisif(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].sizetype  = "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");                    //选项添加value
myselect.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方式发送数据。

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

对表单字段的名称和值进行URL编码，使用&分割；
不发送禁用的表单字段；
只发送勾选的单选框和复选框按钮数据；
不发送type为reset和button的按钮；
多选选择框中的每个选中的值单独一个条目；
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));