バナー画像

HTML Formを扱うにはまずmethod(メソッド)とaction(アクション)を理解しなければなりません。

HTMLでフォームを使うためには避けては通れない道ですので、この記事で解説していきたいと思います。

フォームにおけるaction(アクションの役割)

<form>タグにおける”action”は送信先を指定するためのものです。

HTMLでフォームを設置してもそのままでは何もできません。

submitボタンを押すという動作は言い換えると送信先に情報を送信するということになります。

“action”は直訳すると”行動”ですから、フォームにおけるactionは「送信」を指します。

メールフォームを例に挙げると、このactionに送信先のURIを指定しサブミットすることで、フォームはHTTPプロトコルを使用して該当サーバーにリクエストを送っているのです。

ポテパンダの一言メモ

URIとは、URL(Uniform Resource Locator)とURN(Uniform Resource Name)の総称を指します。

この二つを簡単に言い換える以下のように例えられます。

・URL=Web上に存在する住所

・URN=Web上で対象を特定するための固有ナンバーのようなもの

情報送信時に注意すること

先の説明で、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ソースを見た瞬間にプログラムの集合フォルダが大体予想出来てしまいます。

これでは悪意を持った第三者にセキュリティホールを教えているようなものです。

普通、家のどこにお金をしまっているかを泥棒に教えるようなことはしません。

結果として、この二つはフォームを扱う上で絶対にやってはいけない行為だといえます。

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フォームの”action”の仕組みと使用時の注意点、使い方について解説してみました。

HTMLコーディングを主としている方にとってはPHPは未知の領域かもしれませんが、HTMLフォームを理解することでHTML構築時に何らかの助けになると思います。

現場ではコーダー、プログラマーといった別業種がチームを組み複数人で協力して一つのWebサイトを手掛けるため、まず最低限の流れと仕組みだけでも理解しておく必要があります。

この記事を読んでこの流れだけでも理解していただけたら嬉しく思います。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。