結果を表示する
元にもどす
<html> <meta http-equiv="content-type"content="text/html;charset=shift_jis"> <style> body{background-color:#f8f8f8;} input[type="text"]{font-size:150%; color:black;} .ロゴ{text-align:left; padding:10px 0 4px 300px; font-size:40px; font-family:Impact; margin:-8px; border:none; background: linear-gradient(#aaaaaa, #f8f8f8); width:100%; height:80px;} .用紙{position:relative; width:700px; height:1000px; perspective:1000px; overflow:hidden; background:#f8f8f8; border-radius:4px;} .裏,.表{position:absolute; width:500px; height:700px; top:150px; left:100px; border-radius:8px; transition:transform 0.4s,border-width 0.4s; overflow:hidden; box-shadow:0 0 20px rgba(0,0,0,0.5);} .表{transform:rotateY(0deg); transition-delay:0.4s; transition-timing-function:cubic-bezier(0.1,-0.1,1,1); background-color:white;} .表 .Forward_01{position:absolute; top:80px; left:20px; width:360px; font-size:20px; text-align:center; letter-spacing:3px; padding:10px; border:1px solid silver; border-radius:4px;} .表 .Forward_02{position:absolute; top:200px; left:20px; width:360px; font-size:20px; text-align:center; letter-spacing:3px; padding:10px; border:1px solid silver; border-radius:4px;} .裏{transform:rotateY(90deg); transition-delay:0s; transition-timing-function:cubic-bezier(0.1,-0.1,1,1); background-color:white;} .裏 .Back_01{position:absolute; top:20px; left:20px; width:360px; height:180px; font-size:20px; text-align:center; letter-spacing:3px; line-height:0.99; padding:10px; border:1px solid silver; border-radius:4px;} .裏 .Back_02{position:absolute; top:240px; left:20px; width:360px; height:180px; font-size:20px; text-align:center; letter-spacing:3px; padding:10px; border:1px solid silver; border-radius:4px;} .裏 .Back_03{position:absolute; top:460px; left:20px; width:360px; height:180px; font-size:20px; text-align:center; letter-spacing:3px; padding:10px; border:1px solid silver; border-radius:4px;} .回転 .表{transform:rotateY(90deg); transition-delay:0s; transition-timing-function:cubic-bezier(0.1,-0.1,1,1);} .回転 .裏{transform:rotateY(180deg); transition-delay:0.5s; transition-timing-function:cubic-bezier(0.1,-0.1,1,1);} .記入{background-color:rgba(0,0,255,0.1); text-decoration:none;} .ミラーリング{transform:scaleX(-1);} .リード{position:relative;top:100;left:120;z-index:50;} .セット{position:fixed; display:inline-block; top:300px; left:560px; width:400px; height:400px; border:1px solid silver; padding:20px; background-color:rgba(0,0,255,0.1); z-index:10;} </style> <div class="ロゴ">Mail Test</div> <div class="リード">■ 表面にお名前とメール・アドレスを記入し, 裏面に答えを書いて送信してください.</div> <div class="用紙"> <div class="裏"> <div class="ミラーリング"> <div style="position:absolute;top:90;left:120;z-index:30;"><img src="333.png"width="150"></div> <div class="Back_01"><span style="font-size:16px;color:red;">問題 1 :</span><br><br><br><span style="font-size:26px;color:#000000;">３ ３ ３<br>３ ３ ３<br>３ ３ ３</span></div> <div class="Back_02"><span style="font-size:16px;color:red;">問題 2 :</span><br><br><span style="font-size:26px;color:#000000;">日本国内で<br>最も大き<br>湖はどこ？</span></div> <div class="Back_03"><span style="font-size:16px;color:red;">問題 3 :</span><br><span style="font-size:26px;color:#000000;">次の音階は<br>何スケールでしょうか？</span></div> <div style="position:absolute;top:580;left:80;z-index:40;"><img src="scale.png"width="250"></div> </div> </div> <div class="表"> <div class="Forward_01"><span style="font-size:16px;color:red;">お名前の記入例 :</span><br><span style="font-size:26px;color:#aaaaaa;">青木 太郎 あおき たろう</span></div> <div class="Forward_02"><span style="font-size:16px;color:red;">メール・アドレスの記入例 :</span><br><span style="font-size:26px;color:#aaaaaa;">mail-test@aaa.bbbb.cccc</span></div> </div> </div> <form method="post"action="○○○.cgi"> <div class="セット"> <div class="ふぉーむ"> <p><input type="text"name="name"data-face="表"data-target="Forward_01"placeholder="お名前 + ふりがな"required></p> <p><input type="text"name="mail"data-face="表"data-target="Forward_02"placeholder="メール・アドレス"required></p> <p><input type="text"name="data1"data-face="裏"data-target="Back_01"placeholder="問題 1 の答えは,,,"size="26"required></p> <p><input type="text"name="title"data-face="裏"data-target="Back_02"placeholder="問題 2 の答えは,,,"size="26"required></p> <p><input type="text"name="message"data-face="裏"data-target="Back_03"placeholder="問題 3 の答えは,,,"size="26"required></p> </div> <p style="text-align:center;"> <img src="bo-sen.jpg"width="130"height="2"> 確認のメールを <img src="bo-sen.jpg"width="130"height="2"></p> <p style="text-align:center;"><input type="radio" name="copymailcheck" value="1" checked>受け取れない <input type="radio" name="copymailcheck" value="0">受け取らない</p> <p style="text-align:center;"><input type="submit"value="送信されない"> <input type="reset"value="キャンセル"><input type="hidden"name="act"value="check"></p> </div> </form> <hr> <script> !function() {const 入力="記入", 文字=document.querySelectorAll("input"), 記入=document.querySelector(".用紙"); let 記憶; 文字.forEach((文字=>文字.addEventListener("focus",(()=> {((文字,保存)=> {console.log(記入,文字,保存), 記入.classList[保存?"remove":"add"]("回転"), 記憶&&記憶.classList.remove(入力); const 読む=記入.querySelector("."+文字.dataset.target); 読む.classList.add(入力), 記憶=読む}) (文字,"表"===文字.dataset.face)}))))}(); </script> </html>