(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)[...] 複製程式碼
上述例子中,有幾點要注意的:
-
獲取表單控制元件的方法有兩個:根據順序,用索引號獲取
,如
form1.elements[1]
;根據name
特性獲取 ,如form1.elements['input2']
。 -
根據
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() :使該表單欄位失去焦點 。