表单

为何要把表单专门拿出来说，就是因为表单是与服务器通信的重要手段，在Web应用开发中使用的范围非常广泛，还关系到与后端的数据交换，所以需要专门学习。JS中有一些增强表单元素的默认行为，可以更有效的操作表单元素。

表单基础知识

在HTML中表单是form元素，在JS中form元素对应的类是 HTMLFormElement 类型，这一类型除了有标准的HTML元素属性外，还有独特的属性和方法：

**Form元素特别的属性和方法**
方法或属性	说明
acceptCharset	服务器能够处理的字符集，现在基本用不上，都是UTF-8
action	表单提交的目标地址，对应action属性，如果只写表示当前路径的"."，也会返回完整路径
elements	返回表单内所有控件元素（input等控件类型的元素，不含P，label之类）的HTMLCollection对象，方便快捷拿到所有控件元素。
enctype	编码类型，对应enctype属性，传送文件的时候要特别设置。
length	表单内控件元素的数量
method	对应method属性，为get或者post
name	表单的名称，对应name属性。
.reset()	将所有表单域重置为默认值，就是清除所有用户输入的内容，如果有placeholder和value属性，重新放置进输入框。
.submit()	提交表单
target	发送请求和接收响应的窗口名称，等于target属性。

此外，还可以通过document.forms获得一个包含页面中所有表单的HTMLCollection对象。下边对这些属性和方法进行具体解说：

`.submit()`

有三种提交按钮，分别是input标签的type为submit和image的两种按钮，以及button标签type属性为submit的按钮。在按钮上点击鼠标，或者按钮拥有焦点的时候按回车键，都可以触发submit事件。通过鼠标点击或者回车键触发的submit事件的默认行为是向form标签中指定的URL提交数据，只要事件处理程序阻止这个默认行为，就不会提交，所以表单验证的事件处理程序一般是绑定在提交按钮上的。阻止默认事件发生，除了在函数内通过 event.preventDefault() 之外，还可以让事件处理程序返回false，即显式的写 return false; 特别注意的是，通过JS调用.sumbit()方法不会触发submit事件。 阻止用户反复提交表单的方法是点击之后让submit按钮失效直到服务器返回数据，或者阻止之后的表单提交操作。

`.reset()`

有两种reset按钮，分别是input标签的type为reset和button标签type属性为reset的按钮。在按钮上点击鼠标，或者按钮拥有焦点的时候按回车键，都可以触发reset事件。 特别注意的是，通过JS调用.reset()方法依然会触发reset事件。 一般很少让用户重置所有数据，而是提供退回或者部分修改。

表单字段（控件）的属性、方法和事件

form对象可以用.elements取得其中所有控件元素（HTML表单元素）组成HTMLFormControlsCollection对象，类似一个数组，可以用索引和元素的name属性的值来进行索引。由于控件元素肯定要设置name属性，所以用name来索引比较方便。如果有多个元素使用同一个name，比如checkbox和radio，就会返回一个NodeList放着所有使用该name的元素。在本章，字段=控件=表单元素，对于每一个控件元素，除了<fieldset>之外，都有相同的属性如下：

**共有的控件元素属性和方法**
属性或方法名	说明
disabled	布尔值，表示当前控件是否被禁用，可以设置
form	指向当前控件所在的form元素。只读。
name	name属性的值，可以设置
readOnly	表示当前字段是否只读，设置为true就无法修改值，常用于表单验证时候帮用户固定某些值。
tabIndex	表示当前字段的切换序号
type	表示当前字段的类型。可设置。特别注意的是select元素对应的type值是"select-one"，多选最好做成checkbox。
value	被提交的值，可设置，只有文件字段是只读的。很重要，经常要设置。
.focus()	无参数，将浏览器的焦点设置在该控件上，让其可以响应键盘事件。HTML5设置了一个HTML5属性 autofocus，支持的浏览器会自动在页面load完后将焦点移动到该元素上,Chrome就支持。
.blur()	移走焦点，现在不常使用。

表单元素共通的有三个事件：

blur 失去焦点时触发
change 对于input和textarea，在改变了内容并且失去焦点的时候触发，对于select元素，选项一改变就会触发。
focus 获得焦点的时候触发。

注意，调用.blur()和.focus()方法都会触发对应的事件。

各种类型表单控件的属性和方法

除了通用的部分之外，DOM还提供了针对不同种类的控件元素的API。这一部分和HTML元素的属性以及HTML5新属性结合比较紧密

文本框脚本

文本框指的是input属性为text的单行文本框和textarea多行文本框。单行文本框用size属性可以设置显示多少字符，maxlength设置最大字符数，value设置初始值。多行文本框用rows 和 cols 设置行与列，初始值是写在标签内部的，无法指定最大值。在处理表单元素的值时，要通过.value属性，不要使用.setAttribute方法。

**文本框**
属性或方法名	说明
.select()	无参数，表示选中文本框内全部文本，焦点会设置到文本框。一般都编写事件让文本框在获得焦点的时候自动选择所有文本。手工选择文本框内的文本时，会触发select事件。
selectionStart	当文本框内选中文字的时候，该属性返回选中部分开始的索引值
selectionEnd	返回选中部分结束的索引值，将这两个索引传给.value.substring就可以拿到用户选择的内容，与select事件搭配使用。
.setSelectionRange(start,end)	设置文本框内选中文本的开始索引和结束索引，左闭右开。要看到选择效果，最好在使用该方法之前将焦点设置到文本框。

文本框通常还有一些行为：输入验证，剪贴板操作，自动切换焦点。遇到再来学习。主要还要看一看HTML 5 对于文本框新增的内容：

**文本框**
属性或方法名	说明
.select()	无参数，表示选中文本框内全部文本，焦点会设置到文本框。一般都编写事件让文本框在获得焦点的时候自动选择所有文本。手工选择文本框内的文本时，会触发select事件。
selectionStart	当文本框内选中文字的时候，该属性返回选中部分开始的索引值
selectionEnd	返回选中部分结束的索引值，将这两个索引传给.value.substring就可以拿到用户选择的内容，与select事件搭配使用。
.setSelectionRange(start,end)	设置文本框内选中文本的开始索引和结束索引，左闭右开。要看到选择效果，最好在使用该方法之前将焦点设置到文本框。

关于文本框，还有一些HTML 5 给 JS提供的API可以用来操作：

required HTML5有同名属性，单独加在标签内即可，表示该字段不能为空，由浏览器进行判断
pattern HTML5有同名属性，返回正则表达式字符串。
.checkValidity() 用之前的type，pattern，required等属性进行验证，这是HTML 5 给JS增加的API，成功返回true，失败返回false。所有表单元素都有该方法。
validity 这个属性表示为什么通不过测试，包含一系列错误
novalidity HTML5有同名属性，这个属性只能设置在form元素上，为true表示表单不进行验证。
formnovalidate HTML5有同名属性，这个属性仅能设置在提交按钮上，表示提交时无需验证，属于HTML5单独属性，添加即可。

这些HTML5属性，都可以单独只写在标签内生效,也可以用require="required"这种写法。用JS操作的时候，这些属性如果在标签上存在，就会返回true，如果不存在，就会返回false。

选择框脚本

选择框指的是select元素，其对象是HTMLSelectElement，除了通用表单属性以外还有独特的属性和方法：

**Select元素特有的属性和方法**
方法或属性	说明
.add(newOption,targetOption)	两个参数都必须是option元素，第一个参数是要插入的新元素，第二个元素是目标元素，会在目标元素之前插入新元素
multiple	和HTML5 属性同名，是否允许多项选择，可设置为true或false。
options	返回select内部所有option构成的HTMLCollection对象
.remove(index)	删除指定位置的选项。
selectIndex	当前被选中项的索引，从0开始。如果没有选中项，返回-1
size	显示的行数，默认是0
value	这个略微复杂，如果没有选中项，返回空字符串；如果有单个选中，返回value属性，如果value属性没指定，返回文本。如果有多个，按照单个的规则返回第一个选中项。记得给所有选项设置上value是个好习惯

除了select元素，其中的每一个option元素也有独特的属性

**Option元素特有的属性**
属性	说明
index	在当前select内部的索引
label	等于HTML5 属性label，没有设置label就返回选项文本
selected	布尔值，可设置是否选中。
text	选项文本
value	选项值，可设置，等于HTML 属性 value 的值。

表单序列化

正常情况下表单由浏览器进行一些操作之后发送给后端。表单序列化一般是为了给Ajax发送JSON字符串，方便后端解析，对于表单这种比较复杂的东西，也可以按照一定的规则进行序列化高程3提供了一个序列化成查询字符串的思路。实践中还是用ajax验证单个窗口，前后端验证结合起来比较好。这里就先了解一下。