HTML 表单

HTML 的 <form> 元素和各式各样的表单输入元素在客户端编程中有着重要地位，这些 HTML 元素的历史甚至比 JavaScript 本身更早，是第一代 Web 应用程序背后的运作机制：用户输入从表单元素收集，表单将这些输入提交给服务器，服务器处理输入并生成一个新的 HTML 页面显示在客户端。

以下是常见的 HTML 表单元素：

选取表单和表单元素

前面介绍的通过 DOM API 获取元素的所有方法都适用于表单及其所包含的元素：

document.getElementById("address").getElementsByTagName("input");
document.querySelectorAll('#shipping input[type="radio"]');
document.querySelectorAll('#shipping input[type="radio"][name="method"]');

有 name 或 id 属性的 <form> 元素可以直接通过如下方式获取：

window.address
document.address
document.forms[0].address
document.forms[0]
document.forms[0].address[0]
document.address.street
document.forms[0].address.elements[0]
document.forms[0].address.elements.street

但不推荐使用这种方式，推荐使用 DOM API。

表单和元素的属性

在 JavaScript 出现之前，需要一个专门的「提交」按钮来提交表单，一个专门的「重置」按钮来重置表单所有元素的值，JavaScript 的 Form 对象支持两个方法：submit() 和 reset()，分别用于提交和重置表单元素值。

所有表单元素都有以下属性：

• type：标识表单类型的只读属性
• form：所属 Form 对象的只读引用
• name：对应元素的name只读属性
• value：可读/写属性，指定表单元素或所代表的值

表单和元素的事件处理程序

每个表单都有一个 onsubmit 事件处理程序来侦测表单提交，还有一个 onreset 事件处理程序来侦测表单重置，这些事件处理程序会在点击「提交」或「重置」按钮时触发执行。

当用户与表单元素交互时往往会触发 click 或 change 事件，通过定义 onclick 或 onchange 事件处理程序可以处理这些事件。一般来说，点击按钮会触发 click 事件，而改变表单元素值则会触发 change 事件，这里面需要注意的是，当用户在一个文本域中输入时，不是每次输入都会触发 change 事件，而是输入完成将焦点移到其他元素时才会触发。

表单元素在获得键盘焦点时会触发 focus 事件，失去焦点时会触发 blur 事件。

按钮

按钮是最常用的表单元素之一，本身没有默认行为，除非它有 onclick 事件处理程序，否则没有什么用处。

提交和重置元素本就是按钮，只不过它们有与之关联到默认动作，如果 onclick 事件处理程序返回 false，这些按钮的默认动作就不执行了。可以使用 onclick 事件处理程序来执行表单校验，但通常使用的 是 Form 对象本身的 onsubmit 事件处理程序来执行表单校验。

开关按钮

复选框和单元框是开关按钮，通过对其单击用户可以改变它的开关状态，单选框返回的是单一值，而复选框返回的是类数组对象，单选和复选框都定义了 checked 属性，指定了元素当前是否选中。

用户勾选单选框或复选框，会触发 onclick 事件，如果勾选导致状态改变，也会触发 onchange 事件。

文本域

文本输入域在 HTML 表单和 JavaScript 程序中可能是最常用的元素。这里的文本输入域包含单行文本输入框（<input type="text">），也包含多行文本输入域（<textarea>）。value 属性表示用户输入的文本，通过设置该属性值可以显式指定应该在输入域中显示的文本，在 HTML 5 中还可以通过 placeholder 属性指定用户输入前在输入域中显示的提示信息：

 到达日期：<input type="text" name="arrival" placeholder="2018-09-01">

文本输入域的 onchange 事件处理程序会在用户完成编辑并将焦点移出时触发。

<input type="password"> 元素在用户输入时显示为星号，用于输入密码时不被别人看到。

<input type="file"> 元素文件上传，其 value 是只读属性。

还可以为文本输入域定义 onkeypress、onkeydown 和 onkeyup 等事件处理程序，用于实现更加个性化的需求。

下拉列表和选项元素

Select 元素表示用户可以做出选择的一组选项（用 Option 表示），浏览器通常将其渲染为下拉菜单的形式。

Select 元素能以两种不同的方式运作：单选和多选，这取决于 type 属性值如何设置。如果 <select> 元素有 multiple 属性，也就是 type 属性值为 select-mulitple，那就允许用户选择多个选项，否则，只能选择单个选项，对应的 type 属性值为 select-one。

当用户选取或取消选取一个选项时，会触发 onchange 事件处理程序，如果是单选，可以通过 Select 对象的 selectedIndex 属性指定哪个选项被选中，如果是多选，需要遍历 options 数值，检测Option 对象的 selected 属性值。

除了 selected 属性，每个 Option 对象还有一个 text 属性，用于指定该选项所显示的纯文本字符串，该属性是个可读/写属性，此外，该对象还有 value 属性，指定提交到服务器的选项值。

注：Option 对象本身没有任何与表单相关的事件处理程序，只能通过 Select 对象的事件处理程序来代替。

此外，由于历史原因，options 属性也可用来动态改变 Select 元素中的选项，比如通过 options.length 来控制选项数，设置 options 数组中某个索引的值为 null 可以删除该 Option 对象。我们还可以通过 options 数组动态为 Select 元素新增选项：

// 创建一个新的选项
var china = new Option("中国",     // text属性
                        "china",    // value属性
                        false,      // defaultSelected属性
                        fasle);     // selected属性
    
// 将新选项添加到 options 数组中，在 Select 元素中显示
var countries = document.address.country;   // 获取 Select 对象
countries.options[countries.options.length] = china;

当然，这些方法已经很古老了，不推荐使用，最好还是通过标准的 DOM API 来实现这些元素节点的新增和插入。