表单控件的全面分析

1.提交表单

用户单击提交按钮或图像按钮时，就会提交表单。 使用<input>或<button>都可以定义提交按钮，只要将其type特性的值设置为“submit”即可，而图像按钮则是通过将<input>的type特性值设置为“image”来定义的。 因此，只要我们单击以下代码生成的按钮，就可以提交表单。 

用户单击重置按钮重置表单时，会触发reset事件。 利用这个机会，我们可以在必要时取消重置操作。 共有的表单字段属性除了<fieldset>元素之外，所有表单字段都拥有相同的一组属性。 由于<input>类型可以表示多种表单字段，因此有些属性只适用于某些字段，但还有一些属性是所有字段所共有的。 表单字段共有的属性和方法如下。

1. disabled：布尔值，表示当前字段是否被禁用。
2. form：指向当前字段所属表单的指针；只读。
3. name：当前字段的名称。
4. readOnly：布尔值，表示当前字段是否只读。
5. tabIndex：表示当前字段的切换（ tab） 序号。
6. type：当前字段的类型，如“checkbox”、 “radio”，等等。
7. value：当前字段将被提交给服务器的值。 对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。

除了form属性之外，可以通过JavaScript动态修改其他任何属性。  能够动态修改表单字段属性，意味着我们可以在任何时候，以任何方式来动态操作表单。

例如，很多用户可能会重复单击表单的提交按钮。 在涉及信用卡消费时，这就是个问题：因为会导致费用翻番。 为此，最常见的解决方案，就是在第一次单击后就禁用提交按钮。 只要侦听submit事件，并在该事件发生时禁用提交按钮即可。 

2. 共有的表单字段方法

每个表单字段都有两个方法：focus()和blur()。 其中，focus()方法用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件。 例如，接收到焦点的文本框会显示插入符号，随时可以接收输入。 使用focus()方法，可以将用户的注意力吸引到页面中的某个部位。

例如，在页面加载完毕后，将焦点转移到表单中的第一个字段。 为此，可以侦听页面的load事件，并在该事件发生时在表单的第一个字段上调用focus()方法与focus()方法相对的是blur()方法，它的作用是从元素中移走焦点。 在调用blur()方法时，并不会把焦点转移到某个特定的元素上；仅仅是将焦点从调用这个方法的元素上面移走而已。 在早期Web开发中，那时候的表单字段还没有readonly特性，因此就可以使用blur()方法来创建只读字段。 现在，虽然需要使用blur()的场合不多了，但必要时还可以使用的。 

3. 共有的表单字段事件

除了支持鼠标、 键盘、 更改和HTML事件之外，所有表单字段都支持下列3个事件。

1. blur：当前字段失去焦点时触发。
2. change：对于<input>和<textarea>元素，在它们失去焦点且value值改变时触发对于<select>元素，在其选项改变时触发。 
3. focus：当前字段获得焦点时触发。

当用户改变了当前字段的焦点，或者我们调用了blur()或focus()方法时，都可以触发blur和focus事件。 这两个事件在所有表单字段中都是相同的。 但是，change事件在不同表单控件中触发的次数会有所不同。 对于<input>和<textarea>元素，当它们从获得焦点到失去焦点且value值改变时，才会触发change事件。 对于<select>元素，只要用户选择了不同的选项，就会触发change事件；换句话说，不失去焦点也会触发change事件

4.文本框脚本

在HTML中，有两种方式来表现文本框：一种是使用<input>元素的单行文本框，另一种是使用<textarea>的多行文本框。 这两个控件非常相似，而且多数时候的行为也差不多。 不过，它们之间仍然存在一些重要的区别。要表现文本框，必须将<input>元素的type特性设置为“text”。 而通过设置size特性，可以指定文本框中能够显示的字符数。 通过value特性，可以设置文本框的初始值，而maxlength特性则用于指定文本框可以接受的最大字符数。