（JS基礎）操作表單

<form action="" method="post">
<input type="text" name="username">
// ...
</form>
複製程式碼

上述例子是一個簡單的<form> 表單，action 、method 等為<form> 元素的 HTML 特性（ 更多檢視文件 ）。通過 JavaScript 也能操作指定特性。

表單物件的方法

方法只有兩個，提交和重置。

關於提交：在相應的表單控制元件擁有焦點時，點選回車鍵能提交表單；使用"表單提交按鈕"或回車鍵提交表單，都能觸發submit 事件。

關於重置：使用"表單重置按鈕"或表單物件的reset() 方法都能重置表單，都能觸發reset 事件。重置的值為控制元件value 特性指定的值，如<input type="text" value="first"> 被重置後則顯示"first"。

<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 特性獲取。

控制元件物件的屬性