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 | このブログの読者になる | 更新情報をチェックする

2014年09月20日

HTML5 の input 要素の type="file" で multiple を使う場合の記述方法と、type="submit" ボタンの FORM 属性の上書き。


<input type="file" 
	name="upload_files[]"
	multiple>
IE11 では、何かと HTML5 の対応が遅れていますが、ファイルを同時に複数選択できる multiple 属性を使用可能です。( もちろん、Google Chrome と Firefox でも使用できます )

PHP 側では、配列で取得できるように、HTML の name 属性の名前の最後に [] を付加します。

MAX_FILE_SIZE の名前を持つフィールドは、PHP の仕様にあわせたものですが、全てのファイルが対象となります。MAX_FILE_SIZE を持つフィールドは、仕様として file フィールドの前にある必要があります
<form method="post"
	target="my_frame"
	action="upload.php"
	enctype="multipart/form-data"
	accept-charset="utf-8">
	<input type="hidden"
		name="MAX_FILE_SIZE"
		value="5000">
	<input type="file"
		name="upload_files[]"
		multiple>
	<input name="send"
		type="submit"
		value="アップロード">
</form>
<iframe name="my_frame"
	frameborder="1"
	scrolling="yes"
	width="600"
	height="300" >
</iframe>


以下は、PHP のスーパーグローバルを表示した結果です
Array
(
    [upload_files] => Array
        (
            [name] => Array
                (
                    [0] => Create_Alias_AnHttpd.vbs
                    [1] => Create_Alias_AnHttpd_Folder.reg
                    [2] => forms_fileupload_130908.zip
                )

            [type] => Array
                (
                    [0] => 
                    [1] => application/octet-stream
                    [2] => application/x-zip-compressed
                )

            [tmp_name] => Array
                (
                    [0] => 
                    [1] => /var/tmp/phpS3V82b
                    [2] => /var/tmp/php1P8Zgk
                )

            [error] => Array
                (
                    [0] => 2
                    [1] => 0
                    [2] => 0
                )

            [size] => Array
                (
                    [0] => 0
                    [1] => 462
                    [2] => 4055
                )

        )

)
Array
(
    [MAX_FILE_SIZE] => 5000
    [send] => アップロード
)

ここで、一つ目のファイルはサイズ制限の為、アップロードはできていません。

以下は、PHP のコードです
<?php
header( "Content-Type: text/html; Charset=utf-8" );
?>
<pre>
<?php
foreach( $_POST as $key => $value ) {
	$_POST[$key] = @htmlspecialchars($value, ENT_NOQUOTES);
}

print_r($_FILES);
print_r($_POST);

?>
</pre>

現在 IE11 では使用できませんが、FORM 要素と INPUT 要素を関係づける input 要素の form 属性を使った記述方法はこちらから。

<input name="send"
	type="submit"
	formmethod="post"
	formenctype="multipart/form-data"
	formaction="upload.php"
	value="アップロード">
type="submit" ボタンで使用できる、FORM 要素の属性の上書きは、以下のように記述できます。これによって、ボタンによって送り先を自由に変更できる大きなメリットが加わりました。
<form id="form_unit"
	target="my_frame"
	accept-charset="utf-8">

	<input form="form_unit"
		type="range"
		name="userid">

	<br>

	<input name="send"
		type="submit"
		formaction="get.php"
		value="GET送信">

	<input name="send"
		type="submit"
		formmethod="post"
		formaction="post.php"
		value="POST送信">

	<br><br>

	<input type="hidden"
		name="MAX_FILE_SIZE"
		value="5000">
	<input type="file"
		name="upload_files[]"
		multiple>

	<input name="send"
		type="submit"
		formmethod="post"
		formenctype="multipart/form-data"
		formaction="upload.php"
		value="アップロード">

</form>

<iframe name="my_frame"
	frameborder="1"
	scrolling="yes"
	width="600"
	height="300" >
</iframe>






タグ:HTML5
posted by at 2014-09-20 00:38 | HTML | このブログの読者になる | 更新情報をチェックする

2014年09月18日

HTML5 の input 要素の type 属性に range を指定すると、スライダーになります ( Chrome と Firefox と IE11 )

HTML5 の input 要素の拡張は、IE11 ではかなり遅れているというか控えめなのですが、何故か気合が入っているのが、type=range を使ったいわゆる『スライダー』コントロールです



ある範囲を指定する為のコントロールなので、min、max、step 属性が併用できます。何も指定しなければ、min="0" max="100" step="1" を指定した事になります。

両端の値は残念ながら表示される事は無く、スライダーを動かした時の値が表示されるのは、IE11 のみで、そのままでは Chrome や Firefox でリアルタイムに値を知る事ができません。

そこで、もう一つフィールドを追加してスライダーの onmousemove イベントで値をセットしてみました。

▼ 実際の実行


<form action="http://winofsql.jp/php_get.php"
	target="my_frame"
	accept-charset="utf-8">
	<input type="range"
		name="userid"
		onmousemove='document.getElementById("userid2").value=this.value;'>
	<br>
	<input type="number"
		name="userid2"
		id="userid2">
	<input type="submit"
		name="send"
		value="送信">
