このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
FormData: FormData() コンストラクター
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
FormData() コンストラクターは、新しい FormData オブジェクトを生成します。
メモ: このメソッドはウェブワーカーで使用できます。
構文
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が送信ボタンでない場合に発生します。 NotFoundErrorDOMException-
指定した
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>
form {
display: none;
}
output {
display: block;
white-space: pre-wrap;
}
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> 要素は非表示にしています。
仕様書
| 仕様書 |
|---|
| XMLHttpRequest # dom-formdata |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。