（JS基础）操做表单

<form>元素对应的时 HTMLFormElement类型，继承自HTMLElement，于是拥有与HTMLElement相同的默认属性。<form>元素内部还须要"内容"，而填充"内容"的元素有<input>、<button>、<textarea>、<select>、<option>等，这些成为表单控件，表单控件都有name特性。

表单基础知识

<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事件。

关于重置：使用"表单重置按钮"或表单对象的reset()方法都能重置表单，都能触发reset事件。重置的值为控件value特性指定的值，如<input type="text" value="first">被重置后则显示"first"。

• 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类型的类数组，存放多个控件元素对象。
3. 表单控件未指定name特性时，仍然在elements对象内，即能用索引号获取，只是没法经过name特性获取。
   

控件对象的属性

除 <fieldset>元素外，全部表单控件对象都拥有相同的一组属性。

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

控件对象的方法

表单字段的方法主要是关于焦点控制的。

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

HTML5 为表单字段新增了一个 autofocus属性，如 <input type="text" autofocus>。

也能够经过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：颜色选择框。
• ......

除了type特性值外，还有几个 特性是须要注意的：

1. required：表示必填字段。
2. placeholder：针对输入框，表示输入前的占位显示符。
3. pattern：针对输入框，表示用于验证输入的正则表达式，如pattern="\d+"。
4. value：对于输入框，表示初始的值；对于选择框，表示该选项的值。
5. maxlength：针对输入框，表示能接受的最大字符数。
6. size：针对输入框，表示能显示的字符数。
7. min：针对数字输入框，表示数字输入框能输入的最小值。
8. max：针对数字输入框，表示数字输入框能输入的最大值。

控件对象的经常使用属性和方法：

1. value：获取控件对象当前的值。
2. stepUp()和stepDown()：针对数字输入框（type="number"），接收一个参数，表示在当前值的基础上增长或减小的值。
   
3. checkValidity()：当输入框设置了验证条件（如type="email"等自带验证的或带有required、pattern等特性的控件），使用该方法能够获取控件的输入是否经过验证，布尔值。更多请查看InputElement API的文档。
4. validity：比checkValidity()更详细，该属性中包含多个属性，都是布尔值，可获得表单字段无效的缘由。
5. select()：针对输入框，使该控件得到焦点，并选择输入框内全部文本。
6. setSelectionRange(startIndex, endIndex)：一样针对输入框，选择输入框内部分文本，但不会使控件得到焦点，因此使用前须要使用focus()取得焦点。startIndex和endIndex分别表示字符的索引。

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

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

textarea

与<input type="text">相似，都是文本输入框，不一样的是，<textarea>能够输入多行文字。

关于本文输入的知识，上面已经说起，再也不赘述。

默认状态，<textarea>能够调节宽高，若想禁用，请设置 CSS 样式：style="resize:none;"。

经过设置rows和cols特性，能够限制<textarea>的行数和列数。

初始值必须放在起始和结束标签的中间，即<textarea>defaultValue</textarea>。

select

<select>是一个提供 选项菜单的控件，而 <option>为选项 菜单的项，还能用 <optgroup>包裹多个 <option>组成一个 分组，并为分组提供命名。以上三个元素的特性请点击各自的连接查看详细，这里只作简单介绍。

简单例子：

<select name="mySelect"> <optgroup label="Group 1"> <option>Option 1.1</option> </optgroup> <optgroup label="Group 2"> <option>Option 2.1</option> <option>Option 2.2</option> </optgroup> <optgroup label="Group 3" disabled> <option>Option 3.1</option> <option>Option 3.2</option> <option>Option 3.3</option> </optgroup> </select> 复制代码

效果以下图：

上述例子看出：

<select>中的multiple特性为true时，列表能够多选，默认为false；经过该控件对象上的value属性能够访问当前已选择的值。

<optgroup>的label特性表示该分组的名字，仅用于显示，对<select>的value不影响。

<option>的value值能够省略，当其省略时取标签内的值；selected特性表示该项是否被选中，非多选状况下只能有一个。

选择框控件<select>是HTMLSelectElement类型的对象，有如下属性和方法： 

• add(newOption, relOption)：向选择框控件中插入新<option>元素，其位置在相关项(relOption)以前。
• remove(index)：移除指定索引的选项。
  
• options：选择框控件中全部<option>元素的HTMLCollection。
• multiple：布尔值，选择框控件是否能够多选。等价于multiple特性。
• selectedIndex：整型值，获取被选中的选项的索引值(0开始)。对于未选择任何项，值为 -1；对于已选择多项，只获取较前的选项的索引值。
  
• size：选择框控件中可见的行数。等价于size特性。
• value：表示已选择的项的值。有三种可能：当无选中项，值为空字符串；当有一个选中项，值为该选项的值；当有多个选中项，值为较前的选项的值。

datalist

<datalist id="datalistName">并不算是表单控件， 必须配合 <input list="datalistName"> 使用， 为输入框提供可选列表。上面已对 <option>的使用有简单描述，很少赘述。

简单例子：

<input type="email" list="emails" name="myEmail"/> <!-- 必须经过ID关联 --> <datalist id="emails"> <option value="1234@qq.com"> <option value="666@qq.com"> <option value="1888888@139.com"> </datalist>复制代码

效果图以下：