</form>
<iframe name="my_frame"
	frameborder="1"
	scrolling="yes"
	width="400"
	height="100" >
</iframe>



posted by at 2014-09-18 23:54 | HTML | このブログの読者になる | 更新情報をチェックする

input 要素に対して値変更可能なコンボボックスにする HTML5 の list 属性

結論から言うと、Google Chrome と Firefox と IE11 でこの機能が使用できます。さらに、pattern 属性と併用して、入力する値にも制限を加える事ができます。

これだけで十分に有用で、WEB アプリケーションで今まで欲しかった機能( JavaScript で実装していた機能 )が誰でも input に datalist 属性の中にセットした コンボボックスで今まで利用して来た仕様と同じ option セットを関係付けるだけで利用可能になります。

Google Chtome

Google Chrome はとても優秀です。Google Chrome のみ完全にコンボボックスと同等の機能を有しており、value と text を同時表示する機能に加え、pattern で指定した文字に該当しない場合は、一覧から排除してくれます。( pattern そのものの検査 は、Firefox と IE11 でも機能しています。排除してくれるのは Chrome のみです )



これには本当に驚きで、総じて HTML5 における input 要素の拡張に関しては全てにおいて一歩先を行っています。

Firefox

Firefox のこの機能は微妙です。実装にあたって、入力の履歴と同じリソースを使って実現しているので、過去の入力値と、リストが同時に表示されるという不便な状況になっており、削除するにはキャッシュの削除と同等の手間が必要です。



IE11

IE11 は、Firefox に比べてかなりマシです。空の場合のみクリックすると、常にリストが表示されて選択可能ですが、値が入っている場合は、やはりリストが出ないので修正時の意味がありません。

ただ、Firefox に比べ、値がある場合は x のクリアコントロールが表示されるので、ひと手間楽です。




▼ 実際の実行



<datalist id="kansai1">
<option value="1">大阪</option>
<option value="2">京都</option>
<option value="3">兵庫</option>
<option value="4">滋賀</option>
<option value="5">奈良</option>
<option value="6">和歌山</option>
</datalist>
<datalist id="kansai2">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
<option value="6"></option>
</datalist>
<datalist id="kansai3">
<option value="大阪"></option>
<option value="京都"></option>
<option value="兵庫"></option>
<option value="滋賀"></option>
<option value="奈良"></option>
<option value="和歌山"></option>
</datalist>

<form action="http://winofsql.jp/php_get.php"
	target="my_frame"
	accept-charset="utf-8">
	<input type="text"
		list="kansai1"
		pattern="^[1-5]+$"
		name="userid1">
	<br>
	<input type="text"
		pattern="^[1-5]+$"
		list="kansai2"
		name="userid2">
	<br>
	<input type="text"
		list="kansai3"
		name="userid3">
	<input type="submit"
		name="send"
		value="送信">
</form>
<iframe name="my_frame"
	frameborder="1"
	scrolling="yes"
	width="400"
	height="100" >
</iframe>

関連する記事

使いどころが難しいですが、入力をコンボボックス化する jQuery プラグインの実装が不便だったので、modify しました。





posted by at 2014-09-18 16:31 | HTML | このブログの読者になる | 更新情報をチェックする

2014年09月17日

HTML5 の input 要素を number タイプにすると、min、max、step 属性で、spinner を利用できます( Chrome と Firefox。IE11 は内容の検査のみ )

jQuery UI では、spinner と呼ばれるコントロールですが、type 属性に number を指定する事によって同様のコントロールになります(Chrome と Firefox )。min 属性と max 属性をさらに指定すると、最小値(min)最大値(max)の間を( step を指定しなければ 1 づつ )増やしたり減らしたりするコントロールが、フィールドの右横に実装されます。

増減値は、step 属性で指定できるので、汎用性も高いです。

Google Chrome



フィールド右横のコントロールは、マウスカーソルを近づけるか、フォーカスが入力フィールドにある時( つまりアクティブな時 ) だけ表示されます。

ただ、最大値と最小値の値の都合で、増分 2 にした場合、奇数だけになったり、偶数だけになったりしてちょっと問題はあります。

その際、コントロールで変更しようとすると、奇数か偶数に飛びます。入力した値で送信しようとすると以下のようなエラーになります




Firefox



Google Chrome と同様で、奇数だけになったり、偶数だけになったりした上、奇数とコントロールが決めた時に、偶数値を入力すると、コントロールが動作せずに値が変わらず枠が赤くなってエラー扱いになっています。



IE11

IE11 では、値変更用のコントロールが無い事をのぞいて、属性による検査の仕様は同等です。




▼ 実際の実行
▼ 奇数扱いになっています

<form action="http://winofsql.jp/php_get.php"
	target="my_frame"
	accept-charset="utf-8">
	<input type="number"
		name="userid"
		value=""
		step="2"
		min="-1"
		max="5">
	<input type="submit"
		name="send"
		value="送信">
</form>
<iframe name="my_frame"
	frameborder="1"
	scrolling="yes"
	width="400"
	height="100" >
</iframe>



posted by at 2014-09-17 15:56 | HTML | このブログの読者になる | 更新情報をチェックする