イベント参加者登録用DB
地図のPDFを登録するDB
HTMLのイメージ この辺に配置したい
htmlソースコード <!DOCTYPE html> <html id="SMP_STYLE"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title></title> <style type="text/css"> <!-- #SMP_STYLE .body { margin: 0; padding: 0; background: #F4F4F4; font-size: 13px; *font-size: small; *font: x-small; font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif; } #SMP_STYLE .body_tbl { width: 900px; margin: 0 auto; padding-bottom: 30px; border: 1px solid #999999; background: #FFFFFF; #SMP_STYLE h1 { padding: 10px 10px 10px 10px; background: #333333; color: #FFFFFF; font-size: 153.9%; font-weight:bold; text-align:center; #SMP_STYLE .header_img_smartphone {display: none;} #SMP_STYLE .header_img_tablet {display: none;} #SMP_STYLE .header_img_pc {display: block;} #SMP_STYLE .header_text { padding: 20px 70px 20px 70px; background: #F1F1F1; color: #111111; font-size: 100%; font-weight:normal; text-align:left; #SMP_STYLE .header_rmesg { padding: 30px 70px 10px 70px; #SMP_STYLE .header_emesg { width: 720px; margin: 30px auto; padding: 20px 20px 20px 20px; border: 2px solid #FF0000; color: #FF0000; #SMP_STYLE .smp_tmpl { width: 760px; padding: 20px 0 0 0; margin: 0 70px; #SMP_STYLE dl { position: relative; padding: 13px 0 0 0; border-bottom: 1px solid #DDDDDD; #SMP_STYLE dl.top { border-top: 1px solid #DDDDDD; #SMP_STYLE dt.title { display: inline-block; width: 220px; padding: 23px 15px 18px 0; color: #333333; font-size: 108%; line-height: 1.2; vertical-align: top; #SMP_STYLE dt.title .caution { display: block; color: #5F5F5F; font-size: 85%; padding: 10px 0 0 0; #SMP_STYLE dd.data { width: 520px; padding: 18px 0; font-weight: bold; text-align: left; #SMP_STYLE .input { width: 420px; margin-bottom: 8px; padding: 5px; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2) inset; #SMP_STYLE .zipcode li.code01 input { width: 30px; #SMP_STYLE .zipcode li.code02 input { width: 40px; #SMP_STYLE .phone li.num01 input { width: 50px; #SMP_STYLE .phone li.num02 input { #SMP_STYLE .phone li.num03 input { #SMP_STYLE .price input { width: 200px; #SMP_STYLE .num input { width: 60px; #SMP_STYLE .integer input { width: 90px; #SMP_STYLE .real input { width: 170px; #SMP_STYLE .pass input { width: 150px; #SMP_STYLE .epass input { width: 160px; #SMP_STYLE .time input { width: 20px; #SMP_STYLE .time .year { #SMP_STYLE ul,#smp_style li { list-style-type: none; #SMP_STYLE .zipcode ul li, #SMP_STYLE .phone ul li, #SMP_STYLE .time ul li { width: auto; float: left; margin: 0 3px 0 0; height: 35px; line-height: 35px; #SMP_STYLE .multi1 label { min-width: 135px; margin: 0 0 7px 0; padding: 0 10px; #SMP_STYLE .multi1 label input { width: 1em; height: 1em; margin: 0.4em 0 0 0; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset; border-radius: 0 0 0 0; overflow: hidden; #SMP_STYLE .multi1 label span { margin: 0 0 0 30px; font-weight: normal; #SMP_STYLE .multi1 .radio input { border-radius: 1em; #SMP_STYLE .multi2 li { display: inline; margin: 0 0 0 0; padding: 0 5px 2px 10px; clear: both; #SMP_STYLE .multi2 label input { margin: 0.2em 0 0 0; #SMP_STYLE .multi2 label span { #SMP_STYLE .multi2 .radio input { #SMP_STYLE select { width: 180px; #SMP_STYLE textarea { width: 510px; #SMP_STYLE .image input { width: 100%; #SMP_STYLE .file input { #SMP_STYLE input.clear { width: 55px; text-align: center; #SMP_STYLE input.submit { width: 270px; height: 42px; margin: 40px 0 40px 0; border: hidden; /* other browser */ background: #303030; /* for old webkit */ background: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #606060), color-stop(1.00, #303030) ); /* for modern browser */ background: linear-gradient( to bottom, #606060 0%, #303030 100% box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.4); cursor: pointer; #SMP_STYLE input.submit:hover { filter: alpha(opacity=90); -ms-filter: alpha(opacity=90); opacity: 0.9; #SMP_STYLE input.image { border: none; vertical-align: middle; #SMP_STYLE .sample { color: #555555; font-size: 93%; #SMP_STYLE .suffix { #SMP_STYLE .need { color: #CC0000; #SMP_STYLE .msg { color: #DD0000; margin-bottom: 5px; #SMP_STYLE .sub_text { font-size: 123.1%; padding: 150px 0; #SMP_STYLE .error { background: #FFE4E4; #SMP_STYLE .spiralSeal { width: 80%; background-color: #FFFFFF; border: 1px solid #CCCCCC; #SMP_STYLE .spiralSeal tr td.description { display: table-cell; overflow: auto; #SMP_STYLE .spiralSeal tr td.img { margin-left: 0px; margin-right: 0px; #SMP_STYLE .footer_text { margin: 30px 0 0 0; #SMP_STYLE .cf:before,#SMP_STYLE .cf:after {content:"";display:table;} #SMP_STYLE .cf:after {clear:both;} #SMP_STYLE .cf {*zoom:1;} @media screen and (min-width:726px) and (max-width:981px) { padding: 0 0 30px 0; #SMP_STYLE .header_img_tablet {display: block;} #SMP_STYLE .header_img_pc {display: none;} padding: 15px 70px 15px 70px; margin: 30px auto 10px; padding: 15px 15px 15px 15px; margin: 20px auto 0; display: table; width: 20%; padding: 23px 15px 28px 0; width: 70%; padding: 18px 0 18px 0; width: 50%; #SMP_STYLE .time .new_line { min-width: 126px; margin: 0 10px 7px 0; padding: 10px 10px 0 10px; border-radius: 4px 4px 4px 4px; margin: 0 0 10px 30px; background: #EEEEEE; width: 40%; @media screen and (max-width:725px) { #SMP_STYLE .header_img_smartphone {display: block;} padding: 30px 15px 10px 15px; width: 240px; margin: 10px auto 10px; width: 300px; padding-top: 20px 0 0 0; margin: 0 0 10px 0; padding: 0 0 0 0; padding: 18px 0 10px 0; min-width: 250px; margin: 0 10px 10px 0; padding: 10px; margin: 0 0 0 25px; width: 260px; margin: 20px 0 40px 0; margin-left: 60px; margin-right: 60px; --> </style> <!-- 追記css --> .privacy_box { width: 95%; height:150px; background-color:#f0f8ff; text-align:left </head> <body class="body"> <center> <div class="body_tbl"> <!-- SMP_TEMPLATE_HEADER start --> <h1>＜平成２９年度第１回ＨＵＣＩフォーラム＞参加申し込みフォーム</h1> <p class="header_text">行事名：＜平成２９年度第１回ＨＵＣＩフォーラム＞～海外派遣の危機管理（仮）～<br> 日 時：平成29年12月13日（水）14:00～16:00 （受付：13:30～）<br> 会 場：北海道大学工学部フロティア応用科学棟 ２階レクチャーホール（鈴木記念ホール） <!-- SMP_DYNAMIC_PAGE DISPLAY_ERRORS=ON NAME=SAMPLE --> <form name="f1" action="map_open.php" method="post"> <input type="submit" name="map" value="地図" /> </form> </p> <p class="header_rmesg">必要事項をご入力の上、送信ボタンを押してください。</p> <!-- SMP_TEMPLATE_HEADER end --> <!-- SMP_TEMPLATE_FORM start --> <form method="post" action="/regist/Reg2"> <div class="smp_tmpl"> <dl class="cf"> <!--- 追記 --> <div class="privacy_box"> <strong>個人情報保護方針</strong><hr> <p> 北海道大学（以下、当方）は、個人情報に関する法令及びその他の規範を遵守し、個人情報の保護、管理を徹底します。</p> <ol> <li>個人情報は、適法かつ公正な方法によって取得し、不正な方法により入手しません｡</li> <li>個人情報の紛失、破壊、改ざん及び漏えい等を防止するため、不正アクセス対策など適切な情報セキュリティ対策を講じます。</li> <li>個人情報保護に関する法令、関連するガイドラインを遵守します。特に、ご本人様からお預かりする個人情報、その他事業を通じて知り得た情報の秘密保持を徹底します。</li> <li>個人情報を取引やサービスを提供するために外部に委託する場合は、必要な契約を締結し、遵守の確認をするなど管理を徹底します。</li> <li>一人ひとりが個人情報保護の重要性を認識し、個人情報の取扱が適正に行われるように、教育を実施し維持・改善に努めます。</li> </ol> </div> <dt class="title"> 個人情報保護方針に同意します <span class="need">＊</span> </dt><dd class="data multi2"> <ul class="cf"> <li><label><input class="input" type="checkbox" name="f000968494" value="1" ><span>はい</span></label></li> </ul> <input type="hidden" value="" name="f000968494"> <span class="msg"></span> </dd> </dl> 名前 <span class="need">＊</span> </dt><dd class="data "> <input class="input " type="text" name="f000968495" value="" maxlength="64" > <br> 名前（ローマ字） <span class="need">＊</span> <input class="input " type="text" name="f000968496" value="" maxlength="64" > 職名／職位 <input class="input " type="text" name="f000968497" value="" maxlength="64" > 所属組織名 <input class="input " type="text" name="f000968498" value="" maxlength="64" > 性別 <select class="" name="f000968499"> <option value="">----- 選択してください -----</option> <option value="男性" >男性</option> <option value="女性" >女性</option> </select> メールアドレス <span class="need">＊</span> <input class="input " type="text" name="f000968500" value="" maxlength="129" ><br> （確認用）<br> <input class="input " type="text" name="f000968500:cf" value="" maxlength="129" ><br> 電話番号 <span class="need">＊</span> </dt><dd class="data phone"> <li class="num01"><input class="input " type="text" name="f000968501:a" value="" maxlength="6" > -</li> <li class="num02"><input class="input " type="text" name="f000968501:e" value="" maxlength="4" > -</li> <li class="num03"><input class="input " type="text" name="f000968501:n" value="" maxlength="5" ></li> <input type="hidden" name="detect" value="判定"> <!-- HIDDEN_PARAM START --> <input type="hidden" name="SMPFORM" value="ljtj-ojqir-5ef078343b6b00fcb0e6f2ed65442e35"> <input type="hidden" name="mode" value="0"> <!-- HIDDEN_PARAM END --> <input class="submit" type="submit" name="submit" value="送信"> <!-- SMP_TEMPLATE_FORM end --> <!-- ここから --> <table class="spiralSeal"> <tr> <td style="font-size:11px; padding:5px;" class="description"> ご登録される情報は、暗号化された通信(SSL)で保護され、 プライバシーマークやISO27001/JIS Q 27001, ISO20000-1, ISO9001の認証を取得している <a href="http://www.pi-pe.co.jp/" target="_blank" title="株式会社パイプドビッツ">株式会社パイプドビッツ</a>による<a href="https://www.pi-pe.co.jp/security/customer_db.html" target="_blank" title="データベース管理のためのASPサービス「スパイラル」">情報管理システム「スパイラル」</a>で安全に管理されます。 </td> <td style="padding:5px;" class="img"> <script type="text/javascript" src="https://reg18.smp.ne.jp/spiral/servlet/seal.Seal?_act=GetJS&sid=7BhpBeljtj&type=send&size=m&lang=ja"></script> </tr> </table> <!-- ここまで > <!-- SMP_TEMPLATE_FOOTER start --> <!-- SMP_TEMPLATE_FOOTER end --> </center> </body> </html>