表单的基础知识
在HTML中表单是由<form>元素来表示的，而在js中表单对应的就是HTMLFormElement；
HTMLFormElement的属性和方法：
① acceptCharset：服务器能够处理的字符集；
② action：接收请求的URL；
③ elements：表单中所有的控件的集合；
④enctype：请求的编码类型；
⑤length：表单中控件的数量；
⑥method：要发送的HTTP请求类型；（get或post）
⑦ name：表单的名称；
⑧ reset()：将所有表单域重置为默认值；
⑨ submit()：提交表单；
扫描二维码关注公众号，回复： 3378040 查看本文章
⑩target：用于发送请求和接收响应的窗口名称；
1）获取页面中所有的表单：
document.forms;2）取得特定的表单：
var form=document.getElementById("form1"); var firstForm=document.form[0]; //取得页面中的第一个表单 var myForm=document.forms["form2"]; //取得页面中名称为form2的表单3）提交表单
<!--提交按钮--> <input type="submit" value="submit form"> <!--自定义提交按钮--> <button type="submit">submit form</button> <!--图像按钮--> <input type="image" src="graphic.gif">以这些方式提交表单时，浏览器会在将请求发送给服务器之前触发submit事件。
var form=document.getElementById("myForm"); //提交表单 form.submit();这种方式表单无需包含提交按钮，任何时候都可以正常提交表单。不会触发submit事件。在调用此方法前要先验证表单数据。
4）重置表单
<!--通用重置按钮--> <input type="reset" value="reset form"> <!--自定义重置按钮--> <button type="reset">reset form</button> var form =document.getElementById("form"); //重置表单 form.reset();在重置表单时，所有的表单字段都会恢复到页面刚加载完毕时的初始值。
这三个方式重置表单时会触发reset事件；
5）使用原生DOM方法访问表单元素
①每个表单都有Elements属性，该属性是表单中所有表单元素的集合。elements集合是一个有序列表，其中包含着表单中的所有字段；每个表单字段在elements集合中的顺序，与它们出现在标记中的顺序相同。
var form =document.getElementById("form"); //取得表单中的第一个字段 var field1=form.elements[0]; //取得名为“textbox”的字段 var field2=form.elements["textbox"]; //取得表单中包含的字段数量 var fieldCount=form.elements.length; <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> var form1=document.getElementById("myform"); var colorfields=form1.elements[color]; colorfields.length; //3如果表单中多个表单控件都在使用一个name，那么返回以该那么命名的一个NodeList；
6）共有的表单字段属性
所有的表单字段都拥有相同的一组属性；name、type、value；
form：执行当前字段所属表单的指针，只读；
disabled：表示当前字段是否被禁用；
readOnly：表示当前字段是否只读；
tabIndex：表示当前字段的切换序号；
7）共有的表单字段方法
focus()：用于将浏览器的焦点设置到表单字段，即激活表单字段。
blur()：从元素中移走焦点，调用该方法时，并不会把焦点转移到某个特定的元素上，仅仅是将焦点从元素上面移走而已；
8）共有的表单字段事件
blur：当前字段失去焦点时触发；
change：对于<input><textarea>元素，在它们失去焦点且value值改变时触发；对于<select>元素，在其选项改变时触发；
focus：当前字段获得焦点时触发；
文本框脚本
在HTML中，有两种方式表现文本框：使用<input>的单行文本框、<textarea>的多行文本框；
<input type="text" size="25" maxlength="50" value="initial value"> <textarea rows="25" cols="5">initial value</textarea>1.选择文本
1）上述两种文本框都支持select()方法，这个方法用于选择文本框中的所有文本。
var textbox=document.forms[0].elements["textbox1"]; textbox.select();在选择文本框中的文本时，就会触发select事件；
2）取得选择的文本
HTML5添加了2个属性：selectionStart和selectionEnd。这两个属性中保存的是基于0的数值，表示是所选择的文本范围（即文本选区开头和结尾的偏移量）
function getSelectedText(textbox){ return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd); }3）选择部分文本
setSelectionRange()方法接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的索引；
跨浏览器兼容，选择部分文本的方法：
function selectText(textbox,startIndex,stopIndex){ if(textbox.setSelectionRange){ textbox.setSelectionRange(startIndex,stopIndex); }else if(textbox.createRange){ //创建范围 var range=textbox.createRange(); //折叠范围到开头 range.collapse(true); //选择范围 range.moveStart("character",startIndex); range.moveEnd("character",stopIndex-startIndex); //选择文本 range.select(); } textbox.focus(); } textbox.value="hello world"; //选择所有的文本 selectText(textbox,0,textbox.value.length); //"hello world" //选择前3个字符 selectText(textbox,0,3); //"hel"
选择框脚本
选择框是通过<select>和<option>元素创建的。
除了所有表单字段共享字段共有的属性和方法外，HTMLSelectElement类型还提供下列属性和方法：
① add(newOption,relOption)：向控件中插入新的<option>元素，位置在relOption之前；
② multiple：布尔值，表示是否允许多项选择；
③ options：控件中所有<option>元素的HTTPCollection；
④ remove(index)：移除给定位置的选项；
⑤ selectedIndex：基于0的选中项索引；如果没选中项则为0；
⑥ type：“select-one”或“select-multiple”;
⑦ value：取值由当前选中项决定；
a. 没有选中项则value为空字符；
b. 选中一项，且value值有设置，则value属性等于选中项的value特性值；
c. 选中一项，但没有设置value，则value属性等于该项的文本；
d.如果选中多个选项，则选择框的value属性将依据前两条规则取得第一个选中项的值；
每一个<option>元素都有一个HTMLOptionElement对象表示。
具有属性如下：
① index：当前选项在option集合中的索引；
② label：当前选项的标签；
③ selected：布尔值，表示当前选项是否被选中；设置为true可以选中当前选项。
④ text：选项的文本；
⑤ value：选项的值；
1）选择选项
① 对于只允许选择一项的选择框，访问选项可以使用selectedIndex;
var selectedOption=selectbox.options[selectbox.selectedIndex];设置selectedIndex会导致取消以前的所有选项并选择指定的那一项；
② 取得对某一项的引用，然后将其selected属性设置为true；该属性的主要作用就是确定用户选择了选择框中的哪一项。
如果是多选，它的设置不会影响对其他选项的选择，如果是单选，则会取消对其他选项的选择；
selectbox.option[0].selected=true;2）添加选项
有如下三种方式：
① 使用DOM方法：
var newOption=document.createElement("option"); newOption.appendChild(document.createTextNode("Option text")); newOption.setAttribute("value","option value"); selectbox.appendChild(newOption);② 使用Option构造函数来创建新选项，new Option(text,value)
var newOption=new Option("Option text","Option value"); selectbox.appendChild(newOption); //在IE8及之前的版本有问题③ 使用选择框的add()方法
var newOption=new Option("Option text","Option value"); selectbox.add(newOption,undefined); //最佳方案为第二个参数传入undefined，就可以在所有的浏览器中将新选项插入到列表最后；
3）移除选项
//DOM方法 selectbox.removeChild(selectbox.options[0]); //移除第一项 //使用选择框中的remove()方法 selectbox.remove(0); //将选项设置为null selectbox.options[0]=null;4）移动选项
例子：将第一个选择框中的第一个选项移动到第二个选择框中的过程；
var selectbox1=document.getElementById("selLocations1"); var selectbox2=document.getElementById("selLocations2"); selectbox2.appendChild(selectbox1.options[0]);5）重排选项
例子：选择框中的选项向后移动一个位置；
var optionToMove=selectbox.options[1]; selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index+2]);