◆20200908 【PHP超重要項目】 ＰＨＰ 入力フォームの基本構造 送信側・受信側
授業内容
要約
送信側の記述方法
〇入力パーツを記述する際の基本の形
HTMLファイル
<form action="#" method="get">
↑actionは入力情報の送り先 （phpファイルへのurl）を指定
↑methodは"get"か"post"を指定
</form>
↑最後に閉じるのを忘れずに。
これらの記述がないといくら入力パーツがあっても受信側のファイルに情報が送られない。
〇fieldsetとlegend
入力フォーム画面においてfieldsetで囲った部分に枠を設ける。
legendは枠の上部に名前を付けることができる
<form action="#" method="get">
<fieldset>
<legend>グループ名</legend>
ここにグループ内のフォームパーツを作成
</fieldset>
↑fieldsetとlegendは組み合わせて使う
</form>
〇入力パーツ <input type=" 「パーツの種類」 " name="「受信側にとばすID名」 " >
①<input type="text" name="受信側にとばすID名" *placeholder="例）プレースホルダー">
1行のテキストボックスを作る
placeholderは薄い字でボックスに字を写す
記述例を表す際に使用する
②<input type="password" name="受信側にとばすID名">
入力した字を伏せて表示させるテキストボックス
③<input type="url" name="url">
urlが未入力だとエラー通告してくれる
④<input type="email" name="email">
未入力&＠が抜けているとエラー通告
⑤ <input type="text" name="test03" maxlength="5">
6文字以上入力されると自動的にそれ以降の字はカットされる簡易設定。
〇選択系パーツ
<input type="「パーツの種類」 " name="「受信側に飛ばすID」" value="受信側で表示する値 ">
①<input type="radio" name="受信側に飛ばすID" value="受信側で表示する値 ">
ラジオボタンをつくる
記述の仕方
<dl>
<dt>type="radio"</dt>
<dd>
<label><input type="radio" name="group1" value="0"> 項目１</label>
<label><input type="radio" name="group1" value="1"> 項目２</label>
<label><input type="radio" name="group1" value="2"> 項目３</label>
</dd>
</dl>
※<label>→ラジオボタンは小さいしクリックしづらいため、ボタンに付く文字までクリック範囲を広げることが出来るタグ
②<input type="checkbox" name="受信側に飛ばすID[ ]" value="受信側に表示する値">
チェックボックスをつくる
nameのID名の端に[ ]をつけると受信側に表示する値を管理する配列が生成される。
→チェックボックスに複数選択され、受信側でそれらを表示させたい時に使用する。
例
<form action="#" method="get">
<dl>
<dt>type="checkbox"</dt>
<dd>
<label><input type="checkbox" name="group4[ ]" value="0"> G4項目１</label>
<label><input type="checkbox" name="group4[ ]" value="1"> G4項目２</label>
<label><input type="checkbox" name="group4[ ]" value="2"> G4項目３</label>
</dd>
</dl>
</form>
→配列
$group4=[0,1,2,];ができる
○ボタン系パーツ
①<input type="submit" value="送信">
「送信」ボタンをつくる
②<input type="reset" value="リセット">
リセットをするボタンをつくる
○textarea属性
①<textarea name="textarea1" cols="30" rows="10"></textarea>
記述すべき属性：name属性（値の名前）, rows属性（行数）, cols属性（列数・幅）
この場合１０行３０列のテキストエリアができる。
○セレクトボックスパーツ
<select name="selectbox" required>
<option value="">選択してください</option>
<option value="1" slected>選択項目１</option>
<option value="2">選択項目２</option>
<option value="3">選択項目３</option>
</select>
記述すべき属性：name属性（値の名前）
optionタグ：選択項目
記述すべき属性：value属性（送信する値）
任意属性：selected属性（初期選択項目）
未選択を表す項目のvalue属性値は" "（空文字）であらわす
value="" に0を入れてしまうとrequiredがちゃんと発動してくれなくなる
※任意属性
required→未入力だと簡易的な警告文を出してくれる
selected→初っ端からその項目を選んでくれている状態になる
○クエリ文字を付与して値を送信する方法
HTML上にあるチェックボックスやセレクトボックスの情報を記入しなくてもワンクリックで情報を受信側ファイルに飛ばすことが出来る。
例）
受信側のURL
情報
1、男 2、女 のラジオボタンがあり
1、10代 2、20代 3、30代のラジオボタンがある場合
→ワンクリックで男性30代の情報が飛ぶ
↑↑
GETはURLの後ろに？から始まる
クエリ文字を付与して値を送信
■使用例1
URLに値があるので値ごとに誰かとURLを共有したい場合に使用する
主に検索サイトの結果を共有するときなど
■使用例2
リンクをクリックするだけで情報を送りたい場合
受信側の記述方法
基本的に$_GETを使用して送信側でえた情報を各タグごとに受信する。
使用例）
<h1>GET形式で送信された値を取得</h1>
<?php
echo '<h2>１回目の出力</h2>';
echo '<pre>';
var_dump($_GET);
echo '</pre>';
↑ var_dumpは配列等の確認使えるので必須
echo '<h2>２回目の出力</h2>';
echo $_GET['gender'];
※このgenderは送信側のnameに記載されたID名
おそらくラジオボタンのタグを使用している例だと男性を選ぶと「1」、女性を選ぶと「2」の情報が受信側に飛んでくる
$genderList = [
1 => '男性',
2 => '女性',
];
$genderNum = $_GET['gender'];
echo $genderList[$genderNum];
↑これで受信した$genderNumを $genderListに代入させて男性か女性かを表示させることができる。
以下板書
〇フォームの基本構造
ユーザの入力情報を送信するための入力パーツはform要素の中に記述する。
テキスト13章 値の送受信
formフォルダ 00_form.htmlより
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フォームタグ</title>
</head>
<body>
<form action="#" method="get">
<p>formタグがフォームパーツの大枠を担当するタグ</p>
<p>ここにフォームパーツを作成</p>
<p>method属性（省略可）：送信方法<br>
get（初期値）:urlに値を付けて送信する方法<br>
post:見えない場所に値を置いて送信
</p>
</form>
</body>
</html>
〇fieldsetとlegend
01_fieldset.htmlより
<fieldset>
<legend>グループ名</legend>
ここにグループ内のフォームパーツを作成
</fieldset>
↑fieldsetとlegendは組み合わせて使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フォームタグ</title>
</head>
<body>
<form action="#" method="get">
<fieldset>
<legend>グループ名</legend>
ここにグループ内のフォームパーツを作成
</fieldset>
<fieldset>
<legend>グループ名</legend>
ここにグループ内のフォームパーツを作成
</fieldset>
formタグ内であれば、fieldset外であってもフォームパーツを作成可能
</form>
</body>
</html>
〇fieldsetとlegend
〇inputタグ 入力系パーツ
02_text.htmlより
この形が基本になる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inputタグ：入力系パーツ</title>
</head>
<body>
<h1>inputタグ：入力系パーツ</h1>
<p>記述すべき属性：name属性（値の名前）</p>
<form action="#" method="get">
<fieldset>
<legend>基本</legend>
<dl>
<dt>type="text"</dt>
<dd><input type="text" name="text"></dd>
<dt>type="password"</dt>
<dd><input type="password" name="password"></dd>
</dl>
</fieldset>
<fieldset>
<dl>
<dt>type="search"</dt>
<dd><input type="search" name="search"></dd>
<dt>type="tel"</dt>
<dd><input type="tel" name="tel"></dd>
<dt>type="url"</dt>
<dd><input type="url" name="url"></dd>
<!-- アドレスを入れてあげないと送信時にエラー通告 -->
<dt>type="email"</dt>
<dd><input type="email" name="email"></dd>
<!-- ＠を入れないと送信時にエラー通告 -->
<dt>type="number"</dt>
<dd><input type="number" name="number"></dd>
</dl>
</fieldset>
-------------------------------------------
<fieldset>
<legend>練習</legend>
<input type="text" name="test01">
<p>フォームパーツは基本的にすべてネーム属性をつける
name属性値が値送信時の名前になる<br>
name属性をつけないパーツはボタンぐらい</p>
<input type="password" name="test02">
</fieldset>
<fieldset>
<h2>placeholderのよくない使い方</h2>
<p>placeholder属性にパーツの名前をいれてしまうのはNG</p>
<input type="text" name="ng01" placeholder="名前">
<!-- ユーザにとってみづらいから -->
<h2>placeholderのよい使い方</h2>
<input type="text" name="ok01" placeholder="例）ゆーほ">
<!-- ユーザにとってやすい -->
<h2>よく使う属性</h2>
<p>require属性</p>
<input type="text" name="test03" required>
<!-- 未入力だと通知する -->
<p>maxlength属性</p>
<input type="text" name="test03" maxlength="5">
<!-- 設定した文字数以上入力すると自動的に切られる -->
<!-- 簡易的な属性。悪意がある奴は検証ツールでmaxlength属性を外して送信するので注意 -->
</fieldset>
-------ここまで板書------------------
</form>
</body>
</html>
〇inputタグ 選択系パーツ
03_choice.htmlより
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inputタグ：選択系パーツ</title>
</head>
<body>
<h1>inputタグ：選択系パーツ</h1>
<p>任意属性：checked属性（初期選択項目）</p>
<form action="#" method="get">
<fieldset>
<dl>
<dt>type="radio"</dt>
<dd>
</dd>
<dd>
</dd>
<dd>
<label><input type="radio" name="group3" value="0" checked="checked"> G3項目１</label>
</dd>
</dl>
</fieldset>
<fieldset>
<dl>
<dt>type="checkbox"</dt>
<dd>
</dd>
<dd>
</dd>
<dd>
<label><input type="checkbox" name="group6" value="0" checked="checked"> G6項目１</label>
<label><input type="checkbox" name="group6" value="2"> G6項目３</label>
</dd>
</dl>
</fieldset>
<legend>練習</legend>
<p>問題1：好きなグループから1人選択するパーツを作成せよ</p>
<!-- <label>を用いると選択肢の文字をクリックしたときにチェックがつくようになる！ -->
<!-- <label>なしだとクリック有効範囲が狭く、使いづらい -->
<dl>
<dt>"好きなグループから1人選択するパーツを作成せよ"</dt>
<dd>
</dd>
</dl>
<p>問題2：好きなグループから複数人選択するパーツを作成せよ</p>
<dl>
<dt>"好きなグループから複数人選択するパーツを作成せよ"</dt>
<dd>
</dd>
</dl>
</fieldset>
</form>
</body>
</html>
〇ボタン系パーツ・隠しパーツ
05_button.htmlより
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ボタン系パーツ・隠しパーツ</title>
</head>
<body>
<h1>inputタグ：ボタン系パーツ・隠しパーツ</h1>
<!-- <p>記述すべき属性：value属性（ボタン内の文字）</p> -->
<form action="#" method="get">
<fieldset>
<legend>入力パーツ</legend>
</fieldset>
<fieldset>
<legend>ボタン系パーツ</legend>
<dl>
<dt>type="submit"</dt>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フォームタグ</title>
</head>
<body>
<dt>type="reset"</dt>
<dt>type="button"</dt>
</dl>
</fieldset>
</form>
</body>
</html>
〇textarea属性
07_textarea.htmlより
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フォームタグ</title>
</head>
<body>
<h1>テキストエリア</h1>
<h2>textareaタグ：複数行入力ボックス</h2>
<!-- <p>記述すべき属性：name属性（値の名前）, rows属性（行数）, cols属性（列数・幅）</p> -->
<form action="#" method="get">
<div>
<textarea name="textarea1" cols="30" rows="10"></textarea>
</div>
<div>
<textarea name="textarea2" cols="30" rows="10">初期値</textarea>
</div>
</form>
</body>
</html>
〇セレクトボックス属性
08_select.htmlより
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フォームタグ</title>
</head>
<body>
<h1>セレクトボックス</h1>
<h2>selectタグ：セレクトボックス枠</h2>
<p>記述すべき属性：name属性（値の名前）</p>
<h2>optionタグ：選択項目</h2>
<p>任意属性：selected属性（初期選択項目）</p>
<form action="#" method="get">
セレクトボックス1：
<!-- <p>未選択を表す項目のvalue属性値は" "（空文字）であらわす</p>
<p>value="" に0を入れてしまうとrequiredがちゃんと発動してくれなくなる</p> -->
<select name="selectbox" required>
</select>
セレクトボックス2：
<select name="selectbox">
<!-- selected="selected"をつけた箇所は初っ端から選択された状態になる -->
</select>
</form>
</body>
</html>
〇$_GET['〇〇']
HTMLで記述された文字や数字を取得する
01-1_get_form.htmlと
01-2_get_confirm.phpの2つのファイルを使用する
01-1_get_form.htmlより
---------------------------※HTMLファイル------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GET形式で値を送信</title>
</head>
<body>
<h1>GET形式で値を送信</h1>
<h2>性別は？</h2>
<h2>年齢は？</h2>
<select name="age">
</select>
<h2>名前を記述しろ</h2>
<input type="text" name="nAme" placeholder="例）ゆーほ">
<p>
</p>
</form>
<p>
男性30代
<!-- ↑↑
GETはURLの後ろに？から始まる
クエリ文字を付与して値を送信
■使用例1
URLに値があるので値ごとに誰かとURLを共有したい場合に使用する
主に検索サイトの結果を共有するときなど
■使用例2
リンクをクリックするだけで情報を送りたい場合
-->
</a>
</p>
<!-- 問題：「女性」「40代」「田中」をリンクで送信 -->
<p>
「女性」「40代」「田中」
</a>
</p>
</body>
</html>
---------------------------※PHPファイル------------------------
01-2_get_confirm.phpより
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GET形式で送信された値を取得</title>
</head>
<body>
<h1>GET形式で送信された値を取得</h1>
<?php
echo '<h2>１回目の出力</h2>';
echo '<pre>';
var_dump($_GET);
echo '</pre>';
echo '<h2>２回目の出力</h2>';
echo $_GET['gender'];
$genderList = [
1 => '男性',
2 => '女性',
];
$genderNum = $_GET['gender'];
echo $genderList[$genderNum];
echo '<h2>３回目の出力</h2>';
if (isset($_GET['gender'])) {
// 条件：issetを使って$_GET['gender']が定義されているか確認
// 定義されているときの戻り値：true
// 定義されていないときの戻り値：false
echo $_GET['gender'];
// 定義されているときの処理
} else {
echo '性別を選択していません';
// 定義されていないときの処理
}
// 問題1
// 受け取った年齢を表示する事
// 選択をしていないときは「選択していない」を表示させる
// 選択しているときは「10代」～「50代以上」を表示
echo '<h2>問題1の出力</h2>';
// echo '<pre>';
// var_dump($_GET);
// echo '</pre>';
// echo $_GET['age'];
$ageList = [
1 => '10代',
2 => '20代',
3 => '30代',
4 => '40代',
5 => '50代以上',
];
$ageNum = $_GET['age'];
// echo $ageList[$ageNum];
// echo '<h2>問題2 選択しているときとしていないときの表示</h2>';
// 定義されているときの戻り値：true
// 定義されていないときの戻り値：false
echo $ageList[$ageNum];
// 定義されているときの処理
} else {
echo '年齢選択しろ!!';
// 定義されていないときの処理
};
// 問題2
// 名前入力欄を作成して未入力は「未入力だ」
// 入力時はユーザ入力値を表示
// 送信側HTMLにも修正を入れること。
echo '<h2>問題2の出力</h2>';
echo $_GET['nAme'];
} else {
echo '名前を書きなさい!!';
};
?>
<p>
<a href="01-1_get_form.html">フォームに戻る</a>
</p>
</body>
</html>
