第14章 表单脚本

14.1 表单的基础知识

14.1.1 提交表单

<!-- 通用提交按钮 -->
<input type="submit" value="Submit Form">
<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>
<!-- 图像按钮 -->
<input type="image" src="graphic.gif">

14.1.2 重置表单

<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>

14.3 选择框脚本

选择框的 type 属性不是 "select-one"，就是 "select-multiple"，这取决于 HTML 代码中有没有 multiple 特性。选择框的 value 属性由当前选中项决定，相应规则如下：

• 如果没有选中的项，则选择框的 value 属性保存空字符串；
• 如果有一个选中项，而且该项 value 特性已经在 HTML 中指定，则选择框的 value 属性等于选中项的 value 特性。及时 value 特性的值是空字符串，也同样遵循词条规则。
• 如果有一个选中项，但该项的 value 特性在 HTML 中未指定，则选择框的 value 属性等于该项的文本。
• 如果有多个选中项，则选择框的 value 属性将依据前两条规则取得第一个选中项的值。

大部分 DOM 对象的目的都是为了方便对选项数据的访问，但使用常规的 DOM 功能来访问效率比较低下。

var selectBox = document.forms[0].elements["location"];

// 不推荐
var text = selectBox.options[0].firstChild.nodeValue;   // 选项的文本
var value = selectBox.options[0].getAttribute("value"); // 选项的值

使用选项属性的方式对比：

var selectBox = document.forms[0].elements["location"];

// 推荐
var text = selectBox.options[0].text;   // 选项的文本
var value = selectBox.options[0].value; // 选项的值

注意：选择框的 change 事件与其他表单字段的 change 事件触发的条件不一样，其他表单字段的 change 事件是在值被修改且焦点离开当前字段时触发，而选择的 change 事件只要选中了选项就会触发。