JS（十二）表单基础知识

在 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"或"post"；等价于HTML的method特性。
 name：表单的名称；等价于HTML的name特性。
 reset()：将所有表单域重置为默认值。
 submit()：提交表单。
 target：用于发送请求和接收响应的窗口名称；等价于HTML的target特性。
取得<form>元素引用的方式有好几种。其中最常见的方式就是将它看成与其他元素一样，并为其添加id特性，然后再像下面这样使用getElementById()方法找到它。

var form = document.getElementById("form1");

其次，通过document.forms可以取得页面中所有的表单。在这个集合中，可以通过数值索引或name值来取得特定的表单

var firstForm = document.forms[0]; //取得页面中的第一个表单var myForm = document.forms["form2"]; //取得页面中名称为"form2"的表单

另外，在较早的浏览器或者那些支持向后兼容的浏览器中，也会把每个设置了 name 特性的表单作为属性保存在 document 对象中。例如，通过 document.form2 可以访问到名为"form2"的表单。不过，我们不推荐使用这种方式：一是容易出错，二是将来的浏览器可能会不支持。
一、提交表单
用户单击提交按钮或图像按钮时，就会提交表单。使用<input>或<button>都可以定义提交按钮，只要将其type特性的值设置为"submit"即可，而图像按钮则是通过将<input>的type特性值设置为"image"来定义的。

<input type="submit" value="Submit Form"><button type="submit">Submit Form</button><input type="image" src="graphic.gif">

只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交该表单。（textarea是一个例外，在文本区中回车会换行。）如果表单里没有提交按钮，按回车键不会提交表单。以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发submit事件。这样，我们就有机会验证表单数据，并据以决定是否允许表单提交。
阻止这个事件的默认行为就可以取消表单提交。 

var form = document.getElementById("myForm");EventUtil.addHandler(form, "submit", function(event){//取得事件对象event = EventUtil.getEvent(event);//阻止默认事件EventUtil.preventDefault(event);});

在以调用 submit()方法的形式提交表单时，不会触发submit 事件，因此要记得在调用此方法之前先验证表单数据。
提交表单时可能出现的最大问题，就是重复提交表单。在第一次提交表单后，如果长时间没有反应，用户可能会变得不耐烦。这时候，他们也许会反复单击提交按钮。结果往往很麻烦（因为服务器要处理重复的请求），或者会造成错误（如果用户是下订单，那么可能会多订好几份）。解决这一问题的办法有两个：在第一次提交表单后就禁用提交按钮，或者利用onsubmit 事件处理程序取消后续的表单提交操作 。
二、重置表单
在用户单击重置按钮时，表单会被重置。使用 type特性值为"reset"的<input>或<button>都可以创建重置按钮 。

<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);});

在 Web表单设计中，重置表单通常意味着对已经填写的数据不满意。重置表单经常会导致用户摸不着头脑，如果意外地触发了表单重置事件，那么用户甚至会很恼
火。事实上，重置表单的需求是很少见的。更常见的做法是提供一个取消按钮，让用户能够回到前一个页面，而不是不分青红皂白地重置表单中的所有值。 
三、表单字段
可以像访问页面中的其他元素一样，使用原生 DOM 方法访问表单元素。 
每个表单都有 elements 属性，该属性是表单中所有表单元素（字段）的集合。这个 elements 集合是一个有序列表，其中包含着表单中的所有字段，例如<input>、 <textarea>、 <button>和<fieldset>。每个表单字
段在 elements 集合中的顺序，与它们出现在标记中的顺序相同，可以按照位置和 name 特性来访问它们。 
可以通过访问表单的属性来访问元素，例如 form[0]可以取得第一个表单字段，而 form["color"]则可以取得第一个命名字段。这些属性与通过 elements 集
合访问到的元素是相同的。但是，我们应该尽可能使用 elements，通过表单属性访问元素只是为了与旧浏览器向后兼容而保留的一种过渡方式。 
1、共有的表单字段属性
表单字段共有的属性如下。
 disabled：布尔值，表示当前字段是否被禁用。
 form：指向当前字段所属表单的指针；只读。
 name：当前字段的名称。
 readOnly：布尔值，表示当前字段是否只读。
 tabIndex：表示当前字段的切换（tab）序号。
 type：当前字段的类型，如"checkbox"、"radio"，等等。
 value：当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。 
