読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 | フェリカテクニカルアカデミーWebサイト制作科サポートブログ

フォーム実践(1)入力内容の保持

PHP

フォーム作成

  • 入力フィールド「お名前」「メールアドレス」「メッセージ」を作成する
  • ユーザーからの入力された値を受け取って画面を遷移する
  • inputタグで作成する1行入力用テキストフィールド
  • size属性は、必須ではありません
  • textareaタグで作成する複数行入力用テキストエリア
  • inputタグで作成する送信ボタン、type属性は「submit」を選択する


《index.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォーム実践</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>入力画面</h1>
<p>必要事項を入力して「確認する」ボタンをクリックしてください。</p>
<form action="check.php" method="post">
<table>
<tr>
<td>お名前</td><td><input type="text" name="uname" size="30"></td>
</tr>
<tr>
<td>メールアドレス</td><td><input type="text" name="email" size="30"></td>
</tr>
<tr>
<td>メッセージ</td><td><textarea rows="5" cols="30" name="message"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="sub1" value="確認する"></td>
</tr>
</table>
</form>
</body>
</html>


《style.css

@charset "UTF-8";

table {
  margin: 0;
  padding: 0;
  border: 1px solid #AAA;
  border-collapse: collapse;
}
th, td {
  padding: 6px 10px;
  border: 1px solid #AAA;
  text-align: left;
}


フォームで実現できること
  • 選択メニューや入力フィールドを作成できる
  • ボタンクリックなどをきっかけに画面移動できる
  • 選択された商品の情報などを次の画面に渡すことができる
$_POST
  • スーパーグローバル変数
  • フォーム要素のname属性に対応するインデックスを持つ配列

ボタンのクリックで画面を切り替える

  • action属性で、移動先のファイル名を指定する
  • 送信方法は、method属性で「post」を選択する
  • $_SESSIONを利用することで入力した内容を隠したまま次のページと共有する
$_SESSION
  • 実態は配列
  • Webアプリケーションでは、アプリケーションを使い始めたときから使い終わったときまでを、ひと続き(1つのセッション)だと考えます
  • そのセッションで使うデータ(セッション変数)を管理する変数という意味で「$_SESSION」という名前が付いています
  • このデータはサーバーの中に保存され、セッションが終了するまで使い続けることができます
  • 「セッションの終了」とは、ブラウザを閉じたとき、またはアプリケーションの中で「ここでセッションを終了」という処理を実行した時点です
$_SESSIONを使う
  • $_SESSIONという変数を使うには、「セッション変数の使用を開始します」と宣言する必要があります
  • session_start関数で有効化する
<?php
session_start();
  //略
$uname = $_POST[ 'uname' ];
  //略
$_SESSION[ 'uname' ] = $uname;


《check.php

<?php
// セッションの開始
session_start();

// 入力値の取得・加工
$uname = htmlspecialchars( $_POST[ 'uname' ], ENT_QUOTES, 'UTF-8' );
$email = htmlspecialchars( $_POST[ 'email' ], ENT_QUOTES, 'UTF-8');
$message = htmlspecialchars( $_POST[ 'message' ], ENT_QUOTES, 'UTF-8' );

$_SESSION[ 'uname' ] = $uname;
$_SESSION[ 'email' ] = $email;
$_SESSION[ 'message' ] = $message;
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メールフォーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>確認画面</h1>
<p>内容を確認してください。</p>
<form action="submit.php" method="post">
<table>
<tr>
<td>お名前</td><td width="300"><?php echo $uname; ?></td>
</tr>
<tr>
<td>メールアドレス</td>
<td width="300"><?php echo $email; ?></td>
</tr>
<tr>
<td>メッセージ</td>
<td width="300"><?php echo nl2br($message); ?></td>
</tr>
<tr>
<td align="right" colspan="2">
  <input type="submit" name="sub1" value="送信する">
</td>
</tr>
</table>
</form>
</body>
</html>