スマホで使いやすい申し込みフォーム②
次にCSSはこちら。 @charset “utf-8”; *{ box-sizing: border-box; } html{ font-size: 1em; } body{ margin: 0; padding: 1.2em; font-family: Helvetica, Arial, sans-serif; color: #212121; } h1{ margin: 0; } p{ marg […]
Read Moreタグ: モバイルフレンドリー
スマホで使いやすい申し込みフォーム①
授業でフォームについて詳しく勉強したので、その改変版を載せます。利用の想定は専門学校の資料請求のフォームです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<!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> |
フリガナと郵便番号は入れると自動入力されるものを使っています。自動入力された部分については入力された時点で背景の色が緑になるようにするなど改善点は多いですが、フォームについてじっくり勉強する機会がありよかったです。 次の記 […]
Read More