JavaScript - 表單元素 - Form Element

取得<form>裡元素

<form name="form1">
  <input type="text" id="username" /><br />
  <input type="password" id="password" /><br />
  <input type="button" id="send" />
</form> 

每一對<form>...</form>都解析為一個form物件，可以透過document.forms集合來引用這些物件，例如一個name屬性為"form1"：document.forms["form1"]來取得，或使用表單在HTML中的索引來引用：document.forms[1]，引用第二個表單物件。可以利用元素在集合中的位置或元素的name屬性來取得元素的引用。

以欄位名稱(name屬性)存取表單欄位

圖一：

// 取得表單名稱為form1的表單集合
var oform = document.forms["form1"]; 

// 取elements集合中name屬性為username的值
var getName = oform.elements.username.value; 

// 以元素名稱(username)來取值
var getName = oform.elements["username"].value;

// 表單和欄位都沒有指定name或id屬性，
// 可使用forms與elements的index位置存取欄位
var getName = oform.elements[0].value;

圖二 …

document.forms[0].elements[0].value; 

• forms：所有表單物件是都<form>的物件集合
• elements：表單內所有欄位物件的集合

forms與elements為一個Array Object，依tag在HTML文件出現的順序來編號，index由0開始。此方法，要注意tag順序的變動會影響JavaScript程式。

form

JavaScript form屬性

名稱	說明
action	存取form處理程式路徑
elements	Array，表單中所有表單欄位的集合
enctype	表單向伺服器發送資料時，資料應該使用的編碼方法，預設為「application/x-www-form-urlencoded」，如果要上傳檔案，則「multipart/form-data」
length	表單欄位的數量
method	存取form資料傳送方法，有post與get
name	表單的名稱，即<form>中的name屬性
target	form表單作用的框架

JavaScript form方法

名稱	說明
reset()	重設form欄位回預設值
submit()	送出form欄位到伺服器