HTMLFormElement: elements 屬性
HTMLFormElement 介面的 elements 屬性會返回一個 HTMLFormControlsCollection，其中列出了與 <form> 元素相關的所有表單控制元件。
您可以透過索引或元素的 name 或 id 屬性來訪問返回集合中的特定表單控制元件。
在 HTML5 之前，返回的物件是一個 HTMLCollection，而 HTMLFormControlsCollection 是基於它的。
獨立地，您可以使用 length 屬性獲取相關表單控制元件的數量。您可以使用文件的 forms 屬性來獲取給定文件中所有表單的列表。
值
一個包含所有與表單相關的非影像控制元件的 HTMLFormControlsCollection。這是一個即時集合；如果表單控制元件與表單相關聯或與之解除關聯，該集合將更新以反映更改。
返回集合中的表單控制元件的順序與它們在文件中出現的順序相同，遵循樹的先序深度優先遍歷。這被稱為樹序。
僅返回以下表單控制元件：
<button><fieldset><input>（例外情況是，出於歷史原因，其type為"image"的任何<input>都會被省略）<object><output><select><textarea>- 與表單關聯的自定義元素
示例
快速語法示例
在此示例中，我們將展示如何獲取表單控制元件列表，以及如何透過索引和名稱或 ID 訪問其成員。
<form id="my-form">
<label>
Username:
<input type="text" name="username" />
</label>
<label>
Full name:
<input type="text" name="full-name" />
</label>
<label>
Password:
<input type="password" name="password" />
</label>
</form>
const inputs = document.getElementById("my-form").elements;
const inputByIndex = inputs[0];
const inputByName = inputs["username"];
關聯的表單控制元件
此示例演示了 HTMLFormControlsCollection 如何包含與表單關聯的表單控制元件，而不是物理巢狀在 <form> 中的控制元件。
第一個表單是完整的，有四個表單控制元件：一個 <fieldset> 和三個 <input> 元素。<legend> 和 <label> 元素不是列表中的表單控制元件。第二個表單是稀疏的，只有一個巢狀的表單控制元件：一個單獨的 <object> 元素。完整表單中的所有表單控制元件都透過其 form 屬性與稀疏表單相關聯。
<form id="fullForm">
This form looks full, but it has no associated form controls
<fieldset form="sparseForm">
<legend>This is a legend</legend>
<label>A form control: <input form="sparseForm" /></label>
<label>Another form control: <input form="sparseForm" /></label>
<label>Yet another form control: <input form="sparseForm" /></label>
</fieldset>
</form>
<form id="sparseForm">
<object>Lone form control</object>
</form>
我們使用 elements 屬性來獲取每個表單的 HTMLFormControlsCollection。
const sparse = document.getElementById("sparseForm").elements;
const full = document.getElementById("fullForm").elements;
該集合包括表單元素的關聯表單控制元件，即與表單關聯的所有 <button>、<fieldset>、<input>、<object>、<output>、<select>、<textarea> 和與表單關聯的自定義元素，即使這些元素巢狀在另一個表單中，或者未巢狀在任何表單中。
console.log(`sparse form: ${sparse.length}`); // sparse form: 5
console.log(`full form: ${full.length}`); // full form: 0
集合中的表單控制元件與它們在文件中出現的順序相同。
console.log(`first member: ${sparse[0].tagName}`); // first member: FIELDSET
console.log(`last member: ${sparse[sparse.length - 1].tagName}`); // last member: OBJECT
訪問表單控制元件
此示例獲取表單的元素列表，然後遍歷列表，查詢型別為 "text" 的 <input> 元素，以便對它們執行某種形式的處理。
const inputs = document.getElementById("my-form").elements;
// Iterate over the form controls
for (const input of inputs) {
if (input.nodeName === "INPUT" && input.type === "text") {
// Update text input
input.value = input.value.toLocaleUpperCase();
}
}
停用表單控制元件
const inputs = document.getElementById("my-form").elements;
// Iterate over the form controls
for (const input of inputs) {
// Disable all form controls
input.setAttribute("disabled", "");
}
規範
| 規範 |
|---|
| HTML # dom-form-elements-dev |
瀏覽器相容性
載入中…