表单字段
表单作为web应用中不可或缺的一部分，当然也是可以使用原生的 DOM 元素来访问的
除了标准的访问方式之外，每个表单都拥有一个 elements 属性，该属性保存着该表单所有 表单元素 的集合，该集合是一个有序列表，包含着所有的表单字段
这些元素在该集合中出现的顺序，与在文档中出现的顺序一致
在该集合中可以使用 name 和 在文档中的顺序 来对其中的元素进行索引
若有多个表单元素拥有相同的 Name，那么将会返回一个 nodelist 集合
以下方的HTML代码片段为例：
<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>
在上面这个简单的表单中，有三个单选按钮，他们的name都是“color”，如果我们访问 elements["color"] 将会返回一个 nodelist，包含上边代码中的 三个 input 元素
不过如果访问 elements[0] 将只会返回第一个 input 元素
共有的表单字段属性
除了<fieldset>元素之外，所有的表单字段都拥有一组公共相同的属性
由于 <input> 类型可以表示多种表单字段，因此有些属性只适用于部分表单字段，但仍有一些属性是所有字段所共有的
表单字段共有的属性如下：
- disabled：布尔值 表示当前的字段是否被禁用
- form：指向当前字段的所有表单属性
- name：当前字段的名称
- readOnly：布尔值，表示当前字段是否只读
- tabIndex：表示当前字段的切换（tab）序号
- type：当前字段的类型
- value：当前字段提交给服务器的值
以上属性中只有 form 是无法修改的
其它字段都可以通过 JavaScript 动态修改
对于上面属性中的 type 属性：
- input 的 type 属性和其HTML特性的值一致
- select 的值为 “select-one”
- <select multiple> 的值为 "select-multiple"
- button 的 type 属性和其HTML特性的值一致
例如上一篇文章提到的当用户提交请求后就禁用按钮，这一功能则可以通过以下代码实现：
var form = document.getElementById("myForm");// 获取表单元素
form.addEventlistener("submit",function(event){
var btn = event.target;// 获取触发提交事件的按钮
btn.disabled = true;// 禁用该按钮
},true)
需要注意的是：不要使用 click 事件来禁用按钮，因为不同的浏览器之间存在时差，即无法确定click事件禁用按钮时数据是否被发往服务器
共有的表单字段方法
所有的表单字段都拥有两个方法： focus（） 和 blur（）
其中 focus 方法用于将浏览器的焦点设置到表单字段，用以激活表单字段，使其可以响应表键盘事件
其中focus的主要用途有两种
- 用于当文档加载完成后将用户的注意力吸引到表单的特定位置
- 用于用户输入信息校验，即只有当用户的输入达到要求时才能改变焦点进行其它操作
对于第一种应用场景，我们只需要在文档的 load 事件完成之后，对我们希望的元素调用 focus 方法即可
而对于第二种应用场景也十分的简单，只需要在当我们校验检测不通过时又将焦点设置回原来的元素即可
此外，对于第一种应用场景 HTML5 提供了 autofous 特性用于实现这一效果：
<input type="text" autofocus>
在支持该特性的浏览器中当文档加载完成，焦点就会设置为上面的 input 元素
blur方法的作用与 focus 方法相反，将焦点从当前元素移除，但并不移动到某个特定元素
这个方法早期用于创建只读字段，即当触发获取焦点事件就调用 blur 方法将焦点移出该元素
共有的表单字段事件
除了支持基本的 鼠标、键盘、变动、HTML事件之外，所有的表单字段都支持以下三个事件：
- blur：当前字段失去焦点时触发
- change：对于 input、textarea 元素，当其失去焦点且value值被改变时触发，对于select元素改变选项时触发
- focus：当前字段获得焦点时触发
通常使用上述事件来改变用户界面，或者向用户给出视觉提示
其中change事件则常常用于验证用户输入
需要注意的地方在于：blur事件和change事件的关系并没有严格的规定，在某些浏览器中blur事件会先于change事件发生，而有些则恰恰相反