用語解説

form actionとは?HTML共有・AI生成サイトでの意味をやさしく解説

HTMLフォームを作ったとき「送信ボタンを押したらどこに送るか」を指定するのがform actionです。AI生成のお問い合わせフォームや申込フォームをプレビューURLで共有する前に、このaction属性の設定を確認しないと、入力データが意図しない場所に送られるリスクがあります。

ひとことで言うと

form actionはHTMLの`<form>`要素に設定する属性で、フォームの送信先URLを指定します。`<form action="https://example.com/submit" method="post">`のように書くと、送信ボタンを押したとき指定URLにデータが送られます。action属性を省略するとフォームが表示されている現在のURLに送られます。

method属性と組み合わせて使います。`method="get"`の場合はURLパラメータとしてデータが付加されてブラウザのアドレスバーに表示されます。`method="post"`はリクエストボディにデータが入り、URLに表示されません。個人情報を扱うフォームはmust="post"が原則です。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

HTML共有で関係する場面

AIが生成したフォームのaction属性にサンプルURL(`https://httpbin.org/post`や`https://formspree.io/xxx`)が設定されたまま共有されているケースがあります。閲覧者がテスト目的でフォームを送信すると、そのデータが第三者のサービスに届いてしまいます。個人情報や社内情報が含まれる場合、情報漏洩になりかねません。

プレビュー段階でフォームを動作させたくない場合は、action属性を削除するか`action="#"`に設定してページ内リンクにとどめると安全です。またJavaScriptで`event.preventDefault()`を呼び出すことでフォームの送信自体を無効化することもできます。

よくある誤解

「action属性がないフォームは送信されない」という誤解があります。action省略時はフォームが表示されているURL自体がaction先になります。GETメソッドの場合は現在ページのURLにクエリ文字列が追加されてリダイレクトされるため、完全に無効化にはなりません。

「静的HTMLにフォームがあっても、サーバーがないから送信できない」も誤りです。HTMLのformタグはサーバー側の処理の有無に関わらず、action属性に指定したURLへHTTPリクエストを送ります。その先で受け取るかどうかは別の話です。外部サービスのエンドポイントが設定されていれば、静的HTMLからでもデータは送信されます。

安全に使うための注意点

共有前にHTMLのソースを確認し、すべての`<form>`タグのaction属性を探してください。知らない外部URLが設定されていたら、それを削除するか自分が管理するエンドポイントに変更します。特に`formspree.io` `netlify.com` `getform.io`などのサービスURLは、そのアカウントを誰が管理しているか不明なため注意が必要です。

フォームのプレビュー確認用として送信を無効化するには、scriptタグに`document.querySelectorAll('form').forEach(f => f.addEventListener('submit', e => e.preventDefault()))`を追加するだけで全フォームの送信をブロックできます。確認が終わったら削除またはコメントアウトして本番用に差し替えてください。

よくある質問

フォームの送信先を本番環境のURLに変えるタイミングはいつですか?

プレビュー共有と本番公開は別のファイルで管理することを推奨します。レビュー用には送信を無効化したHTMLを使い、本番公開用のみaction属性を実際のエンドポイントに設定することで、テスト中の誤送信リスクをなくせます。

GETとPOSTを間違えて設定していた場合、どんな問題が起きますか?

GETでパスワードや個人情報を送ると、URLにそのデータが含まれてブラウザ履歴・サーバーログ・プロキシログに記録されます。個人情報を扱うフォームは必ずmethod="post"を確認してください。ログイン・お問い合わせ・申込フォームはすべてPOSTが原則です。

プレビューURLのフォームをテストした場合、そのデータはどこに保存されますか?

データの保存先はaction属性のURL次第です。外部サービスのエンドポイントが設定されていればそのサービスに送られ保存されます。action属性が`#`または未設定で`event.preventDefault()`が有効なら、データはどこにも送られません。共有前に後者の状態にしておくことを強く推奨します。

関連記事

「用語解説」の記事をもっと見る →