在HTML中，表单是由 <form> 元素来表示的，而在 JavaScript 中，表单对应的则是 HTMLFormElement 类型。HTMLFormElement 继承了 HTMLElement ，因而与其他HTML元素具有相同的默认属性。
1、HTMLFormElement 也有自己独有的属性和方法：
acceptChartset：服务器能够处理的字符集，等价于 HTML 中的 accept-chartset
action：接受请求的 URL ，等价于 HTML 中的 action
elements：表单中所有空间的集合（HTMLCollection）
enctype：请求编码类型，等价于 HTML 中的 enctype
length：表单控件的数量
method：请求类型，"post"，"get"，等价于 HTML 的 method
name：表单的名称，等价于HTML 的 name
reset()：重置表单方法
submit()：提交表单方法
target：用于发送请求和接受响应的窗口名称，等价于HTML的 target
2、获取表单元素引用
var form = document.getElementById("formId");
var forms = document.forms; // 获得页面中所有的表单
var firstForm = document.forms[0];
var form = document.forms["formName"]; // 通过form的name属性获取3、表单事件：表单submit事件，表单reset事件
3.1 在form 中的 type类型为submit的按钮 点击后会触发 submit 事件
<form id="form1" name="form1" action="#" method="get">
<input type="text" name="name1" id="name1">
<input type="text" name="age1" id="age1">
<!--<input type="submit" value="提交" id="submit">-->
</form>
<input type="submit" value="提交" id="submit">
var form1 = document.getElementById("form1");
var submitBtn = document.getElementById("submit");
submitBtn.onclick = function(e){ // 点击按钮手动触发表单提交事件，需要把按钮button放在表单外
//form1.submit(); //若是执行这行代码，表单直接提交了，不会经过submit事件
//手动触发事件
if(document.createEvent){
//FIREFOX\CHROME等标准浏览器
var evt = document.createEvent('HTMLEvents');
evt.initEvent('submit',false,true);
form1.dispatchEvent(evt);
}else{
//IE8-浏览器
var event = document.createEventObject();
form1.fireEvent('onsubmit',event);
}
};
EventUtil.addHandler(form1,"submit",function (e) { // 特别执行submit事件处理程序，钮button放在表单内，会直接触发submit事件
// todo 可以进行一些验证等操作
e = EventUtil.getEvent(e);
EventUtil.preventDefault(e);
console.log("submit");
});3.2 在form 中的 type类型为reset的按钮 点击后会触发 reset 事件，将表单的输入框的内容恢复到初始状态
4、表单内的字段
4.1 表单字段共有的属性、方法、事件
disabled：布尔值，表示是否被禁用
form：指向当前字段所属的表单指针，只读
name：当前字段的名称
readOnly：布尔值，表示是否只读
tabIndex：表示当前字段的切换（tab）序号
type：当前字段类型，如“checkbox”，“radio”等
value：提交给服务器的值，对于文件，这个值是文件路径，而文件的内容是 files属性
focus()：将浏览器的焦点设置到当前字段，如果 type 是 “hidden”，或者display/visibility 隐藏了该字段，调用focus()方法会出错。HTML5中有一个autofocus属性，可以自动聚焦。
blur()：从元素中移走焦点
focus事件：当前字段获取焦点时触发
blur事件：当前字段失去焦点时触发
change事件：对于input 和 textarea 元素，在他们失去焦点且value值改变是触发，对于select 元素在其选项改变时触发
5、文本框，input[type="text"]、textarea
5.1
input：
size特性，指定文本框显示的字符数
value特性：设置初始值
maxlength特性：指定可以接受的最大字符数
textarea：
rows特性：指定文本行数（高度）
cols特性：指定文本一行的列数（宽度）
这两种文本框都可以通过js 用文本框元素的 value 属性获取、设置内容。使用DOM方法，setAttribute() / getAttribute()，innerHTML/innerText 来修改 / 获取 <input>的value、<textarea>的内容，得不到、也无法设置真实的value值
5.2 选择文本
select() ：选择文本框的所有文本
select事件：选择了文本（可以是部分文本）并释放了鼠标时触发，ie8-不释放鼠标也会触发select事件
选择的文本：HTML5中为文本框添加了两个属性 selectionStart 和 selectionEnd（选择的文本在原文本中的起始和结束索引）；ie8- 中有 document.selection 对象保存着整个文档的选择文本信息
function getSelectionText(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(startIndex, endIndex)来选择部分文本。ie8- 需要使用范围
function setSelectText(textBox,startIndex,endIndex){
if(textBox.setSelectionRange){
textBox.setSelectionRange(startIndex,endIndex);
}else if(textBox.createTextRange){
var range = textBox.createTextRange();
range.collapse(true);
range.moveStart("character",startIndex);
range.moveEnd("character",endIndex - startIndex);
range.select();
}
textBox.focus();
}5.3 过滤输入：限制文本框输入某些字符
1）双击input会出现输入提交过的记录，只需要在input文本输入框中加一条autocomplete=”off”属性即可禁止
2）主要是利用阻止默认事件发生来不让输入
EventUtil.addHandler(textbox,"keypress",function(e){
e= EventUtil.getEvent(e);
var target = EventUtil.getTarget(e);
var charcode = EventUtil.getlCharCode(e);
// 可以阻止非数字的输入，字符编码小于10的键是一些特殊件的键:向上、向下、向左、向右、退格、删除（其实这些键不会触发keypress事件）
// 但不能禁止输入法输入中文
if(!/\d/.test(String.fromCharCode(charcode)) && charcode >9 && !e.ctrlKey){
EventUtil.preventDefault(e); // 阻止默认事件发生，可以阻止字符输入
}
});
EventUtil.addHandler(textbox,"keyup",function(e){
e= EventUtil.getEvent(e);
EventUtil.preventDefault(e);
this.value=this.value.replace(/[^\x00-\x80]/gi,''); // 限制中文输入，将中文字符替换成空字符
});
EventUtil.addHandler(textbox,"paste",function(e){
e= EventUtil.getEvent(e);
EventUtil.preventDefault(e); // 阻止粘贴
// return false;
});
EventUtil.addHandler(textbox,"dragenter",function(e){
e= EventUtil.getEvent(e);
EventUtil.preventDefault(e); // 阻止拖拽
//return false;
});
EventUtil.addHandler(textbox,"drop",function(e){
e= EventUtil.getEvent(e);
EventUtil.preventDefault(e); // 阻止拖拽
// return false;
});5.4 操作剪贴板
有六个剪贴板事件：
beforecopy：在发生复制前出发
copy：复制时触发
beforecut：剪切前时触发
cut：剪切时触发
beforepaste：粘贴之前触发
paste：粘贴时触发
beforecopy，beforecut，beforepaste在各个浏览器的触发条件不一样，在ie中打开了上下文菜单就会触发，beforepaste在Chrome中都不会触发，在Firefox中这三个事件都不会触发
有个clipboardData 对象 ： clipboardData= (event.clipboardData || window.clipboardData); clipboardData对象有三个方法getData(), setData()，clearData()，来操作剪切板，但在Chrome 和 Firefox等浏览器中setData()和clearData()已经被禁了，无效了。
function getClipboardText(event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
},
function setClipboardText(event,value){
if(event.clipboardData){ //chrome firefox中已经失效或被禁了
return event.clipboardData.setData("text/plain",value);
}else if(window.clipboardData){
return window.clipboardData.setData("Text",value);
}
},
function clearClipboardText(event){ //chrome firefox中已经失效或被禁了
var clipboardData = (event.clipboardData || window.clipboardData);
clipboardData.clearData();
}复制文本
function copy() {
var Url2=document.getElementById("tocopy").innerText;
var oInput = document.createElement('input');
oInput.value = Url2;
document.body.appendChild(oInput);
oInput.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
oInput.className = 'oInput';
oInput.style.display='none';
alert('复制成功');
}5.5 切换焦点
var Oseries = document.getElementsByClassName("series");
for(var i=0;i<Oseries.length;i++){
EventUtil.addHandler(Oseries[i],"keyup",tabForward);
}
function tabForward(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if(target.value.length == target.maxLength){
var form = target.form;
for(var i=0; i< form.elements.length;i++){
if(form.elements[i] == target){
if(form.elements[i+1]){
form.elements[i+1].focus();
}
return false;
}
}
}
}
<form action="">
<input type="text" class="series" id="" name="tex1" maxlength="3">
<input type="text" class="series" id="" name="tex2" maxlength="3">
<input type="text" class="series" id="" name="tex3" maxlength="3">
</form>6、下拉选择<select><option>
<select>，HTMLSelectElement 的属性和方法（除了表单字段共有的）
add(newOption,relOption)：在relOption之前插入新<option>,在最后插入reOption是null
multiple：布尔值，表示是否允许多选，等价于HTML中的multiple
options：控件中所有的option选项
remove(index)：移除给定位置的选项
selectedIndex：基于0 的选中项的索引，如果没有选中项值为-1，如果是多选，则是第一个选中项的索引；设置多选的selectedIndex，会使得选中项就是刚才设置的那个
size：选择框中可见的行数，等价于HTML中的size
value：没有选中项，value为空；有选中项，value为option的value特性，或者是option的文本（没有指定value特性时）；有多个选中项，value是第一个选中项的值；
option，HTMLOptionElement 的属性：
index：当前选项在options集合中的索引
label：当前选项的标签，等价于HTML中的label
selected：布尔值，表示当前选项是否被选中，设置为true 则可选中该项（如果是单选，则需该选项在最前）
text：选项的文本
value：选项的值，等价于HTML中的value特性
添加选项：
//添加选项，方法一，使用dom方法
var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("optionText"));
newOption.setAttribute("value","optionValue");
selectBox.appendChild(newOption); // 可思议使用 insertBefore()/ replaceChild() 等方法
//添加选项，方法二，使用dom方法和 Option 构造函数结合
var newOption = new Option("OptionText","OptionValue"); // 返回一个option元素
selectBox.appendChild(newOption); // ie8- 不能正常插入选项
//添加选项，方法三，使用 Option 构造函数和 select.add()
var newOption = new Option("optionText","optionValue");
var relOption = selectBox.options[2];
// 同时将一个选项添加两个地方，后面执行的语句的生效。下面两行代码：先是在relOption之前插入，接着就插入到最后并移除之前插入的选项
selectBox.add(newOption,relOption); //添加某个选项之前
selectBox.add(newOption,undefined); //添加在最后,ie8-第二个参数是可选的，若是null会报错，undefined 通用移除选项：
// 每次操作后节点都会动态更新，下面三行代码会连续删除原来的前三个选项
selectBox.removeChild(selectBox.options[0]); //移除，方法一
selectBox.remove(0);//移除，方法二
selectBox.options[0] = null;//移除，方法三移动选项：
selectBox1.appendChild(selectBox.options[2]); // 从第一个下拉选择框，移动一项到其他选择框中，不用删除原来的选项
var len = selectBox.options.length;
selectBox.insertBefore(selectBox.options[len-1],selectBox.options[1]);// 同一个下拉选择框，最后一个移动到第二个，不用删除原来位置的选项7、HTML5约束验证API。
