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

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

入力された値を送信→受信

送信するために必要なこと

  • form要素でmethod属性を記述します
  • method属性には、送信方法を記述します
  • inputされた値を別のページに送信します
  • 入力された値の器に名前をつけて送信します
  • 送信するタイミングをinput要素のtype属性「submit」で、ボタンの表示で作ります

POSTメソッドとGETメソッド

  • リクエストメソッド
  • リクエストの種類を指定するもの
  • WebブラウザとWebサーバーとのやりとりは、HTTPプロトコルでおこないます
  • WebブラウザからリクエストがWebサーバーへ送信されます
  • リクエストを受けたWebサーバーはレスポンスを返します
  • レスポンスは「レスポンスヘッダー」と「レスポンスボディ」からなります
  • Webブラウザのアドレスバーに、URIを入力してアクセスする場合は「GET」
  • フォームからデータを入力する場合は、method属性で指定したリクエストになり「POST」
  • POSTメソッドの場合は、リクエストボディに入力データが送信されます
  • GETメソッドの場合は、URIの後ろに「?[名前1]=[値1]&[名前2]=[値2]...」という形式でデータが付加されます
  • このときにURIに付加されるデータを「クエリ文字列」と呼びます
  • クエリ文字列の[名前]は、フォーム部品のname属性の値です
ポストデータ(POST)とクエリ文字列(GET)
  • ポストデータ:封筒の中に収められた手紙の本文
  • クエリ情報:宛名の脇に添えられたメモ書き


クエリ情報

  • クエリ情報とは、URLの末尾に「〜?キー名=値」で表現できるシンプルなデータのことを言います
  • データサイズには限度がある
  • 使用できない文字がある
  • データが露出する
  • ブックマークができる

受信する方法

リクエスト情報を取得する
  • リクエスト情報:クライアントからサーバーに送信される情報のこと
  • HTTP(HyperText Transfer Trotocol)の手続きに沿って通信をおこなっている


HTTPプロトコルの構成
分類 項目 概要
リクエスト情報 HTTPメソッド サーバーに対する命令、要求するパス
リクエストヘッダ リクエストに関わる情報、クライアント情報
リクエストボディ(本体) フォームで入力されたデータ
レスポンス情報 HTTPステータス サーバーでの処理結果
レスポンスヘッダ コンテンツの構成情報、サーバー情報など
レスポンスボディ(本体) コンテンツ本体

スーパーグローバル変数

名前 機能
$GLOBALS スクリプト中で利用可能なすべての変数に対してのリファレンスを取得します
$_SERVER Webサーバーや実行中のスクリプトに関する情報を取得します
$_GET HTTPプロトコルのGETメソッドによりフォームからスクリプトに送信される値を取得します
$_POST HTTPプロトコルのPOSTメソッドによりフォームからスクリプトに送信される値を取得します
$_COOKIE HTTP Cookieによりスクリプトに送信されるクッキーを取得します
$_FILES フォームのHTTP POSTファイルアップロードによりスクリプトに送信される値を取得します
$_ENV 環境変数を取得します
$_REQUEST $_GET、$_POST、$_COOKIE、$_FILESの値を取得します
$_SESSION スクリプトのセッション変数に関する情報を取得します

htmlspecialchars()
  • formで送信されたデータは、Webさーばーで処理され結果を返します
  • 値は、スーパーグローバル変数に格納され処理されます
  • 処理されるデータは、HTMLに変換して返す必要があります
  • 危険なスクリプトなどがそのまま実行されないように処理するのが、htmlspecialchars()関数です
  • 変換した文字にクォートが含まれた場合の処理を「ENT_QUOTES」で、文字化けしないような処理を「'UTF-8'」で記述しています

テキストフィールド

GET送信

《input.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォームに入力した内容を取得する</title>
</head>
<body>
<h1>GETで出力</h1>
<form action="get.php" method="get">
<dl>
<dt><label for="name">お名前  :</label></dt>
<dd><input type="text" name="name" id="name" size="20" maxlength="10" value="" required></dd>
<dt><label for="mail">メールアドレス:</label></dt>
<dd><input type="text" name="mail" id="mail" size="50"  maxlength="50" value="" required></dd>
</dl>
<input type="submit" name="submit" value="送信">
</form>
</body>
</html>


《get.php

