表单基础知识

<form action="" method="post"><input type="text" name="username">// ...
</form>
复制代码

上述例子是一个简单的<form>表单，action、method等为<form>元素的 HTML 特性（更多查看文档）。通过 JavaScript 也能操作指定特性。

表单对象的属性

• acceptChartset：服务器能够处理的字符集。对应accept-chartset特性。
• action：接收表单请求的URL。对应action特性。
• elements：表单中所有控件的集合（HTMLCollection）。
• length：表单中控件的数量。
• enctype：请求的编码类型。对应enctype特性。
• method：要发送的 HTTP 请求类型，通常get或post，默认get。对应method特性。
• name：表单的名称。对应name特性。
• target：用于发送请求和接收响应的窗口名称。对应target特性。

表单对象的方法

• submit()：提交表单。不会触发submit事件。
• reset()：将所有表单域重置为默认值。

获取表单对象

<form name="form1" id="myForm"></form>
<form name="form2"></form>复制代码

// 通过元素获取的方法
let form1 = document.getElementById('myForm')
// document.forms可以获取页面所有form元素
let form2 = document.forms.form2复制代码

表单控件(字段)

表单字段指的是，表单中的表单控件（字段）。表单字段组成的集合是一个有序列表，就是表单对象的elements属性。通过该集合可以获取到任意表单字段。下面给出简单例子介绍：

<form name="form1" action="#" id="form1" target=""><!-- div不是表单控件，所以elements不包含该对象 --><div name="div1">div1</div><ul><!-- 即使是嵌套的表单控件，elements也同样能获取 --><li><input type="text" name="input1" value="inputText"></li><li><input type="text" name="input2" value="inputText"></li><!-- name可以相同，elements对象将相同name特性的对象归于同一个RadioNodeList中 --><li><input type="text" name="input2" value="inputText"></li></ul>
</form>复制代码

let form1 = document.getElementById('form1');
// 获取elements对象
console.log(form1.elements);    // HTMLFormControlsCollection(3)[...]
// 通过序号获取
console.log(form1.elements[1]);    // <input type="text" name="input2" value="inputText">
// 通过"name"获取
console.log(form1.elements['input2']);    // RadioNodeList(2)[...]
复制代码

上述例子中，有几点要注意的：

1. 获取表单控件的方法有两个：根据顺序，用索引号获取，如form1.elements[1]；根据name特性获取，如form1.elements['input2']。
2. 根据name特性获取表单控件，可能有三种值：

• 当不存在指定name特性的控件，返回undefined；
• 当指定的name特性的控件只有一个，返回控件元素对象；
• 当指定的name特性的控件多于一个，返回RadioNodeList类型的类数组，存放多个控件元素对象。

表单控件未指定name特性时，仍然在elements对象内，即能用索引号获取，只是无法通过name特性获取。

控件对象的属性

• disabled：表示当前字段是否被禁用。布尔值，默认为false。被禁用的字段不会被提交。
• form：指向当前字段所属表单的指针。只读。
• name：当前字段的字段名称。
• readOnly：表示当前字段是否只读。布尔值，默认为false。
• tabIndex：当前字段的切换（tab）序号。（注意，非控件元素也能设置tab-index特性，拥有该特性的元素也能"获得焦点"，能触发焦点事件）
• type：当前字段的类型，如"checkbox"、"radio"等。
• value：当前字段将提交给服务器的值。对于文件字段，该属性是只读的，包含文件路径。

控件对象的方法

• focus()：使该表单字段获得焦点。
• blur()：使该表单字段失去焦点。

也可以通过window.onload事件函数给某个表单字段获得焦点，如window.addEventListener('load', e => {document.forms[0].elements[0].focus()});。

控件对象的事件

事件只有三个：blur、focus、change。都是比较简单的事件，不过多描述，要注意的只有change，当"单选"或"多选"发生改变也会触发该事件。更多关于事件的介绍请点击链接。

表单控件的类型

input

<input>是表单中最常用的一个，根据type特性的值不同，生成不同的控件。常用的type值如下。更详细的type值介绍请查看文档。

• text：文本输入框。
• password：密码输入框，字段中的字符会被遮蔽。
• number：数字输入框，非数字无法输入到框内。还支持最值和步长的设置
• email：邮箱输入框，自带邮箱验证。
• checkbox：勾选框，通常搭配<label>使用。
• radio：单选框，通过相同的name特性划分同一组单选框，通常搭配<label>使用。
• file：文件上传框。
• image：图片上传框。
• color：颜色选择框。
• ......

注意，无论是使用鼠标选择文本，还是使用select()或setSelectionRange()方法，都会触发输入框的select事件。

关于禁用验证：通过设置<form>的novalidite特性可以禁用整个表单的验证；通过<input type="submit">的formvalidate特性，可以使该按钮提示时禁用表单验证。

textarea

与<input type="text">类似，都是文本输入框，不同的是，<textarea>可以输入多行文字。

datalist