FormData: FormData() コンストラクター
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
構文
new FormData()
new FormData(form)
new FormData(form, submitter)
引数
form
省略可-
HTML の
<form>
要素です。指定された場合、FormData
オブジェクトは、その各要素の name プロパティをキーに、それらの送信される値を値として使い、フォームの現在のキーと値が設定されます。ファイルからの入力内容は、エンコードもされます。 submitter
省略可-
form
のメンバーである送信ボタンです。もしsubmitter
にname
属性があるか、<input type="image">
であった場合、このデータはFormData
オブジェクトに含まれます(例えばbtnName=btnValue
)。
例外
TypeError
-
指定した
submitter
が送信ボタンでない場合に発生します。 NotFoundError
DOMException
-
指定した
submitter
がform
のメンバーでない場合に発生します。submitter
はフォーム要素の子孫であるか、フォームを参照するform
属性がなければなりません。
例
空の FormData の作成
次の行は、空の FormData
オブジェクトを生成します。
const formData = new FormData();
append()
を使って、これにキーと値のペアを追加することができます。
formData.append("username", "Chris");
HTML フォーム要素からの事前入力
オプションで form
と submitter
を指定すると、FormData
オブジェクトを作成する際に、指定したフォームの値を事前入力することができます。
メモ: FormData オブジェクトに含まれるのは、正常なフォームコントロールのみです。つまり、名前を持ち、無効状態でないものです。
HTML
<form id="form">
<input type="text" name="text1" value="foo" />
<input type="text" name="text2" value="bar" />
<input type="text" name="text2" value="baz" />
<input type="checkbox" name="check" checked disabled />
<button name="intent" value="save">Save</button>
<button name="intent" value="saveAsCopy">Save As Copy</button>
</form>
<output id="output"></output>
JavaScript
const form = document.getElementById("form");
const submitter = document.querySelector("button[value=save]");
const formData = new FormData(form, submitter);
const output = document.getElementById("output");
for (const [key, value] of formData) {
output.textContent += `${key}: ${value}\n`;
}
結果
簡潔にするため、<form>
要素は非表示にしています。
仕様書
Specification |
---|
XMLHttpRequest # dom-formdata |
ブラウザーの互換性
BCD tables only load in the browser