<?php
  $name = htmlspecialchars( $_GET[ 'name' ], ENT_QUOTES, 'UTF-8' );
  $mail = htmlspecialchars( $_GET[ 'mail' ], ENT_QUOTES, 'UTF-8' );
    echo '名前は、' . $name .' です<br>';
    echo 'メールアドレスは、' . $mail . 'です<br>';

POST送信

《input.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォームに入力した内容を取得する</title>
</head>
<body>
<h1>フォームに入力した内容を取得する</h1>
<form action="output.php" method="post">
<dl>
<dt><label for="name">お名前:</label></dt>
<dd><input type="text" name="name" id="name" size="20" maxlength="10" value="" required></dd>
<dt><label for="message">お問い合わせ内容:</label></dt>
<dd><textarea name="message" id="message" cols="50" rows="4" value="" required></textarea></dd>
</dl>
<input type="submit" value="送信する">
</form>
</body>
</html>


《output.php

<?php
$name = htmlspecialchars( $_POST['name'], ENT_QUOTES, 'UTF-8' );
$message = htmlspecialchars( $_POST['message'], ENT_QUOTES, 'UTF-8' );
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>変数を使って、同じプログラムが重なるのを防ぐ</title>
</head>
<body>
<h1>変数を使って、同じプログラムが重なるのを防ぐ</h1>
<dl>
<dt> お名前</dt>
<dd><?php echo $name; ?></dd>
<dt> メッセージ</dt>
<dd><?php echo $message; ?></dd>
</dl>
</body>
</html>

ラジオボタン

《input.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ラジオボタンなどの値を取得する</title>
</head>
<body>
<h1>ラジオボタンなどの値を取得する</h1>
<form action="output.php" method="post">
<dl>
<dt>性別:</dt>
<dd>
<input id="gender_male" type="radio" name="gender" value="男性"><label for="gender_male">男性</label>
<input id="gender_female" type="radio" name="gender" value="女性"><label for="gender_female">女性</label>
</dd>
</dl>
<input type="submit" value="送信する">
</form>
</body>
</html>


《output.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ラジオボタンなどの値を取得する</title>
</head>
<body>
<h1>ラジオボタンなどの値を取得する</h1>
<p>
<?php
echo ( '性別: ' . htmlspecialchars( $_POST[ 'gender' ], ENT_QUOTES, 'UTF-8' ) );
?>
</p>
</body>
</html>
まとめ

《input.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォームに入力した内容を取得する</title>
</head>
<body>
<h1>フォームに入力した内容を取得する</h1>
<form action="output66.php" method="post">
<dl>
<dt><label for="name">お名前:</label></dt>
<dd><input type="text" name="name" id="name" size="20" maxlength="10" value="" required></dd>
<dt><label for="mail">メールアドレス:</label></dt>
<dd><input type="text" name="mail" id="mail" size="50" maxlength="50" value="" required></dd>
<dt>性別:</dt>
<dd>
<input id="gender_male" type="radio" name="gender" value="男性" checked><label for="gender_male">男性</label>
<input id="gender_female" type="radio" name="gender" value="女性"><label for="gender_female">女性</label>
</dd>
<dt><label for="message">お問い合わせ内容:</label></dt>
<dd><textarea name="message" id="message" cols="50" rows="4" value="" required></textarea></dd>
</dl>
<input type="submit" value="送信する">
</form>
</body>
</html>


《output.php

<?php
$name = htmlspecialchars( $_POST[ 'name' ], ENT_QUOTES, 'UTF-8' );
$mail = htmlspecialchars( $_POST[ 'mail' ], ENT_QUOTES, 'UTF-8' );
$gender = htmlspecialchars( $_POST[ 'gender' ], ENT_QUOTES, 'UTF-8' );
$message = htmlspecialchars( $_POST[ 'message' ], ENT_QUOTES, 'UTF-8' );
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>変数を使って、同じプログラムが重なるのを防ぐ</title>
</head>
<body>
<h1>変数を使って、同じプログラムが重なるのを防ぐ</h1>
<dl>
<dt> お名前:</dt>
<dd><?php echo $name; ?></dd>
<dt> メールアドレス:</dt>
<dd><?php echo $mail; ?></dd>
<dt> 性別:</dt>
<dd><?php echo $gender; ?></dd>
<dt> メッセージ:</dt>
<dd><?php echo $message; ?></dd>
</dl>
</body>
</html>