表单字段(控件)选择和共有属性方法及事件

表单字段(控件)选择

如果想访问表单元素，可以使用之前章节讲到的DOM方法访问。但使用原生的DOM访问虽然比较通用，但不是很便利。表单处理中，我们建议使用HTML DOM，它有自己的elements属性，该属性是表单中所有元素的集合。

fm.elements[0]; //获取第一个表单字段元素
fm.elements['user']; //获取name是user的表单字段元素
fm.elements.length; //获取所有表单字段的数量
如果多个表单字段都使用同一个name，那么就会返回该name的NodeList表单列表。

我们是通过fm.elements[0]来获取第一个表单字段的，但也可以使用fm[0]直接访问第一个字段。因为fm[0]访问方式是为了向下兼容的，所以，使用elements属性来获取。

共有的表单字段属性

除了<fieldset>元素之外，所有表单字段都拥有相同的一组属性。由于<input>类型可以表示多种表单字段，因此有些属性只适用于某些字段，共有的属性：

disabled：布尔值，表示当前字段是否被禁用
form：指向当前字段所属表单的指针，只读
name：当前字段的名称
readOnly：布尔值，表示当前字段是否只读
tabIndex：表示当前字段的切换
type：当前字段的类型
value：当前字段的值

除了<fieldset>字段之外，所有表单字段都有type属性。对于<input>元素，这个值等于HTML属性的type值。对于非<input>元素，这个type的属性值如下：

单选列表(<select>...</select>)：select-one
多选列表(<select multiple>...</select>)：select-multiple
自定义按钮(<button>...</button>)：button
自定义非提交按钮(<button type="button">...</button>)：button
自定义重置按钮(<button type="reset">...</button>)：reset
自定义提交按钮(<button type="submit">...</button>)：submit

<input>和<button>元素的type属性是可以动态修改的，而<select>元素的type属性则是只读的。(在不必要的情况下，建议不修改type)。

每个表单字段都有两个方法：foucs()(将焦点定位到表单字段里)和blur()(从元素中将焦点移走)。

表单共有的字段事件有以下三种：

blur:当字段失去焦点时触发
change:对于<input>和<textarea>元素，在改变value并失去焦点时触发;对于<select>元素，在改变选项时触发
focus:当前字段获取焦点时触发

关于blur和change事件的关系，并没有严格的规定。在某些浏览器中，blur事件会先于change事件发生;而在其他浏览器中，则恰好相反。