入力された値を取得（２）
文字入力以外のフォーム要素
《input.php》
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>入力フォームあれこれ</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>入力フォームあれこれ</h1> <form name="input_form" action="output.php" method="post"> <table> <tr> <th>氏名</th> <td><input type="text" name="name" size="40" maxlength="20"></td> </tr> <tr> <th>好きな色</th> <td> <select name="color"> <option value="">以下の中から選択してください</option> <option value="赤">赤</option> <option value="青">青</option> <option value="黄色">黄色</option> </select> </td> </tr> <tr> <th>性別</th> <td> <input type="radio" name="gender" value="男性">男性<br> <input type="radio" name="gender" value="女性">女性 </td> </tr> <tr> <th>趣味</th> <td> <input type="checkbox" name="hobbies[]" value="ゴルフ">ゴルフ<br> <input type="checkbox" name="hobbies[]" value="読書">読書<br> <input type="checkbox" name="hobbies[]" value="旅行">旅行<br> </td> </tr> <tr> <th>自己紹介</th> <td> <textarea name="question" rows="3" cols="40"></textarea> </td> </tr> </table> <input type="submit" value="送信" class="btn"> </form> </div> </body> </html>
《style.css》
@charset "UTF-8"; body{ background-color:#F9F9F9; font-size: 16px; color:#333; padding:30px 0 0 30px; } h1{ font-size: 130%; margin:0 0 15px; padding: 2px 0 2px 3px; border-left:#008000 5px solid; } table { border-collapse: collapse; border-spacing: 0; border:#93C400 1px solid; width: 420px; } th,td{ padding: 5px 10px; border: #93C400 1px solid; } th{ background:#E9F3CC; font-weight:normal; } td{ background-color: #F8FBEC; } input.btn{ text-align:center; font-size:90%; width:50px; margin:10px auto 0; } .btn { color: #333; border: 1px solid #AAA; cursor: pointer; background: #EEE; padding:3px 12px; } .btn:hover { color: #666; background: #FFF; }
《output.php》
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>入力フォームあれこれ</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>入力フォームあれこれ</h1> <p>ご協力ありがとうございました。</p> <table> <tr> <th>氏名</th> <td><?php print htmlspecialchars( $_POST[ 'name' ], ENT_QUOTES ); ?></td> </tr> <tr> <th>好きな色</th> <td><?php print htmlspecialchars( $_POST[ 'color' ], ENT_QUOTES ); ?></td> </tr> <tr> <th>性別</th> <td><?php print htmlspecialchars( $_POST[ 'gender' ], ENT_QUOTES ); ?></td> </tr> <tr> <th>趣味</th> <td><?php print htmlspecialchars( implode( '、', $_POST[ 'hobbies' ] ), ENT_QUOTES ); ?></td> </tr> <tr> <th>自己紹介</th> <td><?php print nl2br( htmlspecialchars( $_POST[ 'question' ], ENT_QUOTES ) ); ?></td> </tr> </table> </body> </html>
授業
《input.php》
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>お問い合わせフォームとアンケートフォーム</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="content"> <h1>フォーム部品色々</h1> <table> <form action="output.php" method="post"> <tr> <th>名前</th><td><input type="text" name="name" size="30" maxlength="15" autofocus placeholder="お名前" required></td> </tr> <tr> <th>メールアドレス</th><td><input type="email" name="email" size="49" placeholder="メールアドレス" required></td> </tr> <tr> <th>性別</th><td><label><input type="radio" name="gender" value="男性" checked>男性</label><br><label><input type="radio" name="gender" value="女性">女性</label></td></tr> <tr><th>好きな色</th><td><select name="color"> <option value="">以下の中から選択してください</option> <option value="白">白</option> <option value="黒">黒</option> <option value="赤">赤</option> <option value="青">青</option> <option value="黄">黄</option> <option value="緑">緑</option> <option value="その他">その他</option> </select></td> </tr> <tr> <th>趣味</th><td> <label><input type="checkbox" name="hobbies[]" value="スポーツ">スポーツ</label><br> <label><input type="checkbox" name="hobbies[]" value="映画">映画</label><br> <label><input type="checkbox" name="hobbies[]" value="音楽">音楽</label><br> <label><input type="checkbox" name="hobbies[]" value="読書">読書</label><br> <label><input type="checkbox" name="hobbies[]" value="ショッピング">ショッピング</label><br> <label><input type="checkbox" name="hobbies[]" value="旅行">旅行</label></td> </tr> <tr> <th>自己紹介</th><td><textarea name="intro" cols="25" rows="4" required></textarea></td> </tr> </table> <input type="submit" value="送信" name="submit"> </form> </div> </body> </html>
《style.css》
@charset "UTF-8"; #content { width: 500px; margin: 0 auto; } table { width: 500px; border: 1px solid #333; border-collapse: collapse; } th, td { border: 1px solid #333; padding: 10px; } th { width: 115px; text-align: left; }
《output.php》
<?php $name = htmlspecialchars( $_POST[ 'name' ], ENT_QUOTES ); $email = htmlspecialchars( $_POST[ 'email' ], ENT_QUOTES ); $gender = htmlspecialchars( $_POST[ 'gender' ], ENT_QUOTES ); $color = htmlspecialchars( $_POST[ 'color' ], ENT_QUOTES ); $hobbies = htmlspecialchars( implode( '、', $_POST[ 'hobbies' ] ), ENT_QUOTES ); $intro = nl2br( htmlspecialchars( $_POST[ 'intro' ], ENT_QUOTES ) ); ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>入力された値を表示</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="content"> <h1>入力された値を表示</h1> <p>ご協力ありがとうございました。</p> <table> <tr> <th>氏名</th> <td><?php print $name; ?></td> </tr> <tr> <th>メールアドレス</th> <td><?php print $email; ?></td> </tr> <tr> <th>性別</th> <td><?php print $gender; ?></td> </tr> <tr> <th>好きな色</th> <td><?php print $color; ?></td> </tr> <tr> <th>趣味</th> <td><?php print $hobbies; ?></td> </tr> <tr> <th>自己紹介</th> <td><?php print $intro; ?></td> </tr> </table> </div> </body> </html>
