（JS基礎）操作表單

hozee的個人筆記發表於2019-04-16
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特性。

表單物件的方法

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

關於提交：在相應的表單控制元件擁有焦點時，點選Enter鍵能提交表單；使用"表單提交按鈕"或Enter鍵提交表單，都能觸發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型別的類陣列，存放多個控制元件元素物件。
  • 表單控制元件未指定name特性時，仍然在elements物件內，即能用索引號獲取，只是無法通過name特性獲取。

    • 控制元件物件的屬性

    除<fieldset>元素外，所有表單控制元件物件都擁有相同的一組屬性。
    • disabled：表示當前欄位是否被禁用。布林值，預設為false。被禁用的欄位不會被提交。
    • form：指向當前欄位所屬表單的指標。只讀。
    • name：當前欄位的欄位名稱。
    • readOnly：表示當前欄位是否只讀。布林值，預設為false。
    • tabIndex：當前欄位的切換（tab）序號。（注意，非控制元件元素也能設定tab-index特性，擁有該特性的元素也能"獲得焦點"，能觸發焦點事件）
    • type：當前欄位的型別，如"checkbox"、"radio"等。
    • value：當前欄位將提交給伺服器的值。對於檔案欄位，該屬性是只讀的，包含檔案路徑。

    控制元件物件的方法

    表單欄位的方法主要是關於焦點控制的。
    • focus()：使該表單欄位獲得焦點。
    • blur()：使該表單欄位失去焦點。

















    相關文章