表单控件的全面分析
1.提交表单
用户单击提交按钮或图像按钮时,就会提交表单。 使用<input>或<button>都可以定义提交按钮,只要将其type特性的值设置为“submit”即可,而图像按钮则是通过将<input>的type特性值设置为“image”来定义的。 因此,只要我们单击以下代码生成的按钮,就可以提交表单。
用户单击重置按钮重置表单时,会触发reset事件。 利用这个机会,我们可以在必要时取消重置操作。 共有的表单字段属性除了<fieldset>元素之外,所有表单字段都拥有相同的一组属性。 由于<input>类型可以表示多种表单字段,因此有些属性只适用于某些字段,但还有一些属性是所有字段所共有的。 表单字段共有的属性和方法如下。
- disabled:布尔值,表示当前字段是否被禁用。
- form:指向当前字段所属表单的指针;只读。
- name:当前字段的名称。
- readOnly:布尔值,表示当前字段是否只读。
- tabIndex:表示当前字段的切换( tab) 序号。
- type:当前字段的类型,如“checkbox”、 “radio”,等等。
- value:当前字段将被提交给服务器的值。 对文件字段来说,这个属性是只读的,包含着文件在计算机中的路径。
除了form属性之外,可以通过JavaScript动态修改其他任何属性。 能够动态修改表单字段属性,意味着我们可以在任何时候,以任何方式来动态操作表单。
例如,很多用户可能会重复单击表单的提交按钮。 在涉及信用卡消费时,这就是个问题:因为会导致费用翻番。 为此,最常见的解决方案,就是在第一次单击后就禁用提交按钮。 只要侦听submit事件,并在该事件发生时禁用提交按钮即可。
2. 共有的表单字段方法
每个表单字段都有两个方法:focus()和blur()。 其中,focus()方法用于将浏览器的焦点设置到表单字段,即激活表单字段,使其可以响应键盘事件。 例如,接收到焦点的文本框会显示插入符号,随时可以接收输入。 使用focus()方法,可以将用户的注意力吸引到页面中的某个部位。
例如,在页面加载完毕后,将焦点转移到表单中的第一个字段。 为此,可以侦听页面的load事件,并在该事件发生时在表单的第一个字段上调用focus()方法与focus()方法相对的是blur()方法,它的作用是从元素中移走焦点。 在调用blur()方法时,并不会把焦点转移到某个特定的元素上;仅仅是将焦点从调用这个方法的元素上面移走而已。 在早期Web开发中,那时候的表单字段还没有readonly特性,因此就可以使用blur()方法来创建只读字段。 现在,虽然需要使用blur()的场合不多了,但必要时还可以使用的。
3. 共有的表单字段事件
除了支持鼠标、 键盘、 更改和HTML事件之外,所有表单字段都支持下列3个事件。
- blur:当前字段失去焦点时触发。
- change:对于<input>和<textarea>元素,在它们失去焦点且value值改变时触发对于<select>元素,在其选项改变时触发。
- focus:当前字段获得焦点时触发。
当用户改变了当前字段的焦点,或者我们调用了blur()或focus()方法时,都可以触发blur和focus事件。 这两个事件在所有表单字段中都是相同的。 但是,change事件在不同表单控件中触发的次数会有所不同。 对于<input>和<textarea>元素,当它们从获得焦点到失去焦点且value值改变时,才会触发change事件。 对于<select>元素,只要用户选择了不同的选项,就会触发change事件;换句话说,不失去焦点也会触发change事件
4.文本框脚本
在HTML中,有两种方式来表现文本框:一种是使用<input>元素的单行文本框,另一种是使用<textarea>的多行文本框。 这两个控件非常相似,而且多数时候的行为也差不多。 不过,它们之间仍然存在一些重要的区别。要表现文本框,必须将<input>元素的type特性设置为“text”。 而通过设置size特性,可以指定文本框中能够显示的字符数。 通过value特性,可以设置文本框的初始值,而maxlength特性则用于指定文本框可以接受的最大字符数。