2025-form-data/1.html at main · codegrid/2025-form-data · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="email=no,telephone=no,address=no" />
<title>=^.^=</title>
<script>
async function handleSubmit(e) {
  e.preventDefault();

  const formData = new FormData(e.target);
  console.log(formData.get("title")); // "テスト記事" を出力
  console.log(formData.get("content")); // "これはテストです" を出力

  await fetch("/api/submit", {
    method: "POST",
    body: formData,
    // 注意：headers: { "Content-Type": "multipart/form-data" } は指定しない！
  });
}
</script>

</head>
<body>
<form onsubmit="handleSubmit(event)">
    <input name="title" value="テスト記事" />
    <textarea name="content">これはテストです</textarea>
    <button type="submit">送信</button>
</form>

</body>
</html>