FormData: FormData() コンストラクター

FormData() コンストラクターは、新しい FormData オブジェクトを生成します。

メモ: このメソッドはウェブワーカーで使用できます。

構文

js

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 オブジェクトを生成します。

js

const formData = new FormData();

append() を使って、これにキーと値のペアを追加することができます。

js

formData.append("username", "Chris");

HTML フォーム要素からの事前入力

オプションで form と submitter を指定すると、FormData オブジェクトを作成する際に、指定したフォームの値を事前入力することができます。

メモ: FormData オブジェクトに含まれるのは、正常なフォームコントロールのみです。つまり、名前を持ち、無効状態でないものです。

HTML

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

js

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 Standard
# dom-formdata

ブラウザーの互換性

BCD tables only load in the browser

関連情報