JavaScriptにおけるFormDataの扱い

次のようなフォームがあるとします：

<form action="/target/" method="POST">
	<input name="test1" value="123">
	<input name="test2" value="456">
	<input type="submit">
</form>

このフォームのデータをキーと値のペアとして取得したいとします。そのためにはループを実行して目的のデータを構築しなければならないことは明らかです。しかし、JavaScriptにはより簡単な方法があります。フォームのデータを整然とした形式で取得できる特別なオブジェクトFormDataを使用することができます。

このオブジェクトの扱いについて見ていきましょう。まずは、フォームへの参照を取得します：

let form = document.querySelector('form');

次に、このフォームを使用してオブジェクトを作成します：

let formData = new FormData(form);

このオブジェクトをコンソールに出力できますが、この方法ではフォームのデータを確認することはできません：

console.log(formData);

フォームのデータを確認するために、このオブジェクトを配列に変換します：

console.log(Array.from(formData));

3つの入力欄を持つフォームとボタンが与えられています。ボタンをクリックしたときに、フォームのデータをFormDataオブジェクトとして取得してください。