Edited at

【PHP入門講座】 ユーザーに挨拶してみよう

More than 5 years have passed since last update.


目次に戻る


form.php の作成

いよいよ実際にフォームを作成してみます。テキストエディタで

<?php 

// Content-Typeヘッダー送信
header('Content-Type: application/xhtml+xml; charset=utf-8');
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<title>サンプルフォーム</title>
</head>
<body>
<form method="get" action="welcome.php">
お名前: <input type="text" name="my_name" value="" />
<input type="submit" value="送信" />
</form>
</body>
</html>

と入力した後、form.php としてルートディレクトリに保存してください。

そして、http://localhost/form.php にアクセスして

ss (2013-11-25 at 10.01.02).png

と表示されれば成功です。表示に失敗した場合はXHTMLの構文を誤っている可能性があります。


入力フォーム作成のポイント


開始タグと終了タグの構造が正しい必要がある

HTMLでは、例えばリスト生成において

<ul>

<li>
<li>
<li>
</ul>

のように終了タグを省略できるケースがありましたが、XHTMLでは一切の省略は認められません。

<ul>

<li></li>
<li></li>
<li></li>
</ul>


空要素タグには / が必要

HTMLでは

<br>

<hr>

のようなタグは「開始タグのみを持つもの」として書いていましたが、XHTMLでは

<br />

<hr />

とする必要があります。


meta タグよりも header 関数

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta charset="utf-8">

といった記述は見慣れている方が多いと思いますが、metaタグは本来 「ブラウザに直接Content-Typeヘッダを送れないときのための補助手段」 として存在するものであり、PHPを利用しているのであれば

<?php 

header('Content-Type: application/xhtml+xml; charset=utf-8');
?>

として直接ブラウザへの送信が可能となっているので、こちらを活用しましょう。HTMLのMIMEタイプは text/html でしたが、XHTMLでは application/xhtml+xml となります。 IE6 IE7 IE8 とかいう糞ブラウザはXHTMLに対応していません が、見捨てることにします


xmlns 属性が必須

XHTMLでは決まり文句です。

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">


form 要素直下にインライン要素を置いても良い


HTML4.01

<form method="get" action="welcome.php">

<label>お名前: <input type="text" name="my_name" value=""></label>
<label><input type="submit" value="送信"></label>
</form>


XHTML1.0とXHTML1.1

<form method="get" action="welcome.php">

<label>お名前: <input type="text" name="my_name" value="" /></label>
<label><input type="submit" value="送信" /></label>
</form>

従来は form タグの下にそのままインライン要素である input タグを置くことは禁止されていました。しかし、新しい規格では


HTML5

<form method="get" action="welcome.php">

お名前: <input type="text" name="my_name" value="">
<input type="submit" value="送信">
</form>


XHTML5

<form method="get" action="welcome.php">

お名前: <input type="text" name="my_name" value="" />
<input type="submit" value="送信" />
</form>

と書くことが認められています。もちろん従来通りの記述でも構いませんが。


welcome.php の作成

次はリクエストを受け取って処理するページを作成してみます。テキストエディタで

<?php

/**
* HTML特殊文字をエスケープする関数
*/
function h($str) {
return htmlspecialchars($str, ENT_QUOTES, 'UTF-8');
}

// Content-Typeヘッダー送信
header('Content-Type: application/xhtml+xml; charset=utf-8');

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<title>Hello!!</title>
</head>
<body>
<p>こんにちは、<?=h($_GET['my_name'])?>さん!</p>
</body>
</html>

と入力した後、welcome.php としてルートディレクトリに保存してください。

http://localhost/form.php から送信を行ってうまく動けば成功です。


リクエスト処理のポイント


フォームに入力された内容を受け取る

先ほどの例では action 属性は getname 属性は my_name として送信を行ったので、

$_GET['my_name']

というように受け取ります。 action 属性は get post の2種類があります。

GET
POST

ブラウザ上から一目で確認出来るかどうか
出来る
出来ない

(ブラウザ側が)情報をセットする場所
URLの ? より後ろの部分
ポストフィールド

(PHP側が)情報をセットする変数
$_GET
$_POST

「スーパーグローバル変数」の項で詳しく触れますが、簡単に言えばこのような違いがあります。また、通常フォーム送信においては GET よりも POST の方がよく用いられますが、敢えてここでは後で説明したい問題があるがために GET を選択しました。


必ず h 関数を通す

必ず h 関数を通しましょう。

必ず h 関数を通しましょう。

必ず h 関数を通しましょう。

大事なことなので4回言いました。