お問い合わせフォームを
お問い合わせ選択項目によって
設問を表示・非表示となるように
htmlとcssでコーディングしました。
仮に「<form action="index02.html" method="post">」として
ダミーファイルを作ったものを送信先にしてみて
送信ボタンを押して飛ぶようにしたいのですが
全く変わりません。
表示・非表示にしている部分が必須なのに入力されていないと認識されることが原因なのでしょうか?
html
1 <form action="index02.html" method="post"> 2 3 <div class="fprm_container"> 4 <p class="qtype_title">お問い合わせ項目</p> 5 <input id="i_qtype01" type="radio" name="qtype" value="お問い合わせ"> 6 <label for="i_qtype01">お問い合わせ</label><br> 7 <input id="i_qtype02" type="radio" name="qtype" value="資料請求"> 8 <label for="i_qtype02">資料請求</label><br> 9 <input id="i_qtype03" type="radio" name="qtype" value="キャンペーン"> 10 <label for="i_qtype03">キャンペーン</label> 11 <div class="clearfix"></div> 12 13 <div class="data-contents"> 14 15 <!-- お問い合わせを選択時に表示 --> 16 17 <div class="siryou"> 18 <div class="title"> 19 <label>サイトを知ったきっかけ</label><br> 20 <em>必須(複数回答可)</em> 21 </div> 22 <div class="item"> 23 <div> 24 <input id="check01_01" type="checkbox" required> 25 <label for="check01_01">紹介</label> 26 </div> 27 28 <div> 29 <input id="check01_02" type="checkbox" required> 30 <label for="check01_02">広告</label> 31 </div> 32 33 <div> 34 <input id="check01_03" type="checkbox" required> 35 <label for="check01_03">SNS</label> 36 </div> 37 38 <div> 39 <input id="check01_04" type="checkbox" required> 40 <label for="check01_04">DM</label> 41 </div> 42 <div> 43 <input id="check01_05" type="checkbox" required> 44 <label for="check01_05">FAX</label> 45 </div> 46 </div> 47 <label class="title"> 48 お問い合わせ内容<em>必須</em> 49 50 </label> 51 52 <textarea class="item" required></textarea> 53 54 </div> 55 <!-- <資料請求選択時に表示 --> 56 <div class="siryou02"> 57 <label class="title">お問い合わせ内容(必須)</label> 58 <textarea class="item" required></textarea> 59 </div> 60 <!-- <親タグ閉じる --> 61 62 </div> 63 <!-- <家族閉じる --> 64</div> 65<p class="btn"><input type="submit" value="送信内容を確認する"></p> 66 </form> 67
CSS
1.fprm_container { 2 max-width: 900px; 3 margin: 0 auto; 4} 5.qtype_title { 6 float: left; 7 margin: 25px; 8 width: 200px; 9} 10.clearfix { 11 clear: both; 12} 13 14.siryou, 15.siryou02 { 16 display: none; 17 flex-wrap: wrap; 18 align-items: center; 19 margin: 20px 0; 20} 21 22.title { 23 margin: 25px; 24 width: 200px; 25} 26 27.item { 28 width: calc(100% - 260px); 29} 30textarea.item { 31 height: 150px; 32} 33 34.data-contents .siryou, 35.data-contents .siryou02 { 36 display: none; 37} 38 39input[value="お問い合わせ"]:checked ~ .data-contents .siryou{ 40 display: flex; 41} 42input[value="資料請求"]:checked ~ .data-contents .siryou02{ 43 display: flex; 44}
回答1件
あなたの回答
tips
プレビュー