HTML DOM 表單物件


HTML DOM 表單物件與 HTML <form> 元素相關聯。我們可以使用 document 物件的 createElement() 和 getElementById() 方法建立和訪問表單元素。我們可以設定表單物件的各種屬性,也可以獲取它們。

屬性

以下是表單物件的屬性:

屬性描述
acceptCharset設定或返回表單中的 accept-charset 屬性值。
action設定或返回表單的 action 屬性值。
autocomplete設定或返回表單的 autocomplete 屬性值。
encoding這是 enctype 的別名。
enctype設定或返回表單的 enctype 屬性值。
length返回表單中元素的數量。
method設定或返回表單的 method 屬性值。
name設定或返回表單的 name 屬性值。
noValidate設定或返回表單資料是否應該被驗證,由使用者提交時決定。
target設定或返回表單的 target 屬性值。

方法

以下是表單物件的方法:

method描述
reset()重置表單。
submit()提交表單。

示例

讓我們來看一個 HTML DOM 表單物件的示例:

線上演示

<!DOCTYPE html>
<html>
<head>
<script>
   function CreateForm() {
      var f = document.createElement("FORM");
      document.body.appendChild(f);
      var i = document.createElement("INPUT");
      i.setAttribute("type", "password");
      f.appendChild(i);
   }
</script>
</head>
<body>
<h1>Form object example</h1>
<p>Create a FORM element containing an input element by clicking the below button</p>
<button onclick="CreateForm()">CREATE</button>
<br><br>
</body>
</html>

這將產生以下輸出:

點選“建立”按鈕並在輸入欄位中輸入內容:

在上面的例子中:

我們建立了一個名為“建立”的按鈕,當用戶點選時,將執行 createForm() 方法。

<button onclick="CreateForm()">CREATE</button>

CreateForm() 方法使用 document 物件的 createElement() 方法建立一個 <form> 元素,並將其賦值給變數 f。然後使用 appendChild() 方法將表單元素新增到文件主體。然後,我們使用 createElement() 方法建立一個輸入元素,並使用 setAttribute() 方法為其設定值為“password”的 type 屬性。

setAttribute() 方法會在屬性之前不存在的情況下建立屬性。最後,使用 appendChild() 方法在表單元素上呼叫,並將輸入元素作為引數傳遞,我們將輸入元素作為表單元素的子元素附加。

<button onclick="CreateForm()">CREATE</button>

更新於:2021年2月20日

3K+ 次瀏覽

啟動你的職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.