2024年06月13日
9.PHPのフォーム操作
ここではPHPを使ったフォーム操作に関連する項目を解説します。
■ formタグ
■ inputタグ
■ selectタグ
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イベント で検知し、入力データのエラーチェック や リセット に利用します。 チェック後サブミットさせる場合は、下記のjQueryメソッドを利用します。 |
inputタグ
inputタグの種類には下記の物があります。
メモ
下記の入力BOXに何も入れないで「送信ボタン」を挿入するとブラウザがエラーを表示します。
入力BOXに文字列を入力し「送信」ボタンを挿入するとブラウザが入力データを記憶します。
これをオートコンプリート機能と呼びます。
よって再度このフィールドにカーソルが入ると記憶されているデータが表示されます。
この機能をOFFにする場合はテキスト入力のオートコンプリートを参照して下さい。
上記のプログラムは下記の①~②のプログラムで構成されます。
①PHP部分
<?php if($_POST['action'] == 'input_text01'){ $text = $_POST['text']; $input_submit_msg = '入力データは【'.$text.'】です。'; } ?>
■上記は、送信ボタンが挿入された時だけ処理されます。
■上記は、入力データを取得して、メッセージ変数にセットしています。
②HTML部分
<form action='' method='post'> <p>データを入力してください</p> <p><input type='text' name='text' class='text' size=40 required></p> <button type='submit' name='action' value='input_text01'>送信</button> </form> <p class='msg01' style='color:red;'><?php esc_html_e($input_submit_msg); ?>
■3行目:<input type='text'>
required属性を指定しています。
よって入力無しで[送信ボタン]を挿入するとブラウザが入力エラーを表示します。
試してみて下さい。
type='text' で利用できる属性
属性 | 説明 |
name | name='name名'で指定します。
name名は任意名称です. 但し検索データとして受け渡す場合は's'を指定します fome属性がmethod='post'の場合は$_POST[’name名’]で入力値が取得できます。 上記の例では$_POST['text']でデータを取得します。 |
class | inputタグのクラス名を指定します。 |
id | inputタグのID名を指定します。 |
value | 送信する値の初期値を指定します。 |
placeholder | 入力欄に表示するコメントを指定します。
但し送られるデータはvalue値です。 例)placeholder='アカウント名を入力して下さい' |
size | ボックスの大きさをを半角の文字数で指定します。
例)size=40 もし効かない場合はstyle='width:40em;'で指定します。 |
maxlength | 入力できる最大文字数を指定する事ができます。
例)maxlength=40 |
required | ブラウザの 入力必須機能 を利用する時に指定します。
入力が無い状態でsubmitすると、ブラウザがとエラーを表示します。 |
autocomplete |
'off'を指定すると、オートコンプリート機能がOFFになります。 |
■6行目
入力されたデータを表示するエリアで、エスケープ処理をして表示しています。
エスケープ処理についてはここを参照して下さい。
メモ
アカウントとパスワードを入力して送信ボタンを挿入すると「パスワードを保存するか」をブラウザが聞いてきます。
保存を選択すると、ブラウザはサイトのURL、ユーザ名、パスワードをセットで記憶します。
パスワード保存に関するその他の情報はパスワード入力のオートコンプリートを参照して下さい。
上記のプログラムは下記の①~③のプログラムで構成されます。
①PHP部分
<?php if($_POST['action'] == 'input_pass01'){ $account = $_POST['u-id01']; $pass = $_POST['pass01']; $input_submit_msg = '【'.$account.'】と【'.$pass.'】が入力されました'; } ?>
■送信ボタンが挿入された時だけ処理されます。
■上記の例では入力データを取得して、メッセージ変数にセットしています。
②HTML部分
<form action='' method='post'> <p> アカウント: <input type='text' name='u-id01' class='u-id01' value='' size='20' autocomplete='off'></p> <p> パスワード: <input type='password' name='pass01' class='pass01' value='' size='20' autocomplete='new-password'></p> <button type='submit' name='action' value='input_pass01'>送信</button> </form> <p class='msg01' style='color:red;'><?php esc_html_e($input_submit_msg); ?></p>
■2行目:アカウント入力
autocomplete='off'を指定しているので、テキストデータ単独の保存はしません。その他のルールは、type='text' に従います。
■3行目:パスワード入力
パスワードで指定できる属性は下記になります。
属性 | 説明 |
name | fome属性がmethod='post'の場合は$_POST[name]で取得できます。
上位の例では$_POST['pass01']でデータが取得できます。 |
class | inputタグのクラス名です。 |
id | inputタグのID名です。 |
value | 送信する値の初期値を指定します。 |
placeholder | 入力欄に表示するコメントを指定します。送信データはvalue値です。
例)placeholder='アカウント名を入力して下さい' |
size | ボックスの大きさをを半角の文字数で指定します。
例)size=40 もし効かない場合はstyle='width:40em;'で指定します。 |
maxlength | 入力できる最大文字数を指定する事ができます。
例)maxlength=40 |
required | ブラウザの 入力必須機能 を利用する時に指定します。
入力が無い状態でsubmitすると、ブラウザがとエラーを表示します。 |
autocomplete | 'new-password'を指定すると、ブラウザにパスワードの保存を指定します。 |
■6行目
入力されたデータを表示するエリアで、エスケープ処理をして表示しています。
エスケープ処理についてはここを参照して下さい。
■type='hidden'(非表示のデータ)
これはブラウザに表示されないデータをサーバに送る時に利用します。
利用例はフォーム間でのデータの受け渡しの注意点を参照して下さい。
チェックボックスは複数の選択肢を選択できるものです。
何も✔しないでサブミットするとアラートメッセージを表示し、リセットボタンを挿入するとチェックボックスをリセットします。試してみて下さい。
上記のプログラムは下記の①~③のプログラムで構成されます。
①PHP部分
<?php if($_POST['action'] == 'input_check'){ $item = implode(',',$_POST['item']); // 配列を文字列に変換 $item = preg_replace('/1/','項目1',$item);// 文字を正規表現で探して置き換える $item = preg_replace('/2/','項目2',$item); $item = preg_replace('/3/','項目3',$item); $input_check_msg = '選択値は'.$item.'です。'; } ?>
■2行目:送信ボタン 'input_check'が挿入された時だけ{}を実行します。
■3行目:implode関数で配列を文字列に変換します。
■4~6行目:preg_replace関数でvalue値を選択文字に置き換えます。
■7行目:表示メッセージを作成します。
②form部分
<form action='' method='post' onsubmit='return checkbox_check()'> <input type='checkbox' name='item[]' value='1' <?php if(in_array('1',$_POST['item'],true))esc_html_e('checked');?>> 項目1 <input type='checkbox' name='item[]' value='2' <?php if(in_array('2',$_POST['item'],true))esc_html_e('checked');?>> 項目2 <input type='checkbox' name='item[]' value='3' <?php if(in_array('3',$_POST['item'],true))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値が入ります。
現在のチェック状況は in_array関数 でチェックし、'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つの選択肢しか選択できない物です。
何も選択しないでサブミットするとアラートメッセージを表示し、リセットボタンを挿入するとラジオボタンをリセットします。試してみて下さい。
上記のプログラムは下記の①~③のプログラムで構成されます。
①PHP部分
<?php if($_POST['action'] == 'input_radio'){ $item = $_POST['item']; // 入力データを取得 $item = preg_replace('/1/','項目1',$item); // 文字を正規表現で探して置き換える $item = preg_replace('/2/','項目2',$item); $item = preg_replace('/3/','項目3',$item); $input_radio_msg = '選択値は『'.$item.'』です。'; } ?>
■2行目:送信ボタン 'input_radio'が挿入された時だけ{}内を処理します。
■3行目:入力データを取得します。
■4行目~6行目でpreg_replace関数でvalue値を選択文字に置き換えます。
■7行目:表示メッセージを作成します。
②form部分
<form action='' method='post' onsubmit='return radio_check()'> <input type='radio' name='item' value='1' <?php if($_POST['item']=='1')esc_html_e('checked');?>> 項目1 <input type='radio' name='item' value='2' <?php if($_POST['item']=='2')esc_html_e('checked');?>> 項目2 <input type='radio' name='item' value='3' <?php if($_POST['item']=='3')esc_html_e('checked');?>> 項目3 <br> <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行目
選択値は'item'で受け取ります。この中に選択値が登録されます。
$_POST['item']の中にvalue値があった場合は、'checked'で✔を付けています。
■6行目が送信ボタンで、7行目がリセットボタンです
■8行目:①のPHPで処理した結果を表示する所です。
エスケープ処理についてはここを参照して下さい。
③script部分
下記には2つの関数が記述されています。
<script> function radio_check(){ var flg = $('input[name="item"]:checked').val(); if(flg == null){ window.alert('ラジオボタンをセレクトしてください'); $('.msg01').css('display','none'); return false; } } $('.radio_reset').click(function(){ $('[name=item]').val([]);// neme=itemは複数存在する為、配列でリセットする $('.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>にしています。
上記のプログラムは下記の①~③のプログラムで構成されます。
①PHP部分
submitされた時だけ処理されます。
<?php if($_POST['action'] == 'textarea'){ $textarea = esc_html($_POST['comment']); // 入力データのエスケープ処理 $textarea = preg_replace( '/[\r\n]+/' , '<br>' , $textarea); // 改行を<br>に変換 } ?>
■3行目:入力データをエスケープ処理をしてスクリプトが入力されても動かないようにしています。
■4行目: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($_POST['comment']);?></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;?></div> </form>
■2行目の<label>のforと3行目の<textarea>のidを同一名称にする事により2つの要素を関連づけています。
■3行目の<textarea>にrequiredを指定しているので、空白で送信ボタンを挿入するとブラウザがエラーメッセージを表示します。
■4行目はsubmitボタン、5行目はリセットボタンです。
■6行目:ここで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.事例
①基本的なセレクト例
何も選択しないで送信ボタンを挿入した場合はアラートメッセージが出力されます。
リセットボタンを挿入すると選択値が解除されます。試してみて下さい。
上記プログラムは下記の①~③のプログラムで構成されます
①php部分
submitされた時だけ処理されます。
<?php if($_POST['action'] == 'select'){ $item = $_POST['select_name']; $item = preg_replace('/1/','項目1',$item); // 文字を正規表現で探して置き換える $item = preg_replace('/2/','項目2',$item); $item = preg_replace('/3/','項目3',$item); $select_msg = '選択値は『'.$item.'』です。'; } ?>
■3行目で選択値を取得し、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)
②複数値のセレクト例
選択をしないで送信ボタンを挿入するとアラートメッセージを出力します。
リセットボタンを挿入すると選択値が解除されます。
PCで複数値の選択は「ctrl+クリック」で選択ができます。
このプログラムは下記の3つから構成されています。
①PHP部分
<?php if($_POST['action'] == 'select_multi'){ $item = implode(',',$_POST['select_name']); // 配列を文字列に変換 $item = preg_replace('/1/','項目1',$item); // 文字を正規表現で探して置き換える $item = preg_replace('/2/','項目2',$item); $item = preg_replace('/3/','項目3',$item); $item = preg_replace('/4/','項目4',$item); $select_msg = '選択値は『'.$item.'』です。'; } ?>
■上記はsubmitボタンが挿入された時だけ処理されます。
■3行目:セレクトデータは配列で取得されるので、これを文字列に変換します。
■4行目~7行目:preg_replace()関数でバリュー値を選択値に変換しています。
②HTML部分
<form method='post' action='' onsubmit='return select_multi()'> <label for='select'><span style='font-size:12px;'>※必須項目</span></label><br> <select id='select' name='select_name[]' size='4' multiple> <!-- nameを配列で指定します --> <option value='1' <?php if(in_array('1',$_POST['select_name'],true))esc_html_e('selected');?>>項目1</option> <option value='2' <?php if(in_array('2',$_POST['select_name'],true))esc_html_e('selected');?>>項目2</option> <option value='3' <?php if(in_array('3',$_POST['select_name'],true))esc_html_e('selected');?>>項目3</option> <option value='4' <?php if(in_array('4',$_POST['select_name'],true))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部分
下記は2つの関数から作成されています。
<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日の様にありえない生年月日が入力されるとエラーメッセージを出力します。
上記のプログラムは下記の2つのプログラムから構成されています。
①PHP部分
下記のプログラムは、2つのプログラムで構成されています。
<?php $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($_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行目:メッセージを出力する所です。
入力データのエスケープ処理
サーバ側でユーザが入力したデータを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です。
この変数はエスケープ処理済みなので echo この変数はエスケープ処理してないのでecho esc_html() と考えながらプログラムするのは面倒です。
そこでformプログラムには echo は使わないで総て esc_html_e() で書くと考えると簡単になります。
備考:
esc_html_e() の本来の機能は指定した文字列を翻訳とエスケープ処理をしてechoする機能です。
しかし、この関数は翻訳なしでも利用する事ができます。
textareaの入力データをechoする場合は、少し注意が必要です。
textareaには複数行が記述される為、改行コードが入力されます。
そこでtextareaの入力データをechoする手順は下記になります。
①入力されたデータはesc_html()でエスケープ処理をする。
②次にpreg_replace()関数で、改行をブラウザで理解できる<br>に変更する。
nl2br()という関数も使えます。これは改行コードの前に<br>を追加する関数です。
③上記のデータをechoする。
submitした位置まで自動スクロールさせる方法
action属性を指定しないformのsubmit後の飛び先は現在の文書の先頭になります。
これをform文があった場所まで自動スクロールさせる方法は下記になります。
①サイトのjQueryプログラムに追加する内容
$(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(){$(window).scrollTop(<?php esc_html_e($_POST['position']);?>);}//画面の表示位置を指定します </script>
■1~5行目
この文書が始めに読み込まれて時は何も処理しませんが、フォームがsabumitされた時の処理をここで記述します。
■8行目
formの中に非表示のname='position'フィールドを設置します。
当初はこの Value値 は空白でが、submitボタン が押された時点で①のjQueryプログラムが現在の文書の表示位置をここに書き込みます。
■12行目
自動スクロールはwindow.onload=function(){スクロール位置})で指定します。
上記の事例はサブミットされた時の位置を読み込んで、そこまでスクロールさせています。
フォーム間でのデータの受け渡しの注意点
入力画面 → 確認画面 → 処理画面(最終画面)
上記の様にformプログラムから次のformプログラムにデータを受け渡す場合、注意しないと最終画面に入力画面のデータが渡りません。
下記事例でデータが受け渡されない理由と解決方法を解説します。
1.ダメなプログラムの事例
下記を操作して下さい。
入力画面データは最終画面に渡りません。
上記のプログラムは下記の4つのPHPプログラムから構成されています。
[main.php]
<?php switch($_POST['button']): case 'final':include('final.php');break; case 'check':include('check.php');break; default:include('input.php'); endswitch; ?>
■どのボタンが挿入されたのか?を判定し実行プログラムを選択しています。
■始めはデフォルトの 'input.php' が選択されます。
[input.php]
<form action='' method='post' > <p>データ: <input type='text' name='data' value='<?php esc_html_e($_POST["data"]);?>'></p> <button type='submit' name='button' value='check'>送信</button> </form>
■2行目:この画面に戻ってきたことを想定し、value値を設定しています。
[check.php]
<form action='' method='post' > <p style='color:red;'>入力データは『<?php esc_html_e($_POST['data']);?>』で宜しいでしょうか?</p> <button type='submit' name='button' value='final'>はい</button> <button type='submit' name='button' value='input'>いいえ</button> </form>
■2行目:この画面で$_POST[xx]は取得できるが、この画面がsubmitされた段階で、$_POST[xx]のデータは消えます。(ここが問題個所です。)
[final.php]
<p style='color:red;'>入力データは『<?php esc_html_e($_POST['data1']);?>』です</p> <?php $_POST['data1'] = ''; ?>
■1行目:ここでは$_POST[xx]は消えているので、表示できません。
2.対策①(非表示フィールドを使う)
下記を操作して下さい。
前の画面や最終画面にもデータは渡ります。
[main.php]
1と同じ
[input.php]
1と同じ
[check.php]
下記プログラムの3行目で次のプログラムに渡したいデータをtype='hidden'で設定しています。
<form action='' method='post' > <p style='color:red;'>入力データは<?php esc_html_e($_POST['data']);?>で宜しいでしょうか?</p> <input type='hidden' name='data' value='<?php esc_html_e($_POST['data']);?>'> <!-- ここがポイント --> <button type='submit' name='button' value='final'>はい</button> <button type='submit' name='button value='input'>いいえ</button> </form>
[final.php]
1と同じ
3.対策②(ディスク渡しを使う)
この機能を使う場合は session_start() をONにする必要があります。
下記を操作して下さい。
前の画面や最終画面にもデータは渡ります。
上記のプログラムは下記の4つのPHPプログラムから構成されています。
[main.php]
<?php switch($_POST['button']): case 'final':include('final.php');break; case 'check':include('check.php');break; default:include('input.php'); endswitch; ?>
■どのボタンが挿入されたのか?でプログラムを選択しています。
[input.php]
<form action='' method='post' > <p>データ: <input type='text' name='data' value='<?php esc_html_e($_SESSION["data"]);?>'></p> <button type='submit' name='button' value='check'>送信</button> </form>
■2行目:この画面に戻ってきたことを想定し、value値をディスクから取得
[check.php]
<form action='' method='post' > <?php $_SESSION['data'] = $_POST['data'];?> <p style='color:red;'>入力データは『<?php esc_html_e($_SESSION['data']);?>』で宜しいですか?</p> <button type='submit' name='button' value='final'>はい</button> <button type='submit' name='button' value='input'>いいえ</button> </form>
■2行目:ここで入力データをディスクに書き込みます。
[final.php]
<p style='color:red;'>入力データは『<?php esc_html_e($_SESSION['data']);?>』です</p> <?php $_SESSION['data'] = '';?>
■1行目:ディスクから読み込んだデータを表示しています。
■2行目:ここでディスクデータをクリアしています。