A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/API/FormData/FormData below:

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

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

Baseline Widely available *

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 が送信ボタンでない場合に発生します。

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>
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> 要素は非表示にしています。

仕様書 ブラウザーの互換性 関連情報

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4