＊解答はHTMLコード、PHPコードと書かれたところをクリックすると表示されます。
- 問題 次のサンプルを確認して同様の入力フォームと入力内容を表示するページを作成しましょう。
-
入力フォームサンプル
入力フォームはHTMLで作成し、表示ページはPHPで作成しましょう。
CSSでのデザインは好みのものを作成してください。 - HTMLフォーム
-
<form name="form1" id="form1" method="post" action="sample.php"> <table cellpadding="0" cellspacing="0" summary="お問い合わせフォーム" id="formTable"> <caption> お問い合わせフォーム </caption> <tr> <th><label for="subject">お問い合わせ内容</label></th> <td><select name="subject" id="subject"> <option value="選択してください" selected="selected">選択してください</option> <option value="予約について">予約について</option> <option value="メニューについて">メニューについて</option> </select></td> </tr> <tr> <th><label for="name">お名前</label></th> <td><input type="text" name="name" id="name" value="" size="20" /></td> </tr> <tr> <th><label for="tel">電話番号</label></th> <td><input type="text" name="tel" id="tel" value="" size="20" /></td> </tr> <tr> <th><label for="email">メールアドレス</label></th> <td><input type="text" name="email" id="email" value="" size="20" /></td> </tr> <tr> <th>ご連絡方法</th> <td><input type="radio" name="contact" id="contact1" value="メール" /> <label for="contact1">メール</label> <input type="radio" name="contact" id="contact2" value="電話" /> <label for="contact2">電話</label></td> </tr> <tr> <th>当店を何でお知りになりましたか</th> <td id="checkBoxData"><p> <input type="checkbox" name="what[]" id="magazine" value="雑誌" /> <label for="magazine">雑誌</label> </p> <p> <input type="checkbox" name="what[]" id="web" value="ホームページ" /> <label for="web">ホームページ</label> </p> <p> <input type="checkbox" name="what[]" id="friend" value="友人・知人" /> <label for="friend">友人・知人</label> </p> <p> <input type="checkbox" name="what[]" id="signboard" value="看板" /> <label for="signboard">看板</label> </p> <p> <input type="checkbox" name="what[]" id="etc" value="その他" /> <label for="etc">その他</label> </p></td> </tr> <tr> <th><label for="free">自由記入欄</label></th> <td><textarea name="free" id="free" cols="25" rows="5"></textarea> <p class="notes">※ご予約の場合は、希望日時をご記入ください。</p></td> </tr> </table> <div id="formButton"> <input type="submit" name="submit" id="submit" value="送信" /> <input type="reset" name="reset" id="reset" value="リセット" /> </div> </form> - PHPコード
-
<?php $name = htmlspecialchars($_POST['name'], ENT_QUOTES); $tel = htmlspecialchars($_POST['tel'], ENT_QUOTES); $email = htmlspecialchars($_POST['email'], ENT_QUOTES); $contact = htmlspecialchars($_POST['contact'], ENT_QUOTES); $subject = htmlspecialchars($_POST['subject'], ENT_QUOTES); $free = htmlspecialchars($_POST['free'], ENT_QUOTES); echo "<br>お問い合わせ内容：".$subject. "<br>名前：".$name. "<br>電話番号：".$tel. "<br>メールアドレス：".$email. "<br>連絡方法：".$contact. "<br>当店を何でお知りになりましたか："; foreach($_POST['what'] as $what){ print(htmlspecialchars($what, ENT_QUOTES)."、"); } echo "<br>自由記入欄：".$free; ?>
解説
HTMLのポイントはinput type=”checkbox”のname属性の値を配列にするように次のようにします。name=”what[]”
form要素で指定する属性のmethod属性の値はpostとして action属性はデータ表示のためのファイルsample.phpを指定します。
フォームの部品を綺麗に配置するために今回はtableタグを使用しています。これはdl要素を使用したり、または単にp要素を使用してレイアウトすることもできます。
PHP側のポイントはhtmlspecialchars()を使用して悪意のあるタグを無効にして只表示させるようにします。第2引数のENT_QUOTESは省略せずに記述することでシングルクオートも無効にします。
自由記入欄のデータは2次元配列の状態で送信されてきます。foreach文で全てのデータを取り出すようにします。
