<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>フォーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>申し込み情報</h1>
<form class="h-adr" action="">
<div class="nameForm">
<label class="label" for="name"><span class="shimei">氏名</span><span class="required">必須</span></label>
<input type="text" name="name" id="name" required>
</div>
<div class="furiNameForm">
<label class="label2" for="furi_name"><span class="furi">フリガナ</span><span class="required">必須</span></label>
<input type="text" name="furi_name" name="furi_name" id="furi_name" required>
</div>
<div class="genderForm">
性別<span class="required">必須</span>
<label class="gender"><input type="radio" name="gender" value="0" id="man" required>男</label>
<label class="gender"><input type="radio" name="gender" value="1" id="woman" required>女</label>
</div>
</div>
<div class="gradeFrom">
学年<span class="required">必須</span>
<label class="grade"><input type="radio" value="0" name="grade" id="grade1" required>高校1年生</label>
<label class="grade"><input type="radio" value="1" name="grade" id="grade2" required>高校2年生</label>
<label class="grade"><input type="radio" value="2" name="grade" id="grade3" required>高校3年生</label>
</div>
<div class="schoolNameForm">
<label class="label3" for="schoolName">学校名<span class="required">必須</span></label>
<input type="text" id="schoolName" required>
</div>
<div class="adr-num">
<span>住所</span><p class="adr-txt">郵便番号を入力すると自動で住所が入力されます</p>
<span class="p-country-name" style="display:none;">Japan</span>
<label class="adr label4" for="adr-num">〒<span class="required">必須</span></label>
<input type="number" class="p-postal-code" size="7" id="adr-num" required>
</div>
<div class="adr-reg">
<label class="adr label5" for="adr-reg">都道府県<span class="required">必須</span></label>
<input type="text" class="p-region" id="adr-reg" required>
</div>
<div class="adr-loc">
<label class="adr label6" for="adr-loc">市区町村<span class="required">必須</span></label>
<input type="text" class="p-locality" id="adr-loc" required>
</div>
<div class="adr-str">
<label class="adr label7" for="adr-str">番地<span class="required">必須</span></label>
<input type="text" class="p-street-address" id="adr-str" required>
</div>
<div class="adr-other">
<label class="adr label8" for="adr-other">マンション名</label>
<input type="text" class="p-extended-address" id="adr-other">
</div>
<div class="tel">
<label class="telForm label9" for="tel">電話番号<span class="required">必須</span></label>
<input type="number" id="tel" required>
</div>
<div class="mail">
<label class="mailForm label10" for="mail">メールアドレス<span class="required">必須</span></label>
<input type="email" id="mail" required>
</div>
<label class="attendant">付き添い(ご家族など)<input type="checkbox" name="attendantCheckbox" value="check" id="attendant"></label>
<div class="family-wrap">
<label class="family" for="family1"><input type="radio" name="family" id="family1" value="0">1人</label>
<label class="family" for="family2"><input type="radio" name="family" id="family2" value="1">2人</label>
<label class="family" for="family3"><input type="radio" name="family" id="family3" value="2">3人</label>
</div>
<label class="contact">お問合せ
<textarea name="" id="" cols="30" rows="10"></textarea></label>
<label class="info">個人情報の保護に関する事項
<input type="checkbox" id="info"></label>
<input type="submit" id="submit" value="申し込む">
<div class="telephone">
<p>お急ぎの方はお電話でも承っております。</p>
<h2><a href="tel:0000111222">0000-111-222</a></h2>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="jquery.autoKana.js"></script><!-- ふりがなの自動変換 -->
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script><!-- 郵便番号変換 -->
<script src="script.js"></script>
</body>
</html>