按钮Button：按钮是最常用的表单元素之一，有两种形式的按钮，button按钮和radio单选、checkbox复选按钮；提交和重置元素本身便是按钮，并且有干系联的默认动作，如果其click事宜处理程序返回false，也就取消它的默认行为了；也可以利用它们的click事宜来实行表单的验证及提交，但最为常用的还是利用form工具本身的submit事宜进行验证和提交；普通按钮是没有默认行为的，一样平常来说利用它们来实行自定义脚本，当然也可以用它来实行form.submit()方法来提交表单；对付type为”submit”或type=”image”的按钮，HTML5新增了formaction、formmethod、formenctype、formtarget属性，个中formaction属性用于覆盖form的 action属性，浸染是为不同的提交按钮增加formaction属性，使得在单击时可以将表单提交给不同的页面；formmethod属性为每个不同的提交按钮分别指定不同的提交方法；formenctype属性为每个不同的提交按钮分别指定不同的编码办法；formtarget属性用于为每个不同的提交按钮指定在何处打开提交页面；这些属性在Javascript中都有相对应的同名属性，如：
<form action="demo.php"> <input type="submit" formaction="center/" formmethod="GET" formtarget="_blank" formenctype="multipart/form-data" value="用户中央" /> <input type="submit" formaction="admin/" formmethod="POST" formaction="_self" formenctype="application/x-www-form-urlencoded" value="后台管理" /></form><script>var btnSubmit = document.forms[0].elements[0];console.log(btnSubmit.formAction);console.log(btnSubmit.formMethod);console.log(btnSubmit.formTarget);console.log(btnSubmit.formEnctype);</script>
radio单选和checkbox复选按钮（框）是开关按钮，其只有两种状态：选中或未选中；
<form id="myForm" name="myForm"><p>性别：<input type="radio" name="sex" id="male" value="1" />男<input type="radio" name="sex" id="remale" value="0" checked />女</p><p>课程：HTML<input type="checkbox" name="course" id="c1" value="HTML" />CSS<input type="checkbox" name="course" id="c2" value="CSS" checked />JavaScript<input type="checkbox" name="course" id="c3" value="JavaScript" /></p></form><script>var male = document.getElementById("male");console.log(male); // <input>male = document.forms["myForm"].elements["male"];console.log(male); // <input></script>
单选和复选按钮都定义了checked属性，该属性为可读写的布尔值；defaultChecked属性对应的是HTML的checked属性，也是布尔值，它指定了元素在第一次加载页面时是否选中；
var male = document.forms["myForm"].elements["male"];var remale = document.forms["myForm"].elements["remale"];console.log(male.checked); // falseconsole.log(male.defaultChecked); // falseconsole.log(remale.checked); // trueconsole.log(remale.defaultChecked); // truemale.checked = true;console.log(male.checked); // trueconsole.log(male.defaultChecked); // falseconsole.log(remale.checked); // falseconsole.log(remale.defaultChecked); // truemale.defaultChecked = true;console.log(male.checked); // trueconsole.log(male.defaultChecked); // trueconsole.log(remale.checked); // falseconsole.log(remale.defaultChecked); // true
checked会令一个单选按钮组中所有元素互斥，defaultChecked也是可写的（W3C定义其是只读的，以是写入的操作是不规范的），但它不是互斥的；以是可以利用这两个属性把单选按钮规复到默认的状态，如：
male.checked = true;male.checked = male.defaultChecked; remale.checked = remale.defaultChecked;
对付复选框，也是类似的，但其checked不是互斥的，由于它本身就许可多选；例如：复位单选和复选状态；
<p><input type="button" value="重置单选和复选" id="resetRadioCheckbox" /></p><script>var resetRadioCheckbox = document.getElementById("resetRadioCheckbox");resetRadioCheckbox.onclick = function(){ // var radioList = document.querySelectorAll('input[type="radio"]'); var radioList = document.getElementsByName("sex"); // 也可以 console.log(radioList); for(var i=0,len=radioList.length; i<len; i++) radioList[i].checked = radioList[i].defaultChecked; var checkList = document.getElementsByName("course"); for(var i=0,len=checkList.length; i<len; i++) checkList[i].checked = checkList[i].defaultChecked; }</script>
单选和复选按钮本身并不显示任何文本，它们常日和相邻的HTML文本一起显示或与<label>元素干系联，以是其value属性并不显示出来，而只是为了提交给做事端；
var radioList = document.getElementsByName("sex");for(var i=0,len=radioList.length; i<len; i++){ if(radioList[i].checked) console.log("当选中的值是：" + radioList[i].value);}var checkList = document.getElementsByName("course");var checkStr = "";for(var i=0,len=checkList.length; i<len; i++){ if(checkList[i].checked) checkStr += checkList[i].value + ",";}if(checkStr != "") checkStr = checkStr.substring(0,checkStr.length - 1);else checkStr = "无";console.log("当选中的值是：" + checkStr);
同时，也会根据获取来的值来设置单选或复选按钮的选中状态，如：
window.onload = function(){ var sexValue = 1; // 从做事端获取 var radioList = document.getElementsByName("sex"); for(var i=0,len=radioList.length; i<len; i++){ if(radioList[i].value == sexValue){ radioList[i].checked = true; break; } } var courseValue = "JavaScript,HTML"; // 从做事端获取 var arrCourse = courseValue.split(","); var checkList = document.getElementsByName("course"); for(var i=0,len=checkList.length; i<len; i++){ // if(arrCourse.indexOf(checkList[i].value) >= 0) // 或者 if(arrCourse.includes(checkList[i].value)) checkList[i].checked = true; else checkList[i].checked = false; }}
其每每成组并利用共享的name，如果利用共享的name获取这些元素时，返回是一个类数组而不是单个元素；
<script>var sex = document.getElementsByName("sex");console.log(sex); // NodeListvar sex = document.forms["myForm"].elements["sex"];console.log(sex); // RadioNodeList</script>
利用elements凑集，返回的类型是更详细的RadioNodeList，该类型拥有一个value属性，返回单选按钮组中选中的value值；该属性是可读写的，在设置value属性时，value属性即是值的第一个单选按钮元素将被设置为checked，如：
console.log(sex.value); // 0sex.value = "1"; // 男就当选中的console.log(sex.value);
radio单选按钮的本意便是在一组单选按钮组中只能选择唯一一个，如果只有一个radio按钮，是没有多大实际意义的；纵然如此，如果利用elements属性，其返回的就不是NodeList，而是单个元素工具；
<p><input type="radio" id="single" name="single" value="单个按钮" /></p></form><script>var single = document.forms[0].elements["single"];console.log(single); // <input>single.checked = true;console.log(single.checked);console.log(single.defaultChecked);console.log(single.value); // 单个按钮</script>
在获取checkbox时，如：
var courses = document.getElementsByName("course");console.log(courses); // NodeList<input>var courses = document.forms["myForm"].elements["course"];console.log(courses); // RadioNodeList<input>
虽然当前为checkbox组，并不是radio组，但返回的也是RadioNodeList，并不是类似的CheckboxNodeList类型，而且也不存在这个类型；其返回的RadioNodeList凑集的value属性无用；获取所有选中复选按钮的值，可以遍历所有当选中的选项；
当单击单选或复选按钮时，会触发onclick事宜，如果单击时改变了开关按钮的状态，也会触发change事宜；
var sexList = document.forms[0].elements["sex"];for(var i=0,len=sexList.length; i<len; i++){ var sex = sexList[i]; sex.addEventListener("change", function(event){ console.log(event.target.checked); console.log(event.target.defaultChecked); });}var courseList = document.forms[0].elements["course"];var log = document.getElementById("log");var arrCourse = [];for(var i=0,len=courseList.length; i<len; i++){ if(courseList[i].checked) arrCourse.push(courseList[i].value);}console.log(arrCourse.join());log.innerText = arrCourse.join();for(var i=0,len=courseList.length; i<len; i++){ var course = courseList[i]; course.addEventListener("change", function(event){ if (event.target.checked) { arrCourse.push(event.target.value); }else{ arrCourse.splice(arrCourse.indexOf(event.target.value),1); } console.log(arrCourse.join()); log.innerText = arrCourse.join(); },false);}
示例：全选：
<p>HTML<input type="checkbox" name="course" value="HTML" />CSS<input type="checkbox" name="course" value="CSS" />JavaScript<input type="checkbox" name="course" value="JavaScript" /></p><p><button id="all">全选</button> <button id="not">全不选</button><button id="reverse">反选</button></p><script>var chkBoxs = document.getElementsByName("course");// 全选var all = document.getElementById("all");all.onclick = function(){ for(var i=0; i<chkBoxs.length; i++){ chkBoxs[i].checked = true; }}// 全不选var not = document.getElementById("not");not.onclick = function(){ for(var i=0; i<chkBoxs.length; i++){ chkBoxs[i].checked = false; }}// 反选var reverse = document.getElementById("reverse");reverse.onclick = function(){ for(var i=0; i<chkBoxs.length; i++){ chkBoxs[i].checked = !chkBoxs[i].checked; }}</script>
示例：赞许提交
<div id="content"><p>Lorem ...</p></div><p><label>赞许此协议</label><input type="checkbox" id="cbAgree" disabled /></p><input type="submit" value="提交" id="btnSubmit" disabled /><script>window.onload = function(){ var cbAgree = document.getElementById("cbAgree"); var btnSubmit = document.getElementById("btnSubmit"); var s = 5; var timer = setInterval(function(){ btnSubmit.value = "等待" + s + "秒"; if(--s < 0){ clearInterval(timer); btnSubmit.value = "提交"; cbAgree.disabled = false; } },1000); cbAgree.addEventListener("change", function(event){ btnSubmit.disabled = !cbAgree.checked; },false);}</script>
Label标签元素：其与其它表单元素关联，关联的办法有两种：一是利用for属性，二是将<input>直接嵌套在<label>中，在这种情形下，不须要for和id属性，由于关联是隐式的；表单的elements凑集中并不包括Lable；
Label属性：
form：只读，是一个HTMLFormElement工具，表示与其关联的Form；如果没有关联Form，则为null；control：只读，表示与标签关联的表单元素；htmlFor：可读可写，是一个字符串，表示与其关联的表单元素的ID，与其HTML的for属性对应；var label = document.getElementsByTagName("label")[1];console.log(label);console.log(label.form);console.log(label.control);console.log(label.htmlFor);label.htmlFor = "c2";console.log(label.control); // checkboxconsole.log(label.htmlFor); // c2
表单元素的labels属性：只读，返回表单元素关联的所有<label>元素的NodeList，如：
<p><label for="content">内容：</label><br/><textarea id="content" name="content"></textarea><br/><label for="content">请输入简要的内容</label></p></form><script>var content = document.forms["myForm"].elements["content"];console.log(content.labels); // NodeList(2)var label = content.labels[0];console.log(label); // labelconsole.log(label.textContent); // 内容：console.log(label.form); // <form>console.log(label.control); // textarea#contentconsole.log(label.htmlFor); // content</script>
select选择框：选择框是通过<select>和<option>元素创建的，其属于HTMLSelectElement类型，浏览器常日将其渲染为下拉菜单的形式或设置其size属性大于1呈现为列表的形式；
<form id="myForm" name="myForm"><select name="province" id="province"> <option value="beijing" label="大北京">北京</option> <option>安徽</option> <option value="jiangsu">江苏</option> <option value="guangdong">广东</option> <option value="shangdong">山东</option></select></form>
其拥有除了所有表单元素共有的属性和方法外，还供应了：
size ：选择框中可见的行数；等价于HTML中的size特性；multiple：布尔值，表示是否许可多选；等价于HTML中的multiple特性；type：值为”select-one”或”select-multiple”，取决于HTML代码中有没有multiple特性；options：控件中所有<option>元素的HTMLCollectoin；selectedIndex：选中项的索引，如果没有选中项，为0；对付多选，只保存选中项中第一项的索引；selectedOptions：表示所选中<option>元素集的HTMLCollection；add(newOptoin, relOption)：向<select>中插入新<option>元素，其位置在指定项relOption之前；remove(index)：移除给定位置的<option>选项；length：返回<option>数量；value：由当前选中项决定：如果没有选中的项，则为空字符串；如果有一个选中项，而且该项的value特性已经在HTML中指定，就即是该option的value值，纵然该value是空字符，也是如此；如果有一个选中项，但该项的value特性在HTML中未指定，则该value即是该项的文本(text)；如果有多个选中项，取得第一个选中项的值；当其type为select-one和select-multiple时，其选择的行为是不一样的，如果为select-multiple，许可多选，但此时，其value返回的是第一个option的value值；options属性，其返回包含了多个Option元素的HTMLOptionsCollection凑集，如：var province = document.forms[0].elements["province"];console.log(province.options); // HTMLOptionsCollection
该凑集拥有length、selectedIndex属性和add()及remove()方法；个中selectedIndex返回的是选中项的索引；通过options的索引可以返回一个option工具；
console.log(province.options.selectedIndex); // 2console.log(province.selectedIndex); // 2console.log(province.options[1]); // <option>
通过select工具的item(index)方法或select的索引也可以返回一个option工具；
var opt = selectbox.item(1);var opt = selectbox[1];console.log(opt);console.log(opt.index);console.log(opt.text);
每个<option>元素属于HTMLOptionElement类型，该类型继续自成 HTMLElement，其拥有下列属性：
index：当前项在options凑集中的索引；form：只读，其所属的form，与其所在的HTMLSelectElement 工具的form属性同等；label：当前选项的Label属性；如果没有此属性，则返回元素的text；selected：布尔值，表示当前选项是否当选中；将这个属性设置为true可以选中当前选项；defaultSelected：对应其HTML的selected特性的初始值；text：选项显示的纯文本字符串；value：选项的值；等价于HTML中的value特性，即提交给做事真个文本；设置这些属性的目的，是为了方便对选项数据的访问，虽然可以利用常规的DOM功能来访问这些信息，但效率比较低：
var province = document.forms[0].elements["province"];// 不推举// var text = province.options[0].firstChild.nodeValue;var text = province.options[0].textContent; // 或var value = province.options[0].getAttribute("value");console.log(text, value);// 推举var text = province.options[0].text;var value = province.options[0].value;console.log(text, value);console.log(province.options[0].index);console.log(province.options[0].selected);console.log(province.options[0].label);province.options[2].selected = true;// options[1]没有value,以是返回其textconsole.log(province.options[1].value);
在未指定value特性的情形下，IE7会返回空字符串，其他会返回与text特性相同的值；
<opggroup>：<optgroup>HTML元素在<select>元素中创建一组选项，其属于HTMLOptGroupElement类型，属性为：disabled：是一个布尔值，表示全体子项列表<option>是否已禁用（true）或未禁用（false）；label：表示组label属性；
<form><select id="selectbox"> <optgroup label="前端" disabled> <option>HTML</option> <option>CSS</option> <option>JavaScript</option> </optgroup> <optgroup label="后端"> <option>C#</option> <option>Java</option> <option>PHP</option> </optgroup></select><script>var selectbox = document.getElementById("selectbox");var optgroup = selectbox.getElementsByTagName("optgroup")[0];console.dir(optgroup); // HTMLOptGroupElementconsole.dir(optgroup.label); // 前端</script>
选择选项：对付只许可选择一项的选择框，最大略的办法便是直策应用selectedIndex属性，利用此属性既可以获取选中的项，也可设置某个项被造中；如：
var selectedIndex = province.selectedIndex;var selectedOption = province.options[selectedIndex];console.log("选中项的索引：" + selectedIndex + ",text" + selectedOption.text + ",value：" + selectedOption.value);province.selectedIndex = 1; // 根据索引设置选中项var selectedIndex = province.selectedIndex;var selectedOption = province.options[selectedIndex];console.log("选中项的索引：" + selectedIndex + ",text" + selectedOption.text + ",value：" + selectedOption.value);
对付multiple多项的选择，单个selectedIndex属性不敷以表示当选中的多个选项，纵然选中多个，读取则只会返回选中项第一项的索引值且其value值也是第一个选中的Option的value值；
selected属性：另一种选择选项的办法，即取得某一项的引用，然后将其selected属性设置为true；
console.log(province.options[0].selected); // falseconsole.log(province.options[2].selected); // trueprovince.options[0].selected = true;province.options[1].selected = true;
与selectedIndex不同的是，在许可多选的选择框中设置选项的selected属性，不会取消对其他选中项的选择，因而可以动态选中任意多个项；但如果是在单选择框中，会取消对其他选择的选择；
selected属性的浸染紧张是确定用户选择了选择框中的哪些项；要取得所有选中的项，可以遍历Options选项凑集，逐个测试每个选项的selected属性：
var province = document.forms[0].elements["province"];function getSelectedOptions(selectbox){ var result = new Array(); var option = null; for(var i=0, len=selectbox.options.length; i<len; i++){ option = selectbox.options[i]; if(option.selected){ result.push(option); } } return result;}var province = document.forms[0].elements["province"];var selectedOptions = getSelectedOptions(province);var msg = "";for(var i=0,len = selectedOptions.length; i<len; i++){ msg += "index:" + selectedOptions[i].index + ",text:" + selectedOptions[i].text + ",value:"+ selectedOptions[i].value + ";";}console.log(msg);
selectedOptions属性：只读属性，其返回当前选定的<option>元素的HTMLCollection；
console.log(province.selectedOptions); // HTMLCollection
如果是select-one单选，个中包含一个option，如果是select-mutiple多选，就包括所有选定的option；例如：获取所有选中项
<label for="foods">你喜好吃什么？</label><br><select id="foods" name="foods" size="7" multiple> <option value="1">苹果</option> <option value="2">喷鼻香蕉</option> <option value="3">桔子</option> <option value="4">披萨</option> <option value="5">西红柿</option></select><br><button name="order" id="order">确定</button><p id="output"></p><script>var orderButton = document.getElementById("order");var itemList = document.getElementById("foods");var outputBox = document.getElementById("output");orderButton.addEventListener("click", function() { var collection = itemList.selectedOptions; var output = ""; for (var i=0; i<collection.length; i++) { if (output === "") { output = "你喜好吃的食品如下："; } output += collection[i].text; if(i === (collection.length - 2) && (collection.length < 3)) output += "和"; else if(i < (collection.length - 2)) output += "，"; else if(i === (collection.length - 2)) output += "和"; } if(output === "") output = "你啥也不喜好"; outputBox.innerHTML = output;}, false);</script>
添加选项：可以动态添加选项，并将它们添加到选择框中；有多种添加的办法：第一种：利用DOM方法：
var newOption = document.createElement("option");newOption.appendChild(document.createTextNode("天津"));// newOption.setAttribute("value", "tianjin");newOption.value = "tianjin";selectbox.appendChild(newOption);
第二种：利用Option布局函数来创建新选项：语法：var option = new Option(text?, value?, ?defaultSelected, ?selected);参数text和value分别设置Option工具的text和value；后两个参数，分别设置option的defaultSelected和selected属性，4个参数均为可选；其会返回一个<option>元素；
var newOption = new Option("上海", "shanghai");selectbox.appendChild(newOption);newOption = new Option("四川","sichuan",true,true);selectbox.appendChild(newOption);newOption = new Option();newOption.text = "贵州";newOption.value = "guizhou";newOption.label = "俏丽贵州";newOption.selected = true;selectbox.appendChild(newOption);
IE7以下不可用，由于它不能精确设置新选项的text属性；
第三种：利用选择框的add()方法：语法：select.add(option[, before)；其接管两个参数：要添加的新选项option和将位于新选项之后的选项before；before即可以是一个option也可以是选项的索引；before为可选，如果要在列表的末了添加选项，该当将第二个参数设置为null、undefined或者不设；如：
var newOption = new Option("上海", "shanghai");selectbox.add(newOption, selectbox.options[1]); // 第2个位置selectbox.add(newOption, 1); // 第2个位置selectbox.add(newOption, null); // 末了位置selectbox.add(newOption, undefined); // 末了位置selectbox.add(newOption, 100); // 末了位置selectbox.add(newOption); // 末了位置
如果将新选项添加到任意位置，利用DOM技能和insertBefore()方法也可以；
第四种，利用options属性也可以把新的option添加到选择框中，或者利用表单索引，如：
var newOption = new Option("上海", "shanghai");selectbox.options[selectbox.options.length] = newOption; // 或者selectbox[selectbox.options.length] = newOption;// 如，添加多个var arrOptions = ['重庆','云南','广西'];arrOptions.forEach(function(v,i){ selectbox[selectbox.options.length] = new Option(v);});// 或arrOptions = [ {text: "重庆", value: "chongqing"}, {text: "云南", value: "yunnan"}, {text: "广西", value: "guangxi"}];arrOptions.forEach(function(v,i){ selectbox[selectbox.options.length] = new Option(v.text, v.value);});
移除选项：移除选项也有多种办法：首先可以利用DOM的removeChild()方法，为其传入要移除的选项；其次可以利用选择框的remove()方法，为其传入要移除选项的索引；末了，可以将相应选项设置为null；
selectbox.removeChild(selectbox.options[1]);selectbox.remove(2);selectbox.options[2]=null;// 如果不带参数，会删除selectbox本身selectbox.remove();
移除选择框中所有的项，可以迭代所有选项并逐个移除：
function clearSelectbox(selectbox){ for(var i=0,len=selectbox.options.length; i<len; i++){ selectbox.remove(0); }}clearSelectbox(selectbox);
利用options属性也可以移除全部或某个选项，
selectbox.options[1] = null; // 移除第2个selectbox.options.length = 2; // 截断，只保留2个// selectbox.options.length = 0; // 移除所有selectbox.length = 0; // 移除所有
移动选项：将一个选择框中的选项移动到另一个选择框中，利用DOM的appendChild()方法，由于利用appendChild()方法并传入一个已存在的元素，那么就会先从该元素的父节点中移除它，再把它添加到新的指定的位置；
var selectbox1 = document.getElementById("selLocation1");var selectbox2 = document.getElementById("selLocation2");selectbox2.appendChild(selectbox1.options[1]);
移动和移除选项有一个共同之外，即会重置每一个选项的index属性；
<h3>移动选项</h3><select name="sel1" id="sel1" size="8" multiple> <option value="">唐</option> <option value="">宋</option> <option value="">元</option> <option value="">明</option> <option value="">清</option></select><button id="toRight">>></button><button id="toLeft"><<</button><select name="sel2" id="sel2" size="8" multiple> <option value="">秦</option> <option value="">汉</option> <option value="">三国</option> <option value="">两晋</option> <option value="">南北朝</option></select><script>var sel1 = document.getElementById("sel1");var sel2 = document.getElementById("sel2");var toRight = document.getElementById("toRight");var toLeft = document.getElementById("toLeft");toRight.onclick = function(){ var options = sel1.selectedOptions; for(var i=options.length-1; i>=0; i--){ sel2.appendChild(options[i]); }};toLeft.onclick = function(){ var options = sel2.selectedOptions; for(var i=options.length-1; i>=0; i--){ sel1.appendChild(options[i]); }}</script>
重排选项：重排选项的次序，最好的办法也是DOM方法，如appendChild()适宜将选项添加到选择框的末了，insertBefore()可以将选项移动到指定位置，如：
var optionToMove = selectbox.options[1];// 向上移一下selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index - 1]);// 向下移一下selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index + 2]);
select的事宜：选择框的change事宜与其他表单控件的change事宜触发的条件不一样，其他控件的change事宜是在值被修正且焦点离开时触发，而选择框的change事宜只要选中了选项就会触发；选择不同的选项时，也会触发input事宜，如：
selectbox.addEventListener("change", function(event){ console.log(event.target.selectedIndex);});function inputHandler(e){ console.log(e.target.value);}selectbox.addEventListener("input", inputHandler);
示例：跳转
<select id="links"> <option value="https://www.zeronetwork.cn">零点网络</option> <option value="https://cn.bing.com">Bing</option> <option value="https://www.apple.com">苹果</option></select><script>var links = document.getElementById("links");links.addEventListener("change", function(event){ location.href = event.target.options[event.target.selectedIndex].value;});</script>
表单序列化：随着Ajax的涌现，表单序列化已经成为一种常见需求；在Javascript中，可以利用表单元素的type属性，连同name和value属性一起实现对表单的序列化；浏览器把数据发送给做事器事理：
对表单字段的名称和值进行URL编码，利用和号(&)分隔；不发送禁用的表单字段；只发送勾选的复选框和单选按钮，并且复选框中的每个选中的值单独一个条款；不发送type为”reset”和”button”的按钮；多选选择框中的每个选中的值单独一个条款；如：表单大略序列化；
var btn = document.getElementById("btn");btn.addEventListener("click", submitHandler, false);function submitHandler(event){ var myForm = document.forms[0]; var username = myForm.elements["username"].value; var userpwd = myForm.elements["userpwd"].value; var sex = myForm.elements["sex"].value; var courseValue = []; var courseList = myForm.elements["course"]; for(var i=0, len=courseList.length; i<len; i++){ if(courseList[i].checked) courseValue.push(courseList[i].value); } var params = "username=" + username + "&userpwd=" + userpwd + "&sex=" + sex + "&course=" + courseValue; console.log(params);}
如：通用序列化：
function serialize(form){ // 后面要用到的变量 var params = new Array(); var field = null, i, j, len, optLen, option, chkObj = {}; for(i=0, len=form.elements.length; i<len; i++){ field = form.elements[i]; switch(field.type){ // 如果是select，包含单选和多选 case "select-one": case "select-multiple": arrOpt = []; for(j=0, optLen=field.options.length; j<optLen; j++){ option = field.options[j]; if(option.selected){ arrOpt.push(encodeURIComponent(option.value)); } } arrOpt = arrOpt.join(","); params.push(encodeURIComponent(field.name) + "=" + arrOpt); break; // 如果是fieldset、file、submit、reset、button不提交 case undefined: //字段集 case "file": //文件域 case "submit": //提交 case "reset": //重置 case "button": //按钮 break; // 如果是单选或复选框 case "radio": case "checkbox": if(field.checked){ if(chkObj[field.name]) chkObj[field.name].push(encodeURIComponent(field.value)); else chkObj[field.name] = [encodeURIComponent(field.value)]; } break; default: // 如果没有名字的表单元素，不提交 if(field.name.length) params.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value)); } } for(var o in chkObj){ params.push(encodeURIComponent(o) + "=" + chkObj[o].join(",")); } return params.join("&");}// 运用var btn = document.getElementById("btn");btn.addEventListener("click", submitHandler, false);function submitHandler(event){ var myForm = document.forms[0]; var params = serialize(myForm); console.log(params);}
无刷新提交（局部刷新）：
<script>function saveUserInfo(){ var msg = document.getElementById("msg"); var form = document.forms[0]; // 提交地址 var url = "./demo.php"; // POST的值，把每个变量都通过&来联接 var postStr = serialize(form); // XmlHTTP var XmlHTTP; if(window.XMLHttpRequest) { XmlHTTP = new XMLHttpRequest(); }else if(window.ActiveXObject) { XmlHTTP = new ActiveXObject("Microsoft.XMLHTTP"); } XmlHTTP.open("POST", url, true); //定义传输的文件HTTP头信息 XmlHTTP.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); XmlHTTP.send(postStr); //发送POST数据 //获取实行状态 XmlHTTP.onreadystatechange = function() { //如果实行状态成功，那么就把返复书息写到指定的层里 if (XmlHTTP.readyState == 4 && XmlHTTP.status == 200) { msg.innerHTML = XmlHTTP.responseText; } }}</script><div id="msg"></div><form name="userinfo" method="post" action=""> 姓名：<input type="text" id="username"name="username" /><br /> 年事：<input type="text" name="age" /><br /> 性别：<input type="text" name="sex" /><br /> <input type="button" value="提交表单" onClick="saveUserInfo()"></form>
demo.php：
<?php$username = $_POST['username'];$age = $_POST['age'];$sex = $_POST['sex'];echo "$username <br>";echo "$userage <br>";echo "$usersex <br>";// 链接数据库，并保存到数据库，$result为实行结果$result = true;if ($result){ echo "提交成功！
";}else { echo "提交失落败！
";}?>
整合：saveUserInfo()中换成：
// 提交地址 var url = "./demo.php"; // POST的值，把每个变量都通过&来联接 var postStr = serialize(form);
submitHandler()事宜处理函数：
function submitHandler(event){ saveUserInfo();}
