2025年05月15日
10.PHPのフォーム操作
ここではPHPを使ったフォーム操作に関連する項目を解説します。
1. formタグ
① inputタグ
③ selectタグ
1.formタグ
ここではformタグの属性とサブミット方法を解説します。
1.基本フォーマット
<form action='' method='post' onsubmit='return 関数名()' enctype='xx'>
<!-- input、textarea、selectの入力項目 -->
<button type='submit' name='button' value='sample01'>送信</button>
</form>
フォームが submit された時のジャンプ先のURLを指定します。
上記の例では、action='' なので現在のプログラムの先頭にジャンプします。
先頭でなくサブミットされた画面位置まで自動スクロールさせる方法は下記を参照して下さい。
入力された情報の格納先を指定します。POST 又は GET が指定できます。
・POSTは、入力データを連想配列の $_POST[xx] にセットして送信します。
上記の xx は、formにある name 属性名 です。この中に value値 がセットされます。
上記のフォームのサブミットで取得できる値は下記だけです。
$_POST['button']の中に sample01 が入っています。
・GETは、入力データを URL の一部 として送信します。
取得は $_GET[xx] で取得します。
ここではGETの解説はしません。
送信ボタンがクリックされた時に 実行するスクリプト を指定します。
記述方法は onsubmit='return 関数名()' で記述します。
この関数の中で入力内容のエラーチェック等を行い、
・関数からそのまま戻ると sumit が実行され、
・return false; で戻ると submit をキャンセルします。
具体的な使い方はtype='checkbox' 等の事例を参照してください。
送信データのエンコード・タイプを指定します。
| タイプ | 解説 |
| application/x-www-form-urlencoded | 指定しない場合はこれになります
全ての文字をURLエンコードします |
| multipart/form-data | フォームに下記のファイル入力機能がある場合に指定します
<input type="file" name="datafile"> これを指定しないとファイルが取得できません |
| text/plain | スペースだけ「+」記号に変換します。 |
※ファイルを添付する場合に[multipart/form-data]の指定が必須になります。
フォームを submit する方法には <input>タグ と <button>タグ があります。
ここでは <button>タグ のみを解説します。
<buttonタグの種類＞
| タイプ | 解説 |
| type='submit' | formデータを submit するボタン
typeを指定しない場合はこれになります。 |
| type='reset' | form内の inputフィールド のデータを リセット するボタン
inputフィールド以外の値はリセットできないので、使い道は限定されます。 |
| type='button'' | submit しないボタン
ボタンのクリックを click(func) で検知し、入力データのエラーチェック 後、下記のjQueryメソッドでサブミットさせます。を利用します。 |
Formの中に配置するタグには①Input ②textarea ③select があります。
①inputタグ
inputタグには下記の種類があります。
・全角スペースを含む空白文字を「送信」するとエラーが表示されます。
・普通の文字を「送信」するとブラウザが入力データを記憶し、再度カーソルが入ると記憶されているデータが表示されます。
これをオートコンプリート機能と呼びます。
この機能の詳細はテキスト入力のオートコンプリートを参照して下さい。
| Warning: include_once(/sample/input_text01): Failed to open stream: No such file or directory in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 Warning: include_once(): Failed opening '/sample/input_text01' for inclusion (include_path='.:/usr/share/pear') in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 |
上記のプログラムは下記の①~②のプログラムで構成されます。
①PHP部分
下記のプログラムはPHP8対応となっています。
<?php
$input_submit_msg = "";
if(isset($_POST['action']) && $_POST['action'] == 'input_text01'){
$text = isset($_POST['input_text']) ? $_POST['input_text']:''; //入力データの取得
$Judgment = preg_match('/[^\s ]/' , $text); //空白以外の文字があるのか？の判定
if($Judgment){$input_submit_msg = '入力データは【'.$text.'】です。';
}else{$input_submit_msg = '送信されたデータは空白です。再入力して下さい。';}
}
?>
■上記は、送信ボタンが挿入された時だけ処理されます。
■上記は入力データを取得して、メッセージ変数にセットし、HTMLの中のPHPで表示します。
■PHP8.0以降では$_POST['action']を処理する場合、これが空でない時(isset)を合わせて指定しないとエラーになります。
②HTML部分
<form action='' method='post'>
<p>データを入力してください</p>
<input type='text' name='input_text' class='text' size='40' >
<button type='submit' name='action' value='input_text01'>送信</button>
</form>
<p class='msg01' style='color:red;'><?php echo esc_html($input_submit_msg); ?></p><!-- submit後の表示エリア -->
■3行目：<input type='text'>の指定
type='text' で利用できる属性
| 属性 | 説明 |
| name | name='名前'で指定します。
但し検索データとして受け渡す場合は's'を指定します fome属性がmethod='post'の場合は$_POST[’名前’]で入力値が取得できます。 上記の例では$_POST['input_text']でデータを取得します。 |
| class | inputタグのクラス名を指定します。 |
| id | inputタグのID名を指定します。 |
| value | 送信する値の初期値を指定します。 |
| placeholder | 入力欄に表示するコメントを指定します。
但し送られるデータはvalue値です。 例）placeholder='アカウント名を入力して下さい' |
| size | ボックスの大きさをを半角の文字数で指定します。
例）size='40' |
| maxlength | 入力できる最大文字数を指定する事ができます。
例）maxlength=40 |
| required | ブラウザの 入力必須機能 を利用する時に指定します。
入力が無い状態でsubmitすると、ブラウザがとエラーを表示します。 但し、半角スペースや全角スペースはエラーとして検知できません。 |
| autocomplete |
'off'を指定すると、オートコンプリート機能がOFFになります。 |
■6行目
入力されたデータを表示するエリアで、エスケープ処理をして表示しています。
エスケープ処理についてはここを参照して下さい。
・ブラウザに記憶しているIDとパスワードがある場合は、それが自動入力されます。
・空白の場合は、IDとパスワードの入力時に各種のエラーチェック後、LOGINボタンでブラウザが「パスワードを保存するか」を聞いてきます。
・保存を選択すると、ブラウザはサイトのURL、ユーザ名、パスワードをセットで記憶します。
この機能の詳細はパスワードのオートコンプリートを参照して下さい。
| Warning: include_once(/sample/autocomplete/java_id-pass): Failed to open stream: No such file or directory in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 Warning: include_once(): Failed opening '/sample/autocomplete/java_id-pass' for inclusion (include_path='.:/usr/share/pear') in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 |
上記のプログラムは下記の①~②のプログラムで構成されます。
①PHP部分
下記のプログラムはPHP8.0対応となっています。
<?php
$input_submit_msg = "";
$name = isset($_POST['username']) ? $_POST['username']:'';
$pass = isset($_POST['password']) ? $_POST['password']:'';
if($name != '' && $pass != ''){
$input_submit_msg = '【'.$name.'】と【'.$pass.'】で登録されました。';
}
?>
■送信ボタンが挿入された時だけ処理されます。
■上記の例では入力データを取得して、メッセージ変数にセットしています。
■PHP8.0では$_POST['username']を処理する場合、これが空でない時(isset)を合わせて指定しないとエラーになります。
②HTML部分
<form action='' method='post' class='form01'> <p> アカウント: <input type='text' name='username' size='20' value='' autocomplete='off' required></p> <p> パスワード: <input type='password' name='password' size='20' value='' autocomplete='current-password' required ></p> <input type='hidden' name='position' value=''> <!-- 送信ボタンが挿入されて時にjQueryでValue値を設定します--> <button type='button' class='login' >LOGIN</button> <p class='err_msg' style='color:red;'><?php echo esc_html($input_submit_msg); ?></p> </form>
■2行目：アカウント入力
autocomplete='off'を指定しているので、テキストデータ単独の保存はしません。その他のルールは、type='text' に従います。
■3行目：パスワード入力
パスワードで指定できる属性は下記になります。
| 属性 | 説明 |
| name | fome属性がmethod='post'の場合は$_POST[name]で取得できます。
上位の例では$_POST['password']でデータが取得できます。 |
| class | inputタグのクラス名です。 |
| id | inputタグのID名です。 |
| value | 送信する値の初期値を指定します。 |
| placeholder | 入力欄に表示するコメントを指定します。送信データはvalue値です。
例）placeholder='アカウント名を入力して下さい' |
| size | ボックスの大きさをを半角の文字数で指定します。
例）size=40 もし効かない場合はstyle='width:40em;'で指定します。 |
| maxlength | 入力できる最大文字数を指定する事ができます。
例）maxlength=40 |
| required | ブラウザの 入力必須機能 を利用する時に指定します。
入力が無い状態でsubmitすると、ブラウザがとエラーを表示します。 |
| autocomplete | 'new-password'は、新規パスワードで、ブラウザにパスワードの保存を要求します。
'current-password'は、カレントのパスワードを自動入力します。 |
■6行目
入力されたデータを表示するエリアで、エスケープ処理をして表示しています。
エスケープ処理についてはここを参照して下さい。
③スクリプト部分
解説はオートコンプリートを参照してください。
<script>
$(function(){
/******** マウスダウンの処理 *****************/
$('[name="password"]').mousedown(function(){
var input_uid = $('[name="username"]').val();
if(input_uid == ''){
$('.err_msg').html('アカウントが未入力です。<br>アカウントから入力してください。');
}else{$('.err_msg').html('')}
});
$('[name="username"]').mousedown(function(){
$('.err_msg').html('');
});
/******** 入力文字のチェック *****************/
$('[name="username"]').change(function(){
var input_uid = $('[name="username"]').val();
var id_check = input_uid.match(/[\s ]/u);
if(id_check != null){
$('.err_msg').html('アカウントが空白か、アカウントに空白文字が入っています。<br>リセットしますので、再入力してください。');
$('[name="username"]').val('');
$('[name="username"]').focus();
}else{$('.err_msg').html('')}
});
$('[name="password"]').change(function(){
var input_pass = $('[name="password"]').val();
var pass_check = input_pass.match(/[\s ]/u);
if(pass_check != null){
$('.err_msg').html('パスワードが空白か、パスワードに空白文字が入っています。<br>リセットしますので、再入力してください。');
$('[name="password"]').val('');
$('[name="password"]').focus();
}else{$('.err_msg').html('')}
});
/******** サブミット処理 *****************/
$('.login').click(function(){
var input_uid = $('[name="username"]').val();
var input_pass = $('[name="password"]').val();
if(input_uid != '' && input_pass != ''){
$('[name="password"]').attr('autocomplete','new-password');
$('.form01').submit();
}
});
});
/******** 画面スクロール *****************/
window.onload = function(){ //画面の表示位置を指定します
var scrollPosition = <?php echo isset($_POST['position']) ? (int)$_POST['position'] : 0; ?>;
$(window).scrollTop(scrollPosition);
};
</script>
■type='hidden'（非表示のデータ）
これはブラウザに表示されないデータをサーバに送る時に利用します。
利用例はフォーム間でのデータの受け渡しの注意点を参照して下さい。
チェックボックスは複数の選択肢を選択できるものです。
何も✔しないで送信するとアラートメッセージを表示し、リセットボタンを挿入するとチェックボックスをリセットします。試してみて下さい。
| Warning: include_once(/sample/input_check): Failed to open stream: No such file or directory in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 Warning: include_once(): Failed opening '/sample/input_check' for inclusion (include_path='.:/usr/share/pear') in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 |
上記のプログラムは下記の①~③のプログラムで構成されます。
①PHP部分
下記のプログラムはPHP8.0対応となっています。
<?php
$input_check_msg = "";
if(isset($_POST['action']) && $_POST['action'] == 'input_check'){
$item = implode(',',$_POST['item']); // 配列を文字列に変換
$item = preg_replace(['/1/', '/2/', '/3/'], ['項目1', '項目2', '項目3'], $item);
$input_check_msg = '選択値は'.$item.'です。';
}
?>
■3行目：送信ボタン 'input_check'が挿入された時だけ{}を実行します。
PHP8.0では$_POST['action']を処理する場合、これが空でない時(isset)を合わせて指定しないとエラーになります。
■4行目：implode関数で配列を文字列に変換します。
■5行目：preg_replace関数でvalue値を選択文字に置き換えます。
■8行目：表示メッセージを作成します。
②form部分
<form action='' method='post' onsubmit='return checkbox_check()'>
<input type='checkbox' name='item[]' value='1' <?php if(strpos($item,'1') != false)esc_html_e('checked');?> > 項目1
<input type='checkbox' name='item[]' value='2' <?php if(strpos($item,'2') != false)esc_html_e('checked');?> > 項目2
<input type='checkbox' name='item[]' value='3' <?php if(strpos($item,'3') != false)esc_html_e('checked');?> > 項目3
<button type='submit' name='action' value='input_check'>送信</button>
<button class='check_reset' type='button'>リセット</button>
<p class='msg01' style='color:red;'><?php esc_html_e($input_check_msg);?></p>
</form>
■1行目：sabumitされた時に、checkbox_check()でエラーをチェックします。
■2行目～4行目
チェックボックスの値は配列 'item[]' で指定するのがポイントです。この中に複数のvalue値が入ります。
現在のチェック状況はstrpos関数でチェックし、'checked'で✔を付けています。
■5行目はsubmitボタンで、6行目はリセットボタンです。
■7行目は①のPHPで処理した結果を表示する所です。
エスケープ処理についてはここを参照して下さい。
③script部分
下記には2つの関数が記述されています。
<script>
function checkbox_check(){ // 何もチェックされなかった時の処理
var count = $('[name="item[]"]:checked').length;//✔された個数を取得
if(count == 0){
window.alert('最低でも、1つはチェックをしてください');
$('.msg01').css('display','none');
return false;
}
}
$('.check_reset').click(function(){ // チェック状態をリセットするjqueryです
$('[name="item[]"]').val([]);
$('.msg01').css('display','none');
});
</script>
■送信ボタンが挿入された時 checkbox_check() 関数でエラーチェック
$('[name="item[]"]:checked').length;でチェックされた個数を取得しています。
これが0の時、アラートメッセージを出力しています。
■リセットボタンが挿入された時
$('[name="item[]"]').val([]);で、セレクタのvalue値を空の配列でリセットしています。
ラジオボタンは1つの選択肢しか選択できない物です。
何も選択しないで送信するとアラートメッセージを表示し、リセットボタンを挿入するとラジオボタンをリセットします。試してみて下さい。
| Warning: include_once(/sample/input_radio): Failed to open stream: No such file or directory in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 Warning: include_once(): Failed opening '/sample/input_radio' for inclusion (include_path='.:/usr/share/pear') in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 |
上記のプログラムは下記の①~③のプログラムで構成されます。
①PHP部分
<?php
$input_radio_msg = "";
if(isset( $_POST['action']) && $_POST['action'] == 'input_radio'){
$radio = $_POST['radio']; // 選択値を変数に代入
$radio = preg_replace(['/1/', '/2/', '/3/'], ['項目1', '項目2', '項目3'], $radio); // 文字を正規表現で探して置き換える
$input_radio_msg = '選択値は『'.$radio.'』です。';
}
?>
■3行目：送信ボタン 'input_radio'が挿入された時だけ{}内を処理します。
php8.0から$_POST['action']を処理する場合、これが空でない時(isset)を合わせて指定しないとエラーになります。
■4行目：入力データを取得します。
■5行目でpreg_replace関数でvalue値を選択文字に置き換えます。
■8行目：表示メッセージを作成します。
②form部分
<form action='' method='post' onsubmit='return radio_check()'>
<input type='radio' name='radio' value='1' <?php if($radio == '項目1')esc_html_e('checked');?> > 項目1
<input type='radio' name='radio' value='2' <?php if($radio == '項目2')esc_html_e('checked');?> > 項目2
<input type='radio' name='radio' value='3' <?php if($radio == '項目3')esc_html_e('checked');?> > 項目3
<button type='submit' name='action' value='input_radio'>送信</button>
<button class='radio_reset' type='button'>リセット</button>
<p class='msg01' style='color:red;'><?php esc_html_e($input_radio_msg);?></p>
</form>
■1行目：sabumitされた時に、radio_check()でエラーをチェックします。
■2行目～4行目
選択値は$radioで受け取ります。この中に選択値が登録されます。
この中にvalue値があった場合は、'checked'で✔を付けています。
■5行目が送信ボタンで、6行目がリセットボタンです
■7行目：①のPHPで処理した結果を表示する所です。
エスケープ処理についてはここを参照して下さい。
③script部分
下記には2つの関数が記述されています。
<script>
window.onload = function(){$(window).scrollTop(<?php esc_html_e($_POST['position']); ?>);}//画面の表示位置を指定します
function radio_check(){
var flg = $('[name=radio]:checked').val();
if(flg == null){
window.alert('ラジオボタンをセレクトしてください');
$('.msg01').css('display','none');
return false;
}
}
$('.radio_reset').click(function(){
$('[name=radio]').val([]);// neme=radioは複数存在する為、配列でリセットする
$('.msg01').css('display','none');
});
</script>
■送信ボタンが挿入された時 radio_check() でエラーチェックを行います。
チェックされた値をflgに取得します。
これがnullの時はラジオボタンが選択されてないのでアラートメッセージを出します。
■リセットボタンが挿入された時
$('[name=item]').val([]);で設定をリセットします。
上記は[name=item]が複数あるので、この場合は配列で書き込むとリセットされます。
②textareaタグ
textareaは、複数行の入力が可能な入力欄を作成するためのタグになります。
1.基本系
<textarea>xxx</textarea> 左記の xxx が入力フィールドの初期値になります。
<form method='post' action=''> <textarea name='msg' rows='3' cols='50'>入力データ</textarea> <button type='submit' name='action' value='textarea'>送信</button> </form>
■入力データはtextareaのname名の $_POST['msg'] で次のプログラムに渡されます。
2.指定できる属性値
下記の属性値が利用できます。
| 属性 | 説明 |
| row | 入力欄の高さを数値で指定します。 |
| cols | 入力欄の幅を数値で指定します。 |
| required | ブラウザの 入力必須機能 を利用する時に指定します。
入力が無い状態でsubmitすると、ブラウザがとエラーを表示します。 |
3.事例
複数行のテキストを入力後、[送信]ボタンを挿入してください。
入力データはエスケープ処理した後、改行はブラウザで処理ができる様に<br>に変更し表示します。
[リセット]ボタンを挿入すると、テキストエリアをクリアします。
| Warning: include_once(/sample/textarea): Failed to open stream: No such file or directory in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 Warning: include_once(): Failed opening '/sample/textarea' for inclusion (include_path='.:/usr/share/pear') in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 |
上記のプログラムは下記の①~③のプログラムで構成されます。
①PHP部分
submitされた時だけ処理されます。
<?php
$textarea = "";
$textarea_msg = "";
if(isset( $_POST['action']) && $_POST['action'] == 'textarea'){
$textarea = esc_html($_POST['comment']); // 入力データのエスケープ処理
$textarea_msg = preg_replace( '/[\r\n]+/' , '<br>' , $textarea); // 改行を<br>に変換
}
?>
■4行目：textareaから入力情報を取得します。
php8.0から$_POST['action']を処理する場合、これが空でない時(isset)を合わせて指定しないとエラーになります。
■5行目：入力データをエスケープ処理をしています。
これによりテキストエリアにスクリプトが入力されても動かないようにしています。
■6行目：preg_replace()を利用してテキストエリアにある改行コードをブラウザが理解できる<br>に変換しています。
②form部分
<form method='post' action=''> <label for='message'>メッセージ<span style='font-size:12px;'> ※必須項目</span></label><br> <textarea id='message' name='comment' rows=5 cols=50 required><?php esc_html_e($textarea);?></textarea><br> <button type='submit' name='action' value='textarea'>送信</button> <button type='button' class='textarea_reset'>リセット</button><br> <p>送信されたデータ：</p> <div class='msg01' style='color:red;'><?php echo $textarea_msg;?></div> </form>
■2行目の<label>のforと3行目の<textarea>のidを同一名称にする事により2つの要素を関連づけています。
■3行目の<textarea>にrequiredを指定しているので、空白で送信ボタンを挿入するとブラウザがエラーメッセージを表示します。
■4行目はsubmitボタン、5行目はリセットボタンです。
■6、7行目：ここでechoする$textareaは、入力データはエスケープ処理、改行は<br>タグが入ったデータになっています。
エスケープ処理については下記を参照して下さい。
③script部分
<script>
$('.textarea_reset').click(function(){
$('[name=comment]').val('');// 空白でテキストエリアをリセットする
$('.msg01').css('display','none');
});
</script>
■テキストエリアは空白値でリセットします。
③selectタグ
セレクトは項目一覧から項目を選択して送付するタグです。
1.基本系
<form method='post' action=''>
<select name='select_name'>
<option value='#none#'>選択してください</option>
<option value='1'>項目1</option>
<option value='2'>項目2</option>
<option value='3'>項目3</option>
</select>
<button type='submit' name='action' value='select'>送信</button>
</form>
■選択値はselectのname名 $_POST['select_name'] にvalue値がセットされて次のプログラムに渡されます。
2.指定できる属性値
下記の属性値が利用できます。
| 属性 | 説明 |
| multiple | 複数値をセレクトする場合に利用します。 |
| size | 画面に何行表示するのか？を指定します。
デフォルトは1です。multiple指定の時に利用します。 |
3.事例
①基本的なセレクト例
・何も選択しないで送信ボタンを挿入すると、アラートメッセージが出力されます。
・項目を選択して送信ボタンを挿入すると、選択値が表示されます。
・リセットボタンを挿入すると、選択値が解除されます。
| Warning: include_once(/sample/select_single_1): Failed to open stream: No such file or directory in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 Warning: include_once(): Failed opening '/sample/select_single_1' for inclusion (include_path='.:/usr/share/pear') in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 |
上記プログラムは下記の①～③のプログラムで構成されます
①php部分
submitされた時だけ処理されます。
<?php
$select_msg = "";
if(isset( $_POST['action']) && $_POST['action'] == 'select'){
$item = $_POST['select_name'];
$item = preg_replace(['/1/', '/2/', '/3/'], ['項目1', '項目2', '項目3'], $item); // 文字を正規表現で探して置き換える
$select_msg = '選択値は『'.$item.'』です。';
}
?>
■3行目：セレクト情報を取得します。
php8.0から$_POST['action']を処理する場合、これが空でない時(isset)を合わせて指定しないとエラーになります
■5～7行目：preg_replace関数でvalue値を選択文字に置き換え表示メッセージを作成します
②form部分
<form method='post' action='' onsubmit='return select_single_chick()'>
<label for='select'><span style='font-size:12px;'>※必須項目</span></label><br>
<select id='select' name='select_name'>
<option value='#none#'>選択してください</option>
<option value='1'>項目1</option>
<option value='2'>項目2</option>
<option value='3'>項目3</option>
</select>
<br><br>
<button type='submit' name='action' value='select'>送信</button>
<button class='reset' type='button'>リセット</button>
<p class='msg01' style='color:red;'><?php esc_html_e($select_msg);?></p>
</form>
■2行目の<label>のforと3行目の<select>のidを同一名称にする事により2つの要素を関連づけています。
■3行目の'select_name'に<option>のvalue値がセットされます。
■10行目が送信ボタンで11行目がリセットボタンです。
■12行目はPHPで処理した結果の表示エリアです
③script部分
下記には2つの関数が設定されています。
<script>
function select_single_chick(){
var my_select = $('[name="select_name"]').val();
if(my_select == '#none#'){
window.alert('オプションが選択されておりません');
$('.msg01').css('display','none');
return false;
}
}
$('.reset').click(function(){
$('[name="select_name"]').prop('selectedIndex', 0);
$('.msg01').css('display','none');
});
</script>
■select_single_chick()
3行目で選択値を取得し、その値が'#none#'の場合はアラートを出力しています。
■リセット
セレクトのリセットは0番目の選択する事で実現しています。
prop('selectedIndex', 0)
②複数値のセレクト例
・何も選択しないで送信ボタンを挿入すると、アラートメッセージが出力されます。
・「Ctrl＋クリック」で複数値を選択して送信ボタンを挿入すると、選択値が表示されます。
・リセットボタンを挿入すると、選択値が解除されます。
| Warning: include_once(/sample/select_multi): Failed to open stream: No such file or directory in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 Warning: include_once(): Failed opening '/sample/select_multi' for inclusion (include_path='.:/usr/share/pear') in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 |
このプログラムは下記の３つから構成されています。
①PHP部分
<?php
$select_msg = "";
if(isset( $_POST['action']) && $_POST['action'] == 'select_multi'){
$item = implode(',',$_POST['select_name']); // 配列を文字列に変換
$item = preg_replace(['/1/', '/2/', '/3/','/4/'], ['項目1', '項目2', '項目3' , '項目4'], $item);// 文字を正規表現で探して置き換える
$select_msg = '選択値は『'.$item.'』です。';
}
?>
■上記はsubmitボタンが挿入された時だけ処理されます。
php8.0から$_POST['action']を処理する場合、これが空でない時(isset)を合わせて指定しないとエラーになります
■4行目：セレクトデータは配列で取得されるので、これを文字列に変換します。
■5行目～8行目：preg_replace()関数でバリュー値を選択値に変換しています。
②HTML部分
<form method='post' action='' onsubmit='return select_multi()'>
<label for='select'>下記から選択してください（複数選択可）<span style='font-size:0.75rem;'> ※必須項目</span></label><br>
<select id='select' name='select_name[]' size='4' multiple> <!-- nameを配列で指定します -->
<option value='1' <?php if(strpos($item,'1') != false)esc_html_e('selected');?> >項目1</option>
<option value='2' <?php if(strpos($item,'2') != false)esc_html_e('selected');?> >項目2</option>
<option value='3' <?php if(strpos($item,'3') != false)esc_html_e('selected');?> >項目3</option>
<option value='4' <?php if(strpos($item,'4') != false)esc_html_e('selected');?> >項目4</option>
</select>
<br><br>
<button type='submit' name='action' value='select_multi'>送信</button>
<button class='reset_multi' type='button'>リセット</button>
<p class='msg01' style='color:red;'><?php esc_html_e($select_msg);?></p>
</form>
■3行目：selectタグのnameは配列で指定します。'select_name[]'また、multipleを指定しています。
■ボタンは送信ボタンとリセットボタンを設定しています。
■13行目は、phpで処理した結果を表示する所です。
③script部分
下記は２つの関数から作成されています。
<script>
function select_multi(){
var count = $('[name="select_name[]"]').val();
if(count == ''){
window.alert('セレクトBOX内の項目を選択して下さい。');
$('.msg01').css('display','none');
return false;
}
}
$('.reset_multi').click(function(){
$('[name="select_name[]"]').val([]);
$('.msg01').css('display','none');
});
</script>
■select_multi()関数
セレクト値が空白の場合は、アラートメッセージを出力しています。
■リセット
セレクト値を配列で置き換える事によりリセットしています。
③日付を入力する
生年月日を入力すると、生年月日と歳を出力します。
また2月31日の様にありえない生年月日が入力されるとエラーメッセージを出力します。
| Warning: include_once(/sample/select_date): Failed to open stream: No such file or directory in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 Warning: include_once(): Failed opening '/sample/select_date' for inclusion (include_path='.:/usr/share/pear') in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 |
上記のプログラムは下記の2つのプログラムから構成されています。
①PHP部分
下記のプログラムは、2つのプログラムで構成されています。
<?php
$msg01 = "";
$s_year = date('Y') - 120; //120年前
$e_year = date('Y'); //今年
function my_age($y,$m,$d){
$birthday = $y.sprintf('%02d',$m).sprintf('%02d',$d);
$today = date('Ymd');
return floor(($today - $birthday) / 10000);
}
?>
<?php
if(isset($_POST['action']) && $_POST['action'] == 'date'){
$year = $_POST['input_year'];
$month = $_POST['input_month'];
$day = $_POST['input_day'];
if(checkdate($month, $day, $year)) {
$msg01 = '生年月日は『'.$year.'年'.$month.'月'.$day.'日』で'.my_age($year,$month,$day).'歳です';
}else{
$msg01 = '生年月日『'.$year.'年'.$month.'月'.$day.'日』は存在しない年月日です。';
}
}
?>
■前半部分
この文書が読み込まれると実行される部分で下記から構成されます。
・年を何年から何年まで表示するかの初期値を設定しています。
・my_age関数は、生年月日を入力すると何歳かを計算する関数です。
sprintf()関数は、1を01の様に2桁にする関数です。
■後半部分
formのボタンが挿入された時だけ処理する部分です。
checkdate()関数は、2月31日の様にありえない月日が与えられるとfalseを返す関数です。またうるう年も見てくれます。
この関数を使ってエラーチェックを行っています。
②HTML部分
<form method='post' action=''> <p>生年月日を入力してください</p> <select name='input_year'> <?php for($i=$s_year; $i<=$e_year; $i++):?> <?php if($i == $_POST['input_year']):?> <option value='<?php echo $i;?>' selected><?php echo $i;?></option> <?php else:?> <option value='<?php echo $i;?>'><?php echo $i;?></option> <?php endif;?> <?php endfor;?> </select> 年 <select name='input_month'> <?php for ($i=1; $i<=12; $i++):?> <?php if($i == $_POST['input_month']):?> <option value='<?php echo $i;?>' selected><?php echo $i;?></option> <?php else:?> <option value='<?php echo $i;?>'><?php echo $i;?></option> <?php endif;?> <?php endfor;?> </select> 月 <select name='input_day'> <?php for ($i=1; $i<=31; $i++):?> <?php if($i == $_POST['input_day']):?> <option value='<?php echo $i;?>' selected ><?php echo $i;?></option> <?php else:?> <option value='<?php echo $i;?>'><?php echo $i;?></option> <?php endif;?> <?php endfor;?> </select> 日 <button type='submit' name='action' value='date'>送信</button> <p class='msg01' style='color:red;'><?php esc_html_e($msg01);?></p> </form>
■年、月、日のselectリストをphpプログラムで自動生成しています。
また再度読み込んだ場合はセレクト値が設定されていた場合は、selected属性を指定しています。
■34行目：メッセージを出力する所です。
2.入力データのエスケープ処理
サーバ側でユーザが入力したデータをechoする場合はエスケープ処理が必須です。
理由は下記になります。
ユーザがテキストボックスに危険なスクリプトを入力した場合、次のプログラムでそれをechoするとこのスクリプトが動いてしまいます。（大変危険です！）
これを防止するのがエスケープ（無害化）処理で PHP関数 と WordPress関数 がありますが、ここではWordPress関数を利用します。
・悪い例：<?php echo $_POST[xx];?>
・良い例：<?php echo esc_html($_POST[xx]);?>
エスケープ処理をしてからechoすると、スクリプトは文字コードとして表示されるのでスクリプトとしては動きません。
詳細はWordPressのエスケープ処理を参照してください。
尚、チェックボックス等ならスクリプトは入れられないので大丈夫と考えるのも間違いです。
プログラム等を使ってチェックボックス値を偽装する事が可能だからです。
よって、ユーザーから貰ったデータを echo する時は必ずエスケープ処理をする。と考える必要があります。
メモ
<?php echo esc_html($_POST[xx]);?>は、
<?php esc_html_e($_POST[xx]);?>でもOKです。
備考：
esc_html_e() の本来の機能は指定した文字列を翻訳とエスケープ処理をしてechoする機能です。
しかし、この関数は翻訳なしでも利用する事ができます。
textareaの入力データをechoする場合は、少し注意が必要です。
textareaには複数行が記述される為、改行コードが入力されます。
そこでtextareaの入力データをechoする手順は下記になります。
①入力されたデータはesc_html()でエスケープ処理をする。
②次にpreg_replace()関数で、改行をブラウザで理解できる<br>に変更する。
nl2br()という関数も使えます。これは改行コードの前に<br>を追加する関数です。
③上記のデータをechoする。
3.submitした位置まで自動スクロールさせる方法
action属性を指定しないformのsubmit後の飛び先は現在の文書の先頭になります。
これをform文があった場所まで自動スクロールさせる方法は下記になります。
①サイトに設定しているjQueryプログラム
サイトのJqueruが記述されているファイル(例えばmy_jquery.js)に下記を追加します。
$(function(){
$('form').submit(function(){
var position = $(window).scrollTop();
$('input:hidden[name=position]').val(position);
});
});
■上記はフォームのsubmitを検知したら現在の文書の表示位置を取得してnameがpositionのvalue値に書き込むプログラムです。
②フォームのプログラム
フォームのサンプルは下記になります。
<?php
if($_POST['action'] == 'xx'){ // ボタンのvalue値で判断します。
ボタンが押された時の処理を記述します。
}
?>
<form action='' method='post'>
<input type='text' name='data' value=''>
<input type='hidden' name='position' value=''> <!-- 送信ボタンが挿入されて時にjQueryでValue値を設定します-->
<button type='submit' name='action' value='xx'>送信</button>
</form>
<script>
window.onload = function(){
var scrollPosition = <?php echo isset($_POST['position']) ? (int)$_POST['position'] : 0; ?>;
$(window).scrollTop(scrollPosition);
};
</script>
■１～５行目
この文書が始めに読み込まれて時は何も処理しませんが、フォームがsabumitされた時の処理をここで記述します。
■8行目
formの中に非表示のname='position'フィールドを設置します。
当初はこの Value値 は空白でが、submitボタン が押された時点で①のjQueryプログラムが現在の文書の表示位置をここに書き込みます。
■12～15行目
自動スクロールはwindow.onload=function(){スクロール位置})で指定します。
上記の事例はサブミットされた時の位置を読み込んで、そこまでスクロールさせています。
4.フォーム間でのデータの受け渡しの注意点
入力画面 → 確認画面 → 処理画面（最終画面）
上記の様にformプログラムから次のformプログラムにデータを受け渡す場合、注意しないと最終画面に入力画面のデータが渡りません。
下記事例でデータが受け渡されない理由と解決方法を解説します。
1.ダメなプログラムの事例
下記を操作して下さい。
入力画面データは最終画面に渡りません。
| Warning: include_once(/sample//form/case1/main): Failed to open stream: No such file or directory in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 Warning: include_once(): Failed opening '/sample//form/case1/main' for inclusion (include_path='.:/usr/share/pear') in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 |
上記のプログラムは下記の4つのPHPプログラムから構成されています。
[main.php]
<?php
$sw = isset($_POST['submit01']) ? $_POST['submit01'] : "";
switch($sw):
case 'final':
include('final.php');
break;
case 'check':
include('check.php');
break;
default:
include('input.php');
endswitch;
?>
■[submit01]のボタンに設定されているデータを見て実行するプログラムを選択しています。
PHP7.4では$_POST['submit01'] がダイレクトに使えたのですが、PHP8系では、これが空でない条件を合わせて指定する必要がでてきました。
■始めはデフォルトの 'input.php' が選択されます。
[input.php]
<form action='' method='post' > <p>データ: <input type='text' name='data01' value=""></p> <button type='submit' name='submit01' value='check'>送信</button> </form>
■2行目：$_POST['data01']にセットされているデータを次のプログラムに受け渡します。
[check.php]
<?php $input_data = isset($_POST['data01']) ? $_POST['data01'] : "";?> <form action='' method='post' > <p style='color:red;'>入力データは『<?php esc_html_e($input_data);?>』で宜しいでしょうか？</p> <button type='submit' name='submit01' value='final'>はい</button> <button type='submit' name='submit01' value='input'>いいえ</button> </form>
■1行目：この画面で$_POST['data01']は取得できますが、この画面がsubmitされた段階で、$_POST['data01']のデータは消えます。（ここが問題の個所です。）
[final.php]
<?php $input_data = isset($_POST['data01']) ? $_POST['data01'] : "";?> <p style='color:red;'>最終画面に渡されたデータは『<?php esc_html_e($input_data);?>』です</p> <?php $_POST['data01'] = ''; ?>
■1行目：ここでは$_POST['data01']の値は消えているので、表示できません。
2.対策①（非表示フィールドを使う）
下記を操作して下さい。
前の画面や最終画面にもデータは渡ります。
| Warning: include_once(/sample//form/case2/main): Failed to open stream: No such file or directory in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 Warning: include_once(): Failed opening '/sample//form/case2/main' for inclusion (include_path='.:/usr/share/pear') in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 |
[main.php]
1と同じ
[input.php]
1と同じ
[check.php]
下記プログラムの4行目で次のプログラムに渡したいデータをtype='hidden'で設定しています。
<?php $input_data = isset($_POST['data02']) ? $_POST['data02'] : "";?> <form action='' method='post' > <p style='color:red;'>入力データは『<?php esc_html_e($input_data);?>』で宜しいでしょうか？</p> <input type='hidden' name='data02' value='<?php esc_html_e($input_data);?>'> <!-- 入力データを非表示で表示 --> <button type='submit' name='submit02' value='final'>はい</button> <button type='submit' name='submit02' value='input'>いいえ</button> </form>
[final.php]
1と同じ
3.対策②（ディスク渡しを使う）
この機能を使う場合は session_start() をONにする必要があります。
下記を操作して下さい。
前の画面や最終画面にもデータは渡ります。
| Warning: include_once(/sample//form/case3/main): Failed to open stream: No such file or directory in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 Warning: include_once(): Failed opening '/sample//form/case3/main' for inclusion (include_path='.:/usr/share/pear') in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 |
上記のプログラムは下記の4つのPHPプログラムから構成されています。
[main.php]
<?php
$sw = isset($_POST['submit03']) ? $_POST['submit03'] : "";
switch($sw):
case 'final':
include('final.php');
break;
case 'check':
include('check.php');
break;
default:
include('input.php');
endswitch;
?>
■[submit03]のボタンに設定されているデータを見て実行するプログラムを選択しています。
PHP7.4では$_POST['submit03'] がダイレクトに使えたのですが、PHP8系では、これが空でない条件を合わせて指定する必要がでてきました。
■どのボタンが挿入されたのか？でプログラムを選択しています。
[input.php]
<form action='' method='post' > <p>データ: <input type='text' name='data03' value=""></p> <button type='submit' name='submit03' value='check'>送信</button> </form>
■2行目：$_POST['data03']にセットされているデータを次のプログラムに受け渡します。
[check.php]
<?php $input_data = isset($_POST['data03']) ? $_POST['data03'] : "";?> <form action='' method='post' > <?php $_SESSION['data'] = $input_data;?> <!-- 入力データをディスクに保存 --> <p style='color:red;'>入力データは『<?php esc_html_e($input_data);?>』で宜しいですか？</p> <button type='submit' name='submit03' value='final'>はい</button> <button type='submit' name='submit03' value='input'>いいえ</button> </form>
■3行目：ここで入力データをディスクに書き込みます。
[final.php]
<p style='color:red;'>最終画面に渡されたデータは『<?php esc_html_e($_SESSION["data"]);?>』です</p> <?php $_SESSION["data"] = "";?>
■1行目：ディスクから読み込んだデータを表示しています。
■2行目：ここでディスクデータをクリアしています。