【HTML】formのaction属性とは｜送信先URLの書き方、省略したときの動き、methodやformactionとの関係

お問い合わせフォームやログイン画面を作るときに使う form タグには、action という属性があります。この記事では、action の役割と、送り先URLの書き方、省略したときの動き、よくある間違いをまとめます。フォーム全体の書き方は「フォーム（form）の書き方」で紹介しています。

action属性の役割

action は、「入力された内容をどのURLに送るか」を決める属性です。送信ボタンを押すと、ブラウザは入力された内容を action のURLに送り、そのURLから返ってきたページ（「送信しました」など）を表示します。

<form action="/contact/send.php" method="post">
  <label>お名前 <input type="text" name="name"></label>
  <button type="submit">送信</button>
</form>

<form action="/contact/send.php" method="post">
  <label>お名前 <input type="text" name="name"></label>
  <button type="submit">送信</button>
</form>

送られた内容を受け取って処理するのは、送り先のURLで動くサーバー側のプログラム（上の例なら send.php）です。HTMLだけでは、内容をメールで届けたり保存したりはできません。

送り先URLの書き方

同じサイトの中に送るときは、/ で始まる書き方にしておくと、フォームを別のページに移しても送り先が変わらず、迷いにくくなります。

actionを省略したとき

action を書かないと、ブラウザは今表示しているページと同じURLに送ります。入力を受け取って、エラーがあれば同じページにフォームをもう一度表示する、という作りのときに使われます。

action="" のように空で書いてもブラウザの動きは同じですが、HTMLの決まりでは、action を書くなら空にしないことになっています。今のページに送りたいときは、属性ごと省略します。

JavaScript（ReactやVueなど）で作る画面では、送信ボタンが押されたときにブラウザの通常の送信を止め（preventDefault()）、JavaScriptの fetch で送ることが多いので、action を使わないこともあります。

WordPressの検索フォームの例

WordPressの検索フォームは、action と method の分かりやすい例です。ブログの検索欄のページのHTMLを見ると、次のような形になっています。

<form role="search" method="get" action="https://softdev-learn.cc/">
  <input type="search" name="s">
  <button type="submit">検索</button>
</form>

<form role="search" method="get" action="https://softdev-learn.cc/">
  <input type="search" name="s">
  <button type="submit">検索</button>
</form>

「HTML」と入力して検索すると、https://softdev-learn.cc/?s=HTML に移動します。action がトップページのURL、method="get" なので入力内容がURLの後ろに ?名前=値 の形で付き、その「名前」が入力欄の name="s" です。検索結果のページはURLを保存したり共有したりできるので、検索には get が向いています。

ボタンごとに送り先を変える formaction

1つのフォームに「保存」と「プレビュー」のようなボタンがあり、押したボタンによって送り先を変えたいときは、ボタンに formaction を付けます。formaction を付けたボタンで送信したときだけ、form の action の代わりにそちらが使われます。

<form action="/post/save.php" method="post">
  <textarea name="body"></textarea>
  <button type="submit">保存</button>
  <button type="submit" formaction="/post/preview.php">プレビュー</button>
</form>

<form action="/post/save.php" method="post">
  <textarea name="body"></textarea>
  <button type="submit">保存</button>
  <button type="submit" formaction="/post/preview.php">プレビュー</button>
</form>

よくある間違い

• 送信ボタンの type：
  送信するボタンは <button type="submit"> か <input type="submit"> にします。type="button" のボタンを押しても送信されません。逆に、form の中の button は type を書かないと送信ボタンになるので、送信しないボタンには type="button" を付けます
• 個人情報は post で、HTTPS のページから送る：
  get だと入力内容がURLに付いて履歴に残るので、名前やパスワードは post で送ります。ただし post でも中身は暗号化されないので、action のURLもページも https:// にします
• 送り先は入力内容をそのまま信じない：
  ブラウザの開発者ツールを使えば、action も入力欄も書き換えて送れます。受け取るプログラムの側で、届いた内容が正しいかを必ず確かめます

HTML全体の基本は「HTMLの基本｜タグの書き方とよく使う5つのタグ」、リンクの href でのパスの書き方は「aタグ（リンク）の書き方」で紹介しています。

まとめ

• action は入力内容の送り先URL、method は送り方
• 同じサイトの中に送るなら、/ で始まる書き方が迷いにくい
• 今のページに送るなら、action="" ではなく属性ごと省略する
• ボタンごとに送り先を変えるなら formaction
• 個人情報は post と HTTPS で送り、受け取る側でも内容を確かめる