以下の内容はhttps://let.blog.jp/tag/FormDataより取得しました。


Chrome 112 で FormData のコンストラクタに引数が追加される
2 つめの引数に submitter が追加されるみたい

https://chromestatus.com/feature/5066604734316544
https://xhr.spec.whatwg.org/#interface-formdata

これまでの FormData ではサブミットボタンは対象外でした

<form id="form1">
<input name="text" value="a">
<button id="submit" type="submit" name="submit" value="1">submit</button>
</form>

という HTML があるときに このフォームを FormData 化して中身を見ると

const fd = new FormData(form1)
console.log(Array.from(fd.entries()))
// [
// ['text', 'a']
// ]

となっていて submit は含まれません

2 つめの引数の submitter に submit ボタンを渡すと

const fd = new FormData(form1, submit)
console.log(Array.from(fd.entries()))
// [
// ['text', 'a']
// ['submit', '1']
// ]

という感じで含まれるようになります

true/false じゃなくて HTML 要素を渡すのはフォームの挙動に合わせるためです
フォームにはサブミットボタンを複数配置できます
その中で押されたボタンの情報だけが送信されます
このフォームの動きに合わせて どのサブミットボタンを押されたとするかを指定するためです

<form id="form1">
<input name="text" value="a">
<button id="submit1" type="submit" name="submit" value="1">1</button>
<button id="submit2" type="submit" name="submit" value="2">2</button>
<button id="submit3" type="submit" name="submit" value="3">3</button>
</form>
const fd = new FormData(form1, submit2)
console.log(Array.from(fd.entries()))
// [
// ['text', 'a']
// ['submit', '2']
// ]

個人的には フォームから FormData をつくることはほぼなくて JavaScript の変数上に持っているデータから作ることばかりな上に フォームに複数のサブミットボタンを配置することもほぼないので使う機会は特になさそうです
従来のフォームで作られた画面でサブミットは fetch を使ってバックグラウンドでやるように変更したい みたいな場合には便利になるのかもですね
FormData で送ると PHP の php://input で受け取れない
FormData で送るとテキストだけでも multipart/form-data 形式で送信されるようです
自分で Content-Type を指定しなくても自動で

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryEeFLLVciEeJfWzFZ

みたいなヘッダーが追加されます

また PHP で生の POST データを受け取るための php://input は multipart 非対応らしいです
https://www.php.net/manual/ja/wrappers.php.php

送信データにファイルが無い場合でも multipart なら受け取れません
そのせいで FormData で送ると php://input でデータを受け取れないということになります

以下確認用

↓のページを用意

<?php

var_dump($_POST);
var_dump(file_get_contents('php://input'));

● 普通の form としての POST を実行してみる

fetch("", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: "a=1" })

レスポンス:
array(1) { ["a"]=> string(1) "1" } string(3) "a=1"

⇨ $_POST と php://input の両方で受け取れてる

● FormData で POST してみる

const fd = new FormData()
fd.append("a", "1")
fetch("", { method: "POST", body: fd })

ペイロード:
------WebKitFormBoundary7KvCNMsEQGTuSHn7
Content-Disposition: form-data; name="a"

1
------WebKitFormBoundary7KvCNMsEQGTuSHn7--

レスポンス:
array(1) { ["a"]=> string(1) "1" } string(0) ""

⇨ $_POST でだけ受け取れてる



以上の内容はhttps://let.blog.jp/tag/FormDataより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14