WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

お問い合わせフォームの利便性を上げる

1.ラジオボタンが選ばれた状態でページ遷移させる

今回のフォームはトップページでコースの選択をしてページ遷移先で他の情報を入れる、という形になるので、トップページで選択したコースの情報を申し込みページまで持っていく必要があります。
javascriptのlocation.hashプロパティを使う事でURLのハッシュを取得することができ、選んだ方のラジオボタンがcheckedになっているように出来ます。

トップページにボタンを設置この時にIDを指定する
<a href="form/input.php#item-01">商品Aはこちら</a>
<a href="form/input.php#item-02">商品Bはこちら</a>
申し込みページ「input.php
<p><input name="itemname" value="商品A" id="item-01" type="radio">商品A</p>
<p><input name="itemname" value="商品B" id="item-02" type="radio">商品B</p>
申し込みページのJavaScriptでcheckedの値を取得
window.addEventListener('load',function(){
document.querySelector(location.hash).checked=true;
});

2.htmlspecialcharsとENT_QUOTESの設定

特殊文字をブラウザで文字列として表示させるには htmlspecialchars 関数を使用します。これを使用すると、各文字列が <、>、&、" に変換されて返されます。
さらに続けて ENT_QUOTES と書くと、' (シングルクォート)も ' に変換されて返されます。

この処理は、訪問者から送信されたデータを表示する際には必ず行うようにしてください。もしこの処理を忘れると、フォームから送信する際に入力されたHTMLやJavaScriptをそのまま解釈してしまいます。もし悪意あるJavaScriptが埋め込まれると訪問者全員に影響を与えてしまうため、それを防ぐためにも htmlspecialchars で安全な文字列に変換します。

設定前の記述
$name = $_POST["name"];
htmlspecialchars 関数を指定した場合
$name = htmlspecialchars($_POST["name"], ENT_QUOTES);

3.ヒストリーバックで入力情報を保持したまま、入力画面に戻る

<input class="back-btn" type="button" value="入力画面に戻る" onclick="history.back()">

4.正規表現でエラーチェック

万が一、確認画面からアクセスしてしまった際にそのままではpostで値が送られていない為エラーになってしまうので、それを回避するために値が空だったら入力画面にリダイレクトさせる処理を行います。

isset関数

issetを使う事で変数がセットされているか確認する事が出来ます。
あたまに「!」を付ける事で逆の意味になるので、以下の記述で「$_POST['name']」に値がセットされていなかったら、という意味になります。

!(isset($_POST['name']))

値が空だったらリダイレクトさせる

//$_POST["onamae"]の値が空だったらLocationで指定しているファイルに強制移動(リダイレクト)させる
if(!(isset($_POST['onamae']))){
 header('Location:index.html');
 exit;
}