HTML Formを扱うにはまずmethod(メソッド)とaction(アクション)を理解しなければなりません。
HTMLでフォームを使うためには避けては通れない道ですので、この記事で解説していきたいと思います。
フォームにおけるaction(アクションの役割)
<form>タグにおける”action”は送信先を指定するためのものです。
HTMLでフォームを設置してもそのままでは何もできません。
submitボタンを押すという動作は言い換えると送信先に情報を送信するということになります。
“action”は直訳すると”行動”ですから、フォームにおけるactionは「送信」を指します。
メールフォームを例に挙げると、このactionに送信先のURIを指定しサブミットすることで、フォームはHTTPプロトコルを使用して該当サーバーにリクエストを送っているのです。
情報送信時に注意すること
先の説明で、actionには送信先パスを指定することがわかりましたが、actionをそのまま利用するとどうなるかについての説明をしていきます。
まずフォーム情報を扱う上で絶対にやってはいけないことが二つあります。
一つ目は、action自体は何のセキュリティも有していないため、フォームの情報をそのまま送信してしまうと第三者に全ての情報が見られてしまうことからこれは絶対に禁止です。
またクロスサイトスクリプティングをはじめとした攻撃もノーチェックで通過させてしまうため、悪意の第三者から見れば遣りたい放題のサイトとなってしまう危険性まであります。
二つ目はフォームに「action=””」以外の記述をしてしまうことです。
もう少し簡単に言い換えると、”action=”の後についているダブルクォーテーション(“)で囲まれた部分には文字列が入るようになっていますが、ここには何も記述すべきではありません。
具体的な解説の前に次の図を見てください。
index.html │ ├─ php │ └── Script_A │ Script_B │ Script_C │ ・ │ ・ │ ・ ├─ image ├─ movie ├─ file └─ html └── 下層ページ_A 下層ページ_B 下層ページ_C ・ ・ ・
この例ではサーバーにおけるファイルの所在を階層に分け図にしています。
恐らくWebサイトを制作する場合にはこのようにいくつかの階層に分け、製作者がわかりやすく整理していると思います。
この図を例にすると、phpと書かれているのはフォルダでその中にScript_A、Script_Bというように各種プログラムファイルが格納されています。
image、movie、fileもそれぞれフォルダでこの中には必要に応じて何かしらの画像であったり動画であったりファイルといったものが入るようになっています。
htmlフォルダには下層ページであるHTMLファイルが全て格納されているという感じです。
もしフォームを下層ページ_Aに設置してその中で「action=”../php/Script_A”」と記述したなら、HTMLソースを見た瞬間にプログラムの集合フォルダが大体予想出来てしまいます。
これでは悪意を持った第三者にセキュリティホールを教えているようなものです。
普通、家のどこにお金をしまっているかを泥棒に教えるようなことはしません。
結果として、この二つはフォームを扱う上で絶対にやってはいけない行為だといえます。
短期集中でWebエンジニアになるならこちら
actionの指定は””にする
ではactionはどのように扱うべきでしょうか？
先ほどactionの中身は空にすると説明しましたが、今からこれについて解説していきます。
HTML5以前はactionには必ず指定をしなければならなかったため今からする説明とは別の方法がとられていましたが、HTML5になってからはactionを特に指定する必要はなくなりました。
actionを無指定にするとSubmitで送信される情報は自己ファイル(フォームを設置したファイル)に投げられます。
これを利用してPHPで各種セキュリティ処理を施した後、整形した情報をPHPプログラムでサーバーに送信するようにするというのがベストアンサーだといえます。
次のコードを見てください。
<!doctype html>
<?php
if($_SERVER['REQUEST_METHOD']) {
フォームから"POST"で送信された情報に加える処理を記述
}
?>
<html>
<body>
<form action="" method="post">
<div>
<label for="name">名前</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="mail">Eメール</label>
<input type="email" id="mail" name="mail">
</div>
<div>
<label for="message">本文</label>
<textarea id="message" name="message"></textarea>
</div>
<input type="submit" value="送信する">
</form>
</body>
</html>
このコードはフォームの記述があるHTMLファイル(PHP言語を使うため、拡張子は通常「.php」となります)ですが、doctypeの次の行に「<?php」と「?>」で囲まれた部分があります。
この記事ではPHP言語の解説記事ではないため詳しい説明は省略しますが、これはPHP言語を扱うのに必要な記号です。
この記号はHTMLの「<!– コメントアウト –>」と似ていますが、コメントアウトと違いHTMLソースを確認しても表示されることはありません。
フォーム情報を送信させる必要がある場合には通常、自己ファイルへPOST送信し、この「<?php ?>」部分の中でキャッチした情報を処理するというのが一般的な流れとなっています。
このような理由から、actionは無指定として扱うべきだといえます。
HTMLを学んでWebエンジニアを目指そう
Webエンジニアは、Webブラウザで利用できるサービスを作るエンジニアです。
Webブラウザとは、スマホやパソコンなどのwebブラウザから利用できるwebサービスやアプリなどのことをいいます。
HTMLとCSSを取得することで、Webエンジニアやフロントエンジニアへの就職や転職が可能です。
このブログを運営するプログラミングスクールのポテパンキャンプでは、実践的なカリキュラムと現役エンジニアからのレビュー、そしてポートフォリオ添削や模擬面談などの面談転職サポートにより、最短距離でWebエンジニアを目指すことができます。
Webエンジニアへの転職を考えている方は、是非一度無料カウンセリングへお申込みください。
まとめ
今回はHTMLフォームの”action”の仕組みと使用時の注意点、使い方について解説してみました。
HTMLコーディングを主としている方にとってはPHPは未知の領域かもしれませんが、HTMLフォームを理解することでHTML構築時に何らかの助けになると思います。
現場ではコーダー、プログラマーといった別業種がチームを組み複数人で協力して一つのWebサイトを手掛けるため、まず最低限の流れと仕組みだけでも理解しておく必要があります。
この記事を読んでこの流れだけでも理解していただけたら嬉しく思います。
また当メディアを運営しているポテパンではHTMLにおける解説動画も公開しております。
わかりやすく解説しておりますので是非ご覧ください！
URIとは、URL(Uniform Resource Locator)とURN(Uniform Resource Name)の総称を指します。
この二つを簡単に言い換える以下のように例えられます。
・URL＝Web上に存在する住所
・URN＝Web上で対象を特定するための固有ナンバーのようなもの