2015年05月08日

PHP にデータを渡す為の HTML としての FORM

この記事の前提となる内容『ページで機能分解。最初は POST メソッドで、FORM から他のページを呼び出すべし』

FORM の記述は WEB アプリケーションの基礎部分では『顔』です。とても重要なので、HTML 要素は全てしっかり意味を知っておく必要があります。HTML としての属性も、最低限のものは完璧にする必要があります。さらには、HTML5 で増えたとても便利な多くの要素は、いつでも何かのドキュメントを参照できるようにしておきましょう。

<form method="POST"
	id="my_form"
	action="log_02a.php?param=init">件名 
	<input type="text"
		name="subject"
		id="subject">
	<input type="button"
		id="set_text"
		value="コンボボックスのテキストをセット">
	<br>
	<span style='vertical-align:top'>内容</span>
	<textarea name="text"
		id="text"
		style="width:400px;height:100px;"></textarea>
	<br>
	<input type="submit"
		name="send"
		value="送信">
</form>
FORM で最も重要な属性は ACTION

もちろん他も全て重要ですが、WEBアプリケーションとしての振る舞いや作り方に大きな影響を及ぼすのが ACTION 属性です。

ACTION 属性は省略できます。何も書かなければ、自分自身にデータを送る事になるので、初心者向けではありません。記述すべき内容も格段に増える上に、どこで何をしているのかがとても解り難くなります。ここでは、送り先を別の PHP にして、画面を全く別の画面に遷移するという方法を取って、処理の流れを解りやすくしています。

WEBページ上のデモ

FORM の id は jQuery の処理用です

ここではまだ実装していませんが、いずれ利用するので id を設定しています。name 属性も指定できます。指定すると、JavaScript(DOM)では参照しやすくなりますが、WEB アプリケーションを作る上においては、あまり重要度は高く無いのでこのようになっています。(記述していません)

type="button" の要素はボタンです。サーバーへは送られません

件名の行の最後にあるボタンですが、id 属性が設定されており、jQuery で使用されます。サーバとは関係無いので name 属性はありません。JavaScript 用のボタンは他の要素でも可能ですし、jQuery であれば何でも使えますが、ここでは基本となる INPUT 要素を使用しています。

サーバーへ送るには name 属性が必要です

ここでは、件名の INPUT 要素と、内容の TEXTAREA 要素と、送信ボタンの3つです。

送信ボタンは、FORM からサーバへデータを送る為に HTML だけで処理する場合には必須で重要なコントロールです。INPUT 要素の TYPE 属性を "submit" に指定する事によってその機能が使えます。JavaScript を使用すれば、他のコントロールからサーバーへ送るようにする事もできますが、その方法を使って PHP の検証をするのはあまり意味がありません。

style="" で書かれる『インラインスタイル』

WEB アプリケーションとしての完成品を考えるのならば、スタイルシートを書いてクラスを HTML 要素に記述すべきですが、目的は PHP の検証なので、作成者が情報を見やすくする為に最速で直感的に設定可能なインラインスタイルを使用しています。

要素内の属性毎の改行

これは、ブセウザの表示とは全く関係の無い、人間が読む時に少しでも理解しやすいようにする為の工夫です。必須ではありませんが、他人に説明したい場合はこうしたほうがより理解を得やすいと思います。

ただ、手作業では時間がかかりやすいので、オンライのツールでさっと作ってしまえばいいです。



タグ:PHP HTML FORM
posted by at 2015-05-08 00:11 | HTML | このブログの読者になる | 更新情報をチェックする