表单脚本
表单基础知识：
在HTML中，表单由<form>元素来表示，而在javascript中，表单对应的则是HTMLFormElement类型，HTMLFormElement继承了HTMLElement，因而因而与其他的HTML元素具有相同的默认属性。不过HTMLFormElement也有它自己的独有的属性和方法：
acceptCharset：服务器能够处理的字符集，等价于HTML中的accept-charset特性；
action：接受请求的URL；等价于HTML中的action特性。
elements：表单中所有控件的集合（HTMLCollection）。
enctype：请求的编码类型；等价于HTML中enctype。
length：表单中控件的数量；
method：要发送HTTP请求类型，通常是“get”或“push”；等价于HTML中的method特性；
name：表单名称，等价于HTML中name特性；
reset（）：将所有表单域重置为默认值；
submit（）：提交表单；
target：用于发送请求和接收响应的窗口名称；等价于HTML的target特性。
取得表单元素的方法：
var form=document.getElementById("form1");//通过设置的id来获取
var firstForm=document.forms[0];//获取页面中第一个表单
var myForm=document.forms["form2"];//取得页面中称为"form2"的表单
//另外，一些早期的浏览器或者那些支持向后兼容的浏览器中，会把每个设置的name特性的表单作为属性保存在document中，通过document.form2可以访问到名为form2的表单，不过不推荐这样获取，因为会出问题，以后浏览器可能不会支持；
提交按钮：
input和button都可以设置type特性来定义提交按钮，而图像按钮是将input的type特性设置为image，src设置为图片路径来定义的
单击以下按钮都可以提交表单
<!-- 图像按钮 --> <input name="form1" id="form1" type="image" value="图像按钮" src="./images/banner.png"> <!-- 通用提交按钮 --> <input type="submit" value="通用提交按钮"> <!-- 自定义提交按钮 --> <button type="submit">自定义提交按钮</button>
只要表单中存在上面任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交表单；（textarea是一个例外，在文本区回车键会换行）。如果表单里没有提交按钮，按回车键不会提交表单；
以这种方式提交表单时，浏览器会在请求发送给服务器之前触发submit事件，这样我们就有机会验证表单数据，并据以决定是否允许提交表单，阻止这个事件的默认行为就可以取消表单提交，例如下列代码会阻止表单提交：
//以下用的是上一篇事件中，封装的跨浏览器方法来阻止表单默认行为
var form=document.getElementById("myForm");
EventUtil.addHandler(form,"submit",function(event){
//取得时间对象
EventUtil.getEvent(event);
//阻止默认行为
EventUtil.preventDefault(event);
})
当表单数据无效而不能发送给服务器时，可以用上述方法阻止表单提交；
在javascript中，用编程方式调用submit（）方法也可以提交表单；这种方式无需表单包含提交按钮，任何时候都可以提交表单。如：
var form=document.getElementById("myForm");
form.submit();
在调用submit（）方法的方式提交表单时，不会触发submit事件，因此记得在条用此方法之前先验证表单；
为了避免重复提交表单，（当用户提交表单，下订单时，因为服务器需要需要反应时间，可能连续提交表单，这样会造成重复提交订单！！）。解决重复提交订单的方法有：
在第一次提交表单后就禁用提交按钮，或则用onsubmit事件处理程序取消后续的表单提交操作；
重置表单：
重置表单，就是将表单内容恢复到初始值，如果初始内容为空，则恢复为空，如果有默认值，则恢复为默认值；
将input或button的type特性值设置为reset，都可以创建重置按钮：
<!-- 通用重置按钮 --> <input type="reset" value="reset form"> <!-- 自定义重置按钮 --> <button type="reset">reset form</button>
用户单击重置按钮时会触发reset事件，利用这个机会，我们可以阻止重置表单默认事件；
var form=document.getElementById("myForm");
EventUtil.addHandler(form,"reset",function(event){
//获取事件对象
event=EventUtil.getEvent(event);
//阻止表单重置
EventUtil.preventDefault(event);
})
//与submit一样，也可以用javascript编程方式来重置表单，如：
form.reset();
//与调用submit（）方法不同，调用reset()方法会触发reset事件。
//我们经常不会一股脑的让整个表单重置，如果用户误点重置按钮就会很烦恼，一般这个重置表单需求很少，一般都是让用户回到上一个页面
表单字段：
每个表单（<form>）都有自己的elements属性，该属性是表单中所有表单元素（字段）的集合。这个elements集合是一个有序列表，其中包含着表单中的所有字段。
例如：input，textarea，button，fieldset。每个表单字段elements集合中的顺序，与他们出现在标记中的顺序相同，可以按照位置和name特性来访问他们。如：
var form=document.getElementById("myForm");
//取得表单中的第一个字段
var field1=form.elements[0];
//取得名为textbox1的字段
var field2=form.elements["textbox1"];
// 取得表单包含的字段的数量
var fieldCount=form.elements.length;
如果有多个表单控件都在使用一个name，那么就会返回以该name命名的一个NodeList。例如，以下面的HTML代码为例。
<body> <form method="post" id="myForm"> <ul> <li><input type="radio" name="color" value="red">red</li> <li><input type="radio" name="color" value="green" >green</li> <li><input type="radio" name="color" value="blue">blue</li> </ul> </form> <script> var form=document.getElementById("myForm"); var colorFields=form.elements["color"]; console.log(colorFields);//RadioNodeList(3) [input, input, input, value: ""] console.log(colorFields.length);//3 var firstColorField=colorFields[0]; var firstFormField=form.elements[0]; console.log(firstColorField);//<input type="radio" name="color" value="red"> console.log(firstFormField);//<input type="radio" name="color" value="red"> </script>
</body>
进可能的用elements属性来访问表单字段
共有的表单字段属性：
除了<fieldset>元素之外，所有表单字段都拥有相同的一组属性。由于<input>类型可以表示多种表单字段，因此有些属性只适用于某些字段，但还有一些属性是所有字段所共有的。表单字段所共有的属性如下：
disabled：布尔值，表示当前字段是否被禁用；
form：指向当前字段所属表单的指针；只读
name：当前字段的名称；
readOnly：布尔值，表示当前字段是否只读；
tabIndex：表示当前字段的切换（tab）序号；
type：当前字段类型，如"checkbox"，"radio",等等；
value：当前字段将被提交给服务器的值，对于文件字段来说，这个属性是只读的，包含着文件在计算机中的访问路径。
除了form属性之外，可以通过javascript动态修改其它任何属性；例：
var form=document.getElementById("myForm");
var field=form.elements[0];
//修改value属性
field.value="another value";
//检查form属性的值
console.log(field.form);
//把焦点设置到当前字段
field.focus();
//禁用当前字段
field.disabled=true;
//修改type属性（不推荐，但对input字段来说是可行的）
field.type="checkbox";
由于能够动态的修改表单字段，很多用户很可能会重复点击表单的提交，如果涉及到信用卡消费，，重复提交会造成费用翻倍；最常见的解决方案是，在第一次提交后就禁用提交按钮；。只要侦听submit事件，并在该事件发生时禁用提交按钮即可；如：
var form=document.getElementById("myForm");
//采用上一篇的跨浏览器的方法
EventUtil.addHandler(form,"submit",function(event){
//获取事件对象
event=EventUtil.getEvent(event);
//获取目标对象
var target=EventUtil.getTarget(event);
//取得提交按钮
var btn=target.elements["提交按钮的name值"];
//禁用它
btn.disabled=true;
})
不要用click事件来实现禁用提交表单的功能，因为不同浏览器在触发click事件和submit事件时，顺序不同，如果click事件发生在submit事件之前，就永远也提交不了表单；
当然，submit事件只有表单内的提交按钮才可以触发，如果表单内没有提交按钮，自然也无法监听到submit事件；
除了<fieldset>之外，所有表单字段都有type属性。对于input元素，这个值等于HTML的特性type的值。对于其他元素，这个type属性的值如下列表：
| 说明 | HTML事例 | type属性的值 |
| 单选列表 | <select>...</select> | "select-one" |
| 多选列表 | <select multiple>...</select> | "select-multiple" |
| 自定义按钮 | <button>..</button> | "" |
| 自定义非提交按钮 | <button type="button">...</button> | "button" |
| 自定义重置按钮 | <button type="reset">...</button> | "reset" |
| 自定义提交按钮 | <button type="submit">...</button> | "submit" |
此外，input和button元素的type属性是可以动态改变的，而<select>元素的type属性则是只读的。
共有的表单字段方法：
focus（）和blur（）；
当页面加载完毕后，第一个表单字段自动获取焦点：
EventUtil.addHandler(window,"load",function(event){
document.forms[0].elements[0].focus();
})
HTML5还添加了autofocus方法，可以自动获取焦点
<input type="text" autofocus name="color" value="red">
不过，没有支持所有浏览器，如果想要上面的代码正常运行，首先要检测浏览器是否设置了该属性，如果设置了，就不用调用focus来获取焦点了
EventUtil.addHandler(window,"load",function(event){
var element=document.forms[0].elements[0];
if(element.autofocus!=true){
element.focus();
}
})
//其实上边的那个方法就就可以通用所有浏览器，如果非要用autofocus属性，就用这个方法来自动获取焦点
共有的表单字段事件：
除了支持鼠标、键盘、更改、和HTML事件之外，所有表单事件都支持下列3个事件
blur：当字段失去焦点时触发
change：对于input和textarea元素来说，他们失去焦点且value值改变时触发；对于select元素，在其选项改变时触发；
focus：当前字段获得焦点时触发；
注释：change事件和blur事件在不同浏览器发生的顺序有所不同
文本框脚本：
在HTML中有两种方式来表现文本框：一种是input元素的单行文本框，另一种是使用textarea元素的多行文本框；不过它俩之间有些重要的区别：
要表现文本框，input元素的type特性设置为text。而通过设置size特性，可以指定文本框中能显示的字符数。通过value特性，可以设置文本框的初始值，而maxlength特性则用于指定文本框可以接受的最大字符数。如果要创建一个文本框，让它能够显示25个字符，但输入不能超过50个字符，可以使用如下代码：
<input type="text" size="25" maxlength="50" value="inital value">
相对于textarea而言，则始终会呈现一个多行文本框，要指定文本框的大小，可以使用rows和cols特性，其中rows是行数，cols是列数（类似input的size特性）。与input不同，textarea的初始值要放在<textarea>和</textarea>之间：
<textarea name="" id="" cols="30" rows="10">初始值</textarea>
因为对文本框的value特性进行修改，不一定会反应在DOM中，因此对value进行修改时最好不要用DOM的方式，用javscript变成方式:
textbox.value="some new value";
选择文本：
上述两个文本框都支持select（）方法，这个方法用于选择文本框中的所有文本。
下面是，当一个文本框获得焦点时，触发选择另一个文本框的选择文本方法，并将另一个文本框的value，赋值给这个文本框：
var text1=document.getElementById("text1");
var text2=document.getElementById("text2");
text2.onfocus=function(){
var textvalue=text1.select();
text2.value=text1.value;
}
选择（select）事件：
与select（）方法对应的是一个select事件。在选择了文本框中的文本时，就会触发select事件，不过到底什么时候触发select事件，还会因浏览器而异。在IE9、opera、firefox、Chrome和safari中，只有用户选择了文本（并且释放鼠标），才会触发select事件。而在IE8及更早版本中，只要用户选择了一个字母（不必释放鼠标），就会触发select事件。另外，在调用select（）方法时也会触发select事件。如：
var text1=document.getElementById("text1");
var text2=document.getElementById("text2");
text2.onselect=function(){
text1.value=text2.value;
}
取得选择文本：
虽然通过select事件可以知道用户什么时候选择了文本，但仍然不知道用户选择了什么文本，HTML5为文本框添加了两个属性：selectionStart和selectionEnd。这两个属性中保存的是基于0的数值，表示所选择文本的范围（及文本选区开头和结尾的偏移量）。因此，要取得用户在文本框中选择的文本，可以使用如下代码：
var text1=document.getElementById("text1");
var text2=document.getElementById("text2");
text2.onselect=function(){
text1.value=getSelectedText(text2);
}
//取得选择的文本方法
function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
}
IE9+、Firefox、Safari、Chrome和Opera都支持者两个属性。IE8之前不支持这两个属性，但是提供了另一种解决方案；
IE8及更早版本中有一个document.selection对象，其中保存着用户在整个文档范围内选择的文本信息；也就是无法确定用户选择的是页面中哪个部分的文本。不过与select事件一起使用时，可以假定是用户选择了文本框中的文本，因此取得选择文本又出现了一个跨浏览器的方法：
function getSelectedText(textbox){
if(typeof textbox.selectionStart=="number"){
return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
}else if(document.selection){
return document.selection.createRange().text;//整个文档的选择文本
}
}
选择部分文本：
什么是选择部分文本？上述的选择文本是返回用户自己用鼠标选择的文本，而选择部分文本是选择框中指定位置的文本，并没有返回，想返回可以借用上述的方法；
HTML5也为选择部分文本提供了方案，所有文本框都有一个setSelectionRange（）方法；这个方法接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引（类似于substring（）方法的两个参数）。如：
var text1=document.getElementById("text1");
var text2=document.getElementById("text2");
text2.onfocus=function(){
text2.value="hello world!";
//选择所有文本
console.log(text2.setSelectionRange(0,text2.value.length));//"hello world!"
//选择前3个字符
console.log(text2.setSelectionRange(0,3));//"hel"
//选择4到6个字符
console.log(text2.setSelectionRange(4,7));//"o w"
text2.onselect=function(){
text1.value=getSelectedText(text2);//将选择的文本拿到然后复制给另一个文本框的value
}
}
function getSelectedText(textbox){//拿到选择的文本
if(typeof textbox.selectionStart=="number"){
return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
}else if(document.selection){
return document.selection.createRange().text;//整个文档的选择文本
}
}
要想看到setSelectionRange（）方法选择到的文本，必须要在调用此方法前或后让此文本框获取焦点，上边是直接将其写在了focus事件内；
IE9、Firefox、Safari、opera、chrome支持这种方案；
但IE8及之前版本，要做到选择部分文本，需要有4个步骤：
1、首先，必须使用IE在所有文本框上提供的createTextRange（）方法创建一个范围，并将其放到一个恰当的位置上；
2、使用collapse（）将范围折叠到文本框的开始位置；
3、再使用moveStart（）和moveEnd（）这两个范围方法将范围移动到位；
4、最后，私有select（）方法选择文本；
例子：
text1.value="hello world!";
var range=text1.createRange();
// 选择前3个字符
range.collapse(true);
range.moveStart("character",0);
range.moveEnd("character",3);
range.select();//"hel"
实现一个跨浏览器的选择部分文本的方法：
var text1=document.getElementById("text1");
var text2=document.getElementById("text2");
text2.onfocus=function(){
text2.value="hello world!";
//选择4到6个字符
selectText(text2,4,7);
text2.onselect=function(){
text1.value=getSelectedText(text2);//将选择的文本拿到然后复制给另一个文本框的value
}
}
//跨浏览器的获取选择文本的方法
function getSelectedText(textbox){
if(typeof textbox.selectionStart=="number"){
return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
}else if(document.selection){
return document.selection.createRange().text;//整个文档的选择文本
}
}
//跨浏览器的选择部分文本的方法
function selectText(textbox,startIndex,stopIndex){
if(textbox.setSelectionRange){
textbox.setSelectionRange(startIndex,stopIndex);
}else if(textbox.createTextRange){//IE8及之前版本
var range=textbox.createTextRange();
range.collapse(true);
range.moveStart("character",startIndex);
range.moveEnd("character",stopIndex-startIndex);
range.select();
}
}
过滤输入：顾名思义，过滤输入到表单字段中的内容，比如只许输入数字（略）
自动切换焦点：当输入完一个input框后，焦点自动到下一个表单字段，思路：判断该切换焦点的时机，获取此表单，获取当前表单字段，遍历这个表单中的所有表单字段，若存在下一个表单字段，则让这个字段获取焦点；
HTML5约束验证API：
1、required：必填字段，提交表单时，不填会提示；
<input type="text" required>
2、其它输入类型：
type：email、url，浏览器会自动验证输入值是否符合邮箱或url格式
3、数值范围：
type：number、range、datetime、datetime-local、date、month、week，time
<input type="number" min="0" max="100" step="5" name="count">
4、输入模式：
pattern属性：这个属性的值是一个正则表达式，用于匹配文本框中的值
//匹配数值
<input type="text" pattern="\d+" name="count">
注意：模式的开头和末尾不用加^和$符号；
5、检测有效性：
checkValidity（）方法可以检测表单中的某个字段是否有效，也可以检测整个表单里的所有表单字段是否有效
//检测某个表单字段是否有效
if(document.forms[0].elements[0].checkValidity()){
//...
}else{
//...
}
// 检测某个表单里的所有字段是否有效
if(document.forms[0].checkValidity()){
//...
}else{
//...
}
validity属性会告诉你为什么字段无效；
6、禁用验证：
novalidate属性，加在form表单上就是整个表单都不用验证，
formnovalidate属性：加在某个提交按钮上，就是点击这个提交按钮时不用验证表单；
选择框脚本：select
选择框是通过<select>和<option>元素创建的，为了方便与这个控件交互，除了所有表单字段共有属性和方法外，HTMLSelectElement类型还提供了下列属性和方法；
add（newOption，relOption）：想控件中插入新的<option>元素，其位置在相关项（relOption）之前；
multiple：布尔值，表示是否允许多项选择，等价于HTML中的multiple特性；
options：控件中所有option元素的HTMLCollection（元素集合---数组）；
remove（index）：移除给定位置的选项。
selectedIndex：基于0的选中项的索引，如果没有选中项，则值为-1.对于支持多选的控件，只保存选中项中第一项的索引；
size：选择框中可见的行数；
type：type的值不是“select-one”，就是“select-multiple”，取决元选择框元素中有没有 multiple特性；
value：选择框的value属性有当前选中项决定，响应规则如下：
1、如果没有选中项，则选择框的value属性保存空字符串；
2、如果有一个选中项，而且该项的value特性已经在HTML中指定，则选择框的value属性等于选中项的value特性，即使该项的value特性是空字符串，同样遵守着条规则；
3、如果有一个选中项，但该项的value特性没在html中指定，则选择框的value属性等于该项的文本；
4、如果有多个选中项，则选择框的value属性将依据前两条规则取得第一个选中项的值；
在DOM中每个option元素都有一个HTMLOptionElement对象表示；为了便于访问数据，HTMLOptionElement对象添加了系列属性；
1、index：当前选项在options集合中的索引。
2、label：当前选项的标签；等价于HTML中的label特性。若option有label特性，则HTML中会显示label标签中的内容；
3、selected：布尔值，表示当前选项是否被选中。将这个属性设置为true可以选中当前选项；
4、text：选项的文本；
5、value：选项的value值
事例：
<form action=""> <select name="select" id="select" multiple size="3"> <option value="haa1" label="第1项">haa1</option> <option value="haa2" label="第2项">haa2</option> <option value="haa3" label="第3项">haa3</option> <option value="haa4" label="第4项">haa4</option> <option value="haa4" label="第5项">haa5</option> <option value="haa4" label="第6项">haa6</option> <option value="haa4" label="第7项">haa7</option> </select> </form> <script> var select=document.getElementById("select"); console.log(select.options);//所有option元素数组 select.remove(1);//删除第二项 // var newOption=document.createElement("option"); // newOption.value="haaaaaa"; // select.add(newOption,2); console.log(select.selectedIndex);//选中项的索引 select.onchange=function(){ console.log(select.selectedIndex);//选中项的索引 console.log(select.value); select.options[0].selected=true; console.log(select.type);//选择框的type属性值是select-one还是select-multiple取决于选择框有没有multiple属性 } </script>
添加选项：
方法1、使用DOM方法：
<form action=""> <select name="select" id="select" multiple size="3"> <option value="haa1" label="第1项">haa1</option> <option value="haa2" label="第2项">haa2</option> <option value="haa3" label="第3项">haa3</option> </select> </form> <script> var select=document.getElementById("select"); var newOption=document.createElement("option"); newOption.appendChild(document.createTextNode("新选项的文本")); newOption.setAttribute("value","option的value值"); newOption.setAttribute("label","第4项"); select.appendChild(newOption);
方法2、用option构造函数来构造新选项，option构造函数接收量个参数：文本（text）和值（value）。第二个参数可选；
<form action=""> <select name="select" id="select" multiple size="3"> <option value="haa1" label="第1项">haa1</option> <option value="haa2" label="第2项">haa2</option> <option value="haa3" label="第3项">haa3</option> </select> </form> <script> var select=document.getElementById("select"); var newOption=new Option("新选项文本","新值"); newOption.label="新选项"; select.appendChild(newOption);//IE8之前版本有问题，不能设置正确的文本；
方法3、用选择框的add（）方法；这个方法接收两个参数：要添加的新选项和将位于新选项之后的选项。在IE浏览器中，第二个选项是可选的，设置为null，会将新选项设置为最后一项，但是在兼容DOM的浏览器中，第二个参数是必选的，所以将第二个参数设置为undefined，就可以在所有浏览器中奖新选项插入到列表最后了；
var select=document.getElementById("select");
var newOption=new Option("新选项文本","新值");
newOption.label="新选项";
select.add(newOption,undefined);
如果想将新选项插入到列表其它位置，不是最后，就必须用标准的DOM方法和insertBefore（）方法；
var select=document.getElementById("select");
var newOption=new Option("新选项文本","新值");
newOption.label="新选项";
select.insertBefore(newOption,select.options[0]);//插入到第一项
select.insertBefore(newOption,select.options[2]);//插入到第三项
移除选项：
方法1、用DOM方法的removeChild（）方法
var select=document.getElementById("select");
select.removeChild(select.options[0]);//移除第一项
方法2、用选择框的remove（）方法，参数是要移除项的索引；
var select=document.getElementById("select");
select.remove(0);//移除第一项
方法3、将对应的选项设置为null；
var select=document.getElementById("select");
select.options[0]=null;//移除第一项
移除所有选项：
var select=document.getElementById("select"); for(var i=0,len=select.options.length;i<len;i++){//len=select.options.length;这一步非常重要，如果直接用i<select.options.length;最后会剩下一项 select.remove(0); }
移动和重排：
把一个选项从一个选择框移动到另一个选择框，或则把一个选择框的选项移动到其它位置，都能叫作移动选项，这只中可以用DOM的两个方法完成：
1、appendChild（）方法，只能讲选项移动到选择框的最后面
2、insertBefore（）方法，可以将一个选项插在选择框的任意位置
这里需要注意的是，当用以上两个方法将DOM中已经存在的元素移动到另一个位置时，首先会将这一项重原来位置上移除，也就是选择框的总项数会减少一位，导致每一项的index被重置，所以要插入到指定位置时，要注意这一点；如：
<select name="select" id="select" multiple size="3"> <option value="haa1" label="第1项">haa1</option> <option value="haa2" label="第2项">haa2</option> <option value="haa3" label="第3项">haa3</option> </select> <select name="select2" id="select2" size="2"> <option value="q1" label="one">one</option> <option value="q2" label="two">two</option> <option value="q3" label="three">three</option> </select> <script> var select1=document.getElementById("select"); var select2=document.getElementById("select2"); //将select1中的第一个选项移到最后 select1.appendChild(select1.options[0]); //将select1的最后一项移动到select2的第二位 select2.insertBefore(select1.options[select1.options.length-1],select2.options[1]); //将select2的第二项移动到select2的第三项 select2.insertBefore(select2.options[1],select2.options[select2.options[1].index+2]);
表单序列化：
随着ajax的出现，表单序列化已经成为一种常见的需求，在javascript中，可以利用表单字段的type属性，连同name和value属性一起实现对表单的序列化。在编写代码之前，有必要搞清楚表单提交期间，浏览器是怎样将数据发送给服务器的；
1、对表单字段的名称和值进行URL编码，使用和号（&）分隔；
2、不发送禁用的表单字段；
3、只发送勾选的复选框和单选框
4、不发送type为“reset”和“button”的按钮；
5、多选选择框中的每个选中的值单独一个条目；
6、在单击提交按钮提交表单的情况下，也会发送提交按钮；否则，不发送提交按钮。也包括type为image的input元素；
7、select元素的值，就是option元素的value特性的值。如果option元素么有value特性，则是option元素的文本值；
以下是实线表单序列化的代码：
function serialize(form){ var part=[], field=null, i, len, j, opLen, 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,opLen=field.options.length;j<opLen;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; } parts.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){ parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(field.value)); } } } return parts.join("&"); }
富文本编辑：
WYSIWYG:(What You See Is What You Get)所见即所得
整个文档变的可以编辑：
<iframe>元素的designMode=“on” 就可以编辑整个框架，不知道怎么用。。。
使用contenteditable属性，可以让任何一个元素变的可编辑，这个属性有三个值true（打开）、false（关闭）、inherit（继承父元素）；如：
<div id="div" contenteditable="true" style="width:100px;height:100px;border:1px solid black;"></div> <div id="div" contenteditable style="width:100px;height:100px;border:1px solid black;"></div>
可以用document.execCommand(命令，false，值)；具体参数看书。。。
frames【“框架名”】.execCommand（命令，false，值）；
感觉富文本编辑用处不广不过多介绍；
到此web表单脚本就介绍完毕了。。。
