表单基础知识
在HTML中，表单是由元素来表示的，而在JS中，表单对应的则是HTMLFormElement类型。HTMLFormElement继承了HTMLElement，因而与其他HTML元素具有相同的默认属性。不过HTMLFormElement也有它独有的属性和方法：
-
acceptCharset：服务器能够处理的字符集；等价于HTML的accept-charset特性。 -
action：接受请求的URL；等价于HTML的action特性。 -
elements：表单中所有控件的集合。 -
enctype：请求的编码类型；等价于HTML的enctype特性。 -
length：表单中控件的数量。 -
method：要发送的HTTP请求类型；等价于HTML的method特性。 -
name：表单的名称；等价于HTML的name特性。 -
reset()：将所有表单域重置为默认值。 -
submit()：提交表单。 -
target：用于发送请求和接收响应的窗口名称；等价于HTML的target特性。
除了通过id取得元素引用，还可以通过document.forms取得页面中所有表单。在这个集合中可以通过数值索引或name值来取得特定的表单：
var form = document.getElementById("form1");
var firstForm = document.forms[0]; //取得页面中的第一个表单
var myForm = document.forms['form2']; //取得页面中名称为“form2”的表单
提交表单
用户单击提交按钮或图像按钮时，就会提交表单。使用input或button都可以定义提交按钮，只要将其type特性的值设置为submit即可，图像按钮则是通过将input的type特性值设置为image来定义。
只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交该表单。textarea是一个例外，在文本区中回车会换行。如果表单里没有提交按钮，按回车键不会提交表单。
以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发submit事件。这样，我们就有机会验证表单数据，并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event) {
//取得事件对象
event = EventUtil.getEvent(event);
//阻止默认事件(阻止表单提交)
EventUtil.preventDefault(event);
});
在JS中，以编程方式调用submit()方法也可以提交表单。而且，这种方式无需表单包含提交按钮，任何时候都可以正常提交表单。
var form = document.getElementById("myForm");
//提交表单
form.submit();
提交表单时可能出现的最大问题，就是重复提交表单。解决这一问题的办法有两个：在第一次提交表单后就禁用提交按钮，或者利用onsubmit事件处理程序取消后续的表单提交操作。
重置表单
在用户单击重置按钮时，表单会被重置。使用type特性值为reset的input或button都可以创建重置按钮。
在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值。如果某个字段的初始值为空，就会恢复为空；而带有默认值的字段，也会恢复为默认值。
用户单击重置按钮重置表单时，会触发reset事件。
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event) {
//取得事件对象
event = EventUtil.getEvent(event);
//阻止表单重置
EventUtil.preventDefault(event);
});
也可以通过JS来重置表单：
var form = document.getElementById('form');
form.reset();
与调用submit()方法不同，调用reset()方法会像单击重置按钮一样触发reset事件。
表单字段
可以使用原生DOM方法访问表单元素，此外，每个表单都有elements属性，该属性是表单中所有元素的集合。这个elements集合是一个有序列表，其中包含着表单中所有的字段。可以通过name属性或索引来访问这些字段。
var form = document.getElementById('form');
var field1 = form.elements[0]; //取得表单中的第一个字段
var field2 = form.elements['user']; //取得名为“user”的字段
var fieldCount = form.elements.length; //取得表单中包含的字段的数量
如果有多个控件都在使用一个name，那么就会返回以该name命名的一个NodeList。
1.共有的表单字段属性
除了元素外，所有表单字段都有一组相同的属性。共有属性：
-
disabled：布尔值，表示当前字段是否被禁用。 -
form：指向当前字段所属表单的指针；只读。 -
name：当前字段的名称。 -
readOnly：布尔值，表示当前字段是否只读。 -
tabIndex：表示当前字段的切换（tab）序号。 -
type：当前字段的类型，如checkbox。 -
value：当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。
除了form属性外，可以通过JS动态修改其他任何属性。
var form = document.getElementById("myForm");
var field = form.elements[0];
//修改 value 属性
field.value = "Another value";
//检查 form 属性的值
alert(field.form === form); //true
//把焦点设置到当前字段
field.focus();
//禁用当前字段
field.disabled = true;
//修改 type 属性（不推荐，但对来说是可行的）
field.type = "checkbox";
能够动态修改表单字段属性，意味着我们可以在任何时候，以任何方式来动态操作表单。如避免多次提交表单。
//避免多次提交表单
EventUtil.addHandler(form, "submit", function(event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//取得提交按钮
var btn = target.elements["submit-btn"];
//禁用它
btn.disabled = true;
});
注意，不能通过onclick事件处理程序来实现这个功能，原 因是不同浏览器之间存在“时差”；有的浏览器会在触发表单的submit事件之前触发click事件，而有的浏览器则相反。因此，最好是通过submit事件来禁用提交按钮。不过，这种方式不适合表单中不包含提交按钮的情况；只有在包含提交按钮的情况下，才有可能触发表单的submit事件。
除了，所有表单字段都有type属性。对于input元素，这个值等于HTML特性type的值。对于其他元素，这个type属性的值如下表所列。
此外，input和button元素的type属性是可以动态修改的，而select元素的type属性则是只读的。
2.共有的表单字段方法
每个表单字段都有两个方法：focus()和blur()。focus()方法用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件。例如，在页面加载完毕后，将焦点转移到表单中的第一个字段。为此，可以侦听页面的load事件，并在该事件发生时在表单的第一个字段上调用focus()方法。
EventUtil.addHandler(window, "load", function(event) {
document.forms[0].elements[0].focus();
});
要注意的是，如果第一个表单字段是一个元素，且其type特性的值为hidden，那么以上代码会导致错误。另外，如果使用CSS的display和visibility属性隐藏了该字段，同样也会导致错误。
HTML5为表单字段新增了一个autofocus属性。只要设置这个属性，不用JS就能自动把焦点移动到相应字段。
为了保证前面的代码在设置autofocus的浏览器中正常运行，必须先检测是否设置了该属性，如果设置了，就不用再调用focus()了。
EventUtil.addHandler(window, "load", function(event) {
var element = document.forms[0].elements[0];
if (element.autofocus !== true) {
element.focus();
console.log("JS focus");
}
});
在默认情况下，只有表单字段可以获得焦点。对于其他元素而言，如果先将其tabIndex属性设置为-1，然后再调用focus()方法，也可以让这些元素获得焦点。
blur()方法的作用是从元素中移走焦点。在调用blur()方法时， 并不会把焦点转移到某个特定的元素上；仅仅是将焦点从调用这个方法的元素上面移走而已。
document.forms[0].elements[0].blur();
3.共有的表单字段事件
除了支持鼠标、键盘、更改和HTML事件之外，所有表单字段都支持下列3个事件。
-
blur：当前字段失去焦点时触发。 -
change：对于和之间。不能在HTML中给这两种文本框都会将用户输入的内容保存在
value属性中。可以通过这个属性读取和设置文本框的值。var textbox = document.forms[0].elements["textbox1"]; alert(textbox.value); textbox.value = "Some new value";选择文本
这两种文本框都支持
select()方法，这个方法用于选择文本框中的所有文本。在调用select()方法时，大多数浏览器都会将焦点设置到文本框中。这个方法不接受参数，可以在任何时候被调用。var textbox = document.forms[0].elements["textbox1"]; textbox.select();1.选择（select）事件
与
select()方法对应的，是一个select事件。在选择了文本框中的文本时，就会触发select事件。在调用select()方法时也会触发select事件。var textbox = document.forms[0].elements["textbox1"]; EventUtil.addHandler(textbox, "select", function(event){ var alert("Text selected" + textbox.value); });2.取得选择的文本
虽然通过
select事件我们可以知道用户什么时候选择了文本，但仍然不知道用户选择了什么文本。
HTML5添加了两个属性：selectionStart和selectionEnd。这两个属性中保存的是基于0的数值，表示所选择文本的范围。因此，要取得用户在文本框中选择的文本，可以使用如下代码。function getSelectedText(textbox) { return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd); }3.选择部分文本
除
select()方法之外，所有文本框都有一个setSelectionRange()方法。这个方法接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引。textbox.value = "Hello world!" //选择所有文本 textbox.setSelectionRange(0, textbox.value.length); //"Hello world!" //选择前 3 个字符 textbox.setSelectionRange(0, 3); //"Hel" //选择第 4 到第 6 个字符 textbox.setSelectionRange(4, 7); //"o w"要看到选择的文本，必须在调用
setSelectionRange()之前或之后立即将焦点设置到文本框。自动切换焦点
通常，在自动切换焦点之前，必须知道用户已经输入了既定长度的数据。例如，美国的电话号码通常会分为三部分：区号、局号和另外4位数字。为取得完整的电话号码，很多网页中都会提供3个文本框：
为增强易用性，同时加快数据输入，可以在前一个文本框中的字符达到最大数量后，自动将焦点切换到下一个文本框。
(function(){ 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, len=form.elements.length; i < len; i++) { if (form.elements[i] == target) { if (form.elements[i+1]){ form.elements[i+1].focus(); } return; } } } } var textbox1 = document.getElementById("txtTel1"); var textbox2 = document.getElementById("txtTel2"); var textbox3 = document.getElementById("txtTel3"); EventUtil.addHandler(textbox1, "keyup", tabForward); EventUtil.addHandler(textbox2, "keyup", tabForward); EventUtil.addHandler(textbox3, "keyup", tabForward); })();HTML5约束验证API
为了在将表单提交到服务器之前验证数据，HTML5新增了一些功能。有了这些功能，即便JS被禁用或者由于种种原因未能加载，也可以确保基本的验证。
只有在某些情况下表单字段才能进行自动验证。具体来说，就是要在HTML标记中为特定的字段指定一些约束，然后浏览器才会自动执行表单验证。1.必填字段
第一种情况是在表单字段中指定了
required属性：任何标注有
required的字段，在提交表单时都不能空着。这个属性适用于、