避免多次提交表单代码添加到跨浏览器对象上。

//避免多次提交表单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事件，而有的浏览器则相反。 
除了<fieldset>之外，所有表单字段都有type 属性。对于<input>元素，这个值等于HTML 特性 type的值。对于其他元素，这个 type属性的值如下表所列。 
说 明                                HTML示例                     type属性的值
单选列表                 <select>...</select>             "select-one"
多选列表                 <select>...</select>             "select-multiple"
自定义按钮             <button>...</button>            "submit"
自定义非提交按钮 <button type="button">        </button> "button"
自定义重置按钮     <button type="reset">      </buton> "reset"
自定义提交按钮     <button type="submit">  </buton> "submit" 
2、共有的表单字段方法
每个表单字段都有两个方法： focus()和blur()。其中， focus()方法用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件。
注意：如果第一个表单字段是一个<input>元素，且其type 特性的值为"hidden"，那么以上代码会导致错误。另外，如果使用CSS 的 display和 visibility 属性隐藏了该字段，同样也会导致错误。 HTML5为表单字段新增了一个 autofocus属性。在支持这个属性的浏览器中，只要设置这个属性，不用 JavaScript就能自动把焦点移动到相应字段。 
为了保证前面的代码在设置 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");}});

上面的代码只有在 autofocus不等于 true 的情况下才会调用focus()，从而保证向前兼容。支持autofocus 属性的浏览器有Firefox 4+、 Safari 5+、 Chrome和 Opera
9.6。在默认情况下，只有表单字段可以获得焦点。对于其他元素而言，如果先将其tabIndex属性设置为1，然后再调用focus()方法，也可以让这些元素获得焦点。只有Opera 不支持这种技术。
与 focus()方法相对的是blur()方法，它的作用是从元素中移走焦点。在调用blur()方法时，并不会把焦点转移到某个特定的元素上；仅仅是将焦点从调用这个方法的元素上面移走而已。在早期Web开发中，那时候的表单字段还没有 readonly特性，因此就可以使用 blur()方法来创建只读字段。现在，虽然需要使用blur()的场合不多了，但必要时还可以使用的。
3、 共有的表单字段事件 
除了支持鼠标、键盘、更改和 HTML 事件之外，所有表单字段都支持下列 3 个事件。
 blur：当前字段失去焦点时触发。
 change：对于<input>和<textarea>元素，在它们失去焦点且value 值改变时触发；对于<select>元素，在其选项改变时触发。
 focus：当前字段获得焦点时触发。
change 事件在不同表单控件中触发的次数会有所不同。对于<input>和<textarea>元素，当它们从获得焦点到失去焦点且value 值改变时，才会触发 change 事件。对于<select>元素，只要用户选择了不同的选项，就会触发change 事件；换句话说，不失去焦点也会触发change 事件 。
通常，可以使用 focus 和 blur 事件来以某种方式改变用户界面 ，而change 事件则经常用于验证用户在字段中输入的数据。 
代码示例：例如，假设有一个文本框，我们只允许用户输入数值。此时，可以利用focus事件修改文本框的背景颜色，以便更清楚地表明这个字段获得了焦点。可以利用 blur事件恢复文本框的背景颜色，利用 change事件在用户输入了非数值字符时再次修改背景颜色。

var textbox = document.forms[0].elements[0];EventUtil.addHandler(textbox, "focus", function(event){event = EventUtil.getEvent(event);var target = EventUtil.getTarget(event);if (target.style.backgroundColor != "red"){target.style.backgroundColor = "yellow";}});EventUtil.addHandler(textbox, "blur", function(event){event = EventUtil.getEvent(event);var target = EventUtil.getTarget(event);if (/[^\d]/.test(target.value)){target.style.backgroundColor = "red";} else {target.style.backgroundColor = "";}});EventUtil.addHandler(textbox, "change", function(event){event = EventUtil.getEvent(event);var target = EventUtil.getTarget(event);if (/[^\d]/.test(target.value)){target.style.backgroundColor = "red";} else {target.style.backgroundColor = "";}});

关于 blur和 change 事件的关系，并没有严格的规定。在某些浏览器中，blur事件会先于 change 事件发生；而在其他浏览器中，则恰好相反。为此，不能假定这两个事件总会以某种顺序依次触发，这一点要特别注意。