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

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

3 則留言:

  1. 感謝提供說明,簡單又清楚,讓我獲益良多,釐清一些觀念,感謝無私貢獻^^

    回覆刪除
  2. 這篇簡單清楚 幫助我克服瓶頸 十分感謝您:)

    回覆刪除

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。