Newer
Older
web / application.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=0.5,minimum-scale=0.5" />
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>Rubyてらこったとは? | Rubyてらこった</title>
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    <link rel="shortcut icon" href="img/riku_umi.jpg">
    <link rel="stylesheet" href="css/main.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
  </head>
  <body>
    <div id="page">
      <header>
	<h1><a href="index.html"><img src="./img/sticker.jpg" alt="Ruby てらこった"></a></h1>
      </header>
      <div id="menu">
	<ul>
	  <li><a href="index.html">ホーム</a></li>
	  <li><a href="what.html">Rubyてらこったってなに?</a></li>
	  <li><a href="syllabus.html">授業内容</a></li>
	  <li><a href="qa.html">Q &amp; A</a></li>
	  <li><a href="parents.html">保護者の皆様へ</a></li>
	  <li><a href="lectures/index.html">授業リンク集</a></li>
	  <li class="now"><a href="lectures/application.html">お申し込み</a></li>
	</ul>
      </div>
      <div id="main_contents">
	<h2>お申し込みフォーム</h2>
	
	<h3>個人情報の利用目的</h3>
	<p>お預かりした個人情報は、Rubyてらこったからのご連絡や保険の加入の際に利用いたします。この情報は東北公益文科大学ブランディング事業以外の目的以外では一切利用いたしません。</p>
	
	<h3>定員を超える申し込みがあった場合</h3>
	<p>定員を超える申し込みがあった場合は、抽選となります。抽選結果はRubyてらこったホームページにて当選番号を発表いたします。また、整理番号はお申し込みが完了した際に送信されるメールにて割り当てられますので、そちらをご確認ください。</p>

	<h3>上記の記載事項に同意いただける場合は、下記のお申し込みフォームをお書きください。</h3>
	
	<form action="./app/application.rb" method="post">
	  <table>
	    <tr>
	      <th class="t_top"><label class="label" for="name" >参加者氏名</label></th>
	      <td class="t_top"><input id="name" type="text" name="name" placeholder="例) 寺子 太郎" required></td>
	    </tr>
	    <tr>
	      <th><label class="label" for="ruby">参加者氏名<br>(ふりがな)</label></th>
	      <td><input id="ruby" type="text" name="ruby" placeholder="例) てらこ たろう" required></td>
	    </tr>
	    <tr>
	      <th><label class="label" for="sei">性別</label></th>
	      <td><select name="sei" required>
		  <option value="">性別を選択</option>
		  <option value="男">男</option>
		  <option value="女">女</option>
	      </select></td>
	    </tr>
	    <tr>
	      <th><label class="label" for="e-mail">メールアドレス</label></th>
	      <td><input id="e-mail" type="email" name="email" placeholder="例) terakotta@e.koeki-u.ac.jp" required></td>
	    </tr>
	    <tr>
	      <th><label class="label" for="telephone">電話番号</label></th>
	      <td><input id="tel" type="tel" name="telephone" size="17" pattern="\d{1,5}-\d{1,4}-\d{4,5}" placeholder="例) 012-3456-7890" title="電話番号は、市外局番からハイフン(-)を入れて記入してください。" required> ※半角数字で入力 </br>※電話番号は、市外局番からハイフン(-)を入れて記入してください</td>
	    </tr>
	    <tr>
	      <th><label class="label" for="address">住所</label></th>
	      <td><input id="address" type="text" name="address" placeholder="例) 〒998-8500 山形県酒田市飯森山3丁目5番1号" title="住所は、郵便番号から記入してください。" required> <br>※住所は、郵便番号から記入してください</td>
	    </tr>
	    <tr>
	      <th><label class="label" for="school">学校名</label></th>
	      <td><input list="schoolList" id="school" name="school" placeholder="例) てらこった小学校" required>
		<datalist id="schoolList">
		  <option value="泉小学校">泉小学校</option>
		  <option value="一條小学校">一條小学校</option>
		  <option value="亀ヶ崎小学校">亀ヶ崎小学校</option>
		  <option value="黒森小学校">黒森小学校</option>
		  <option value="琢成小学校">琢成小学校</option>
		  <option value="田沢小学校">田沢小学校</option>
		  <option value="鳥海小学校">鳥海小学校</option>
		  <option value="十坂小学校">十坂小学校</option>
		  <option value="西荒瀬小学校">西荒瀬小学校</option>
		  <option value="新堀小学校">新堀小学校</option>
		  <option value="浜田小学校">浜田小学校</option>
		  <option value="浜中小学校">浜中小学校</option>
		  <option value="平田小学校">平田小学校</option>
		  <option value="広野小学校">広野小学校</option>
		  <option value="富士見小学校">富士見小学校</option>
		  <option value="松原小学校">松原小学校</option>
		  <option value="松山小学校">松山小学校</option>
		  <option value="松陵小学校">松陵小学校</option>
		  <option value="南平田小学校">南平田小学校</option>
		  <option value="宮野浦小学校">宮野浦小学校</option>
		  <option value="八幡小学校">八幡小学校</option>
		  <option value="若浜小学校">若浜小学校</option>
		</datalist>
	      </td>
	    </tr>
	    <tr>
	      <th><label class="label" for="grade">学年</label></th>
	      <td><select name="grade" required>
		  <option value="">学年を選択</option>
		  <option value="小学5年生">小学5年生</option>
		  <option value="小学6年生">小学6年生</option>
	      </select></td>
	    </tr>
	    <tr>
	      <th><label class="label" for="class">クラス</label></th>
	      <td><input id="class" type="text" name="class" pattern="^[1-9]{1}$" placeholder="例) 1" required> </br>※1から9までの半角数字で入力 (1クラスしかない場合 → 1) </td>
	    </tr>
	    <tr>
	      <th><label class="label" for="number">出席番号</label></th>
	      <td><input id="number" type="text" name="number" pattern="^[0-9]{2}$" placeholder="例) 01" required> </br>※2けたの半角数字で入力 (出席番号1番 → 01) </td>
	    </tr>
	    <tr>
	      <th><label class="label" for="schedule">参加日程</label></th>
	      <td>	
		<select name="schedule" required>
		  <option value="">参加日程を選択</option>
		  <option value="A日程 (8/1 - 8/5)">A日程 (8/1 - 8/5)</option>
		  <option value="B日程 (8/4 - 8/8)">B日程 (8/4 - 8/8)</option>
	      </select></td>
	    </tr>
	    <tr>
	      <th><label class="label" for="message">備考</label></th>
	      <td><textarea rows="5" id="message" placeholder="電話対応可能な時間や、その他連絡事項などあればお書きください。" name="message"></textarea></td>
	    </tr>
	  </table>
	  <div class="submit">
	    <input id="submit" type="submit" name="submit" value="確認画面へ">
	  </div>
	</form>
	
      </div>
      
      <footer>
	<p>Copyright (C) 2018 Ruby てらこった All Rights Reserved.</p>  
      </footer>
      
    </div>
    
  </body>
</html>