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>
廣告
資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP