コンテンツにスキップ

048. Form Data（フォームデータ送信：荷物をまとめてサーバーへ届ける）

原理：Web通信の「標準の配送便」

荷物をひとまとめにする仕組み

これまでの記事で習ったパラメータ（クエリやパス）は、いわば「封筒の外側に書かれたメモ」のようなものでした。それに対して、今回解説する「Form Data（フォームデータ）」は、封筒の「中身」そのものです。

ユーザーが名前を打ち込み、性別を選び、チェックボックスに印を付ける。 これらの多種多様な情報を、サーバーが解読できる一つの「荷物（データ形式）」にまとめ上げ、POSTやPUTといった通信に乗せて一気に届ける。これがフォームデータ送信の本質です。

HTMXでは、特別な設定をしなくても、この「荷造り」を非常に賢く、自動で行ってくれます。

実践：HTMXがやってくれる「自動荷造り」

1. 親フォームの値を自動で集める

HTMXのボタンが <form> タグの中に置かれている場合、HTMXはそのフォーム内にあるすべての入力欄（<input>, <select>, <textarea>）の値を、自動的にかき集めて送信してくれます。

<form hx-post="/api/register" hx-target="#message">
    <input type="text" name="username" placeholder="名前">
    <select name="country">
        <option value="jp">日本</option>
        <option value="us">アメリカ</option>
    </select>

    <!-- ここでボタンを押すと、usernameとcountryが自動で送信される -->
    <button type="submit">登録する</button>
</form>

<div id="message"></div>

2. 外部の要素からも値を集める（hx-include）

ボタンがフォームの外にあったり、別の場所にある入力欄を「ついでに」一緒に送りたい場合は、hx-include 属性を使って荷物に混ぜることができます。

<input type="checkbox" id="agree-check" name="agree"> 同意する

<!-- ボタンは離れた場所にあるが、#agree-check の値も一緒に送る -->
<button hx-post="/api/submit" hx-include="#agree-check">
    送信
</button>

3. ステップ・バイ・ステップ解説

  1. 名前（name）の重要性: 各入力項目には必ず name 属性を付けてください。これが、サーバー側で「どの箱に何のデータが入っているか」を識別する唯一の手がかり（キー）になります。
  2. データ形式: 標準では application/x-www-form-urlencoded という形式で送られます。これは「名前=中身1&名前2=中身2」という風に、データを1本の紐のように繋げた形式です。
  3. サーバーで解読: サーバー側（Node.js, PHP, Rubyなど）は、届いた荷物を自動で解読し、「usernameの中身は田中、countryはjp」といった風に取り出して使うことができます。

比較：通常のForm送信 vs HTMXのデータ送信

通常のHTML Form

  • 挙動: 送信後、ブラウザは必ずページをリロード（あるいは遷移）しようとします。
  • 課題: 画面が一瞬白くなり、ユーザーの操作が途切れます。

HTMXのデータ送信

  • 挙動: 荷造りは全く同じですが、通信を「裏側」で行います。
  • メリット: ユーザーは今のページに留まったまま、保存や登録の完了を（一部の書き換えだけで）知ることができます。

まとめ：初心者のための「荷解き」の約束

フォームデータ送信は、あなたとサーバーを結ぶ「最もタフで確実な配送便」です。

  • 「name」を忘れない: これがないと、どんなに入力してもらってもサーバー側では「名無しのデータ」になってしまい、ゴミ箱に捨てられてしまいます。
  • 適切な method を選ぶ:
    • 新しいものを作るなら hx-post
    • 今あるものを上書きするなら hx-put
    • 情報の一部を直すなら hx-patch
  • ファイル送信には注意: 写真などのファイルを送る場合は、さらに頑丈な荷造り（hx-encoding="multipart/form-data"、029.解説）が必要です。

ユーザーの入力を、大切に、正確にサーバーへ。hx-include などの便利な属性も駆使しながら、自由自在な「データの配送ルート」を構築してください。次の記事では、プログラミングの世界で今最も好まれている形式「JSONリクエスト（049. JSON Request）」との付き合い方について解説します。