純css制作學生入學表單
阿新 • • 發佈:2017-10-09
制作 device size tle char color function att idt
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 6 <title>學生檔案</title> 7 <style> 8 body { 9 margin: 0; 10 padding: 0; 11 background-color: #F7F7F7; 12 font-family: ‘漢儀大隸書繁‘; 13 } 14 15 form { 16 max-width: 640px; 17 width: 100%; 18 margin: 24px auto; 19 font-size: 28px; 20 } 21 22 label { 23 display: block; 24 margin: 10px 10px 15px; 25 font-size: 24px; 26 } 27 28 input { 29 display: block; 30 width: 100%; 31 height: 40px; 32 font-size: 22px; 33 margin-top: 10px; 34 padding: 6px 10px; 35 color: #333; 36 border: 1px solid #CCC; 37 box-sizing: border-box; 38 } 39 40 meter, progress { 41 display: block; 42 width: 100%; 43 margin-top: 10px; 44 } 45 46 .btn { 47 margin-top: 30px; 48 } 49 50 .btn input { 51 color: #FFF; 52 background-color: green; 53 border: 0 none; 54 outline: none; 55 cursor: pointer; 56 } 57 58 </style> 59 </head> 60 <body> 61 <form action=""> 62 <fieldset> 63 <legend>學生檔案</legend> 64 <label for=""> 65 姓名: <input type="text" required autofocus placeholder="請輸入姓名"> 66 </label> 67 <label for=""> 68 手機號碼: <input type="tel" pattern="1\d{10}" placeholder="請輸入手機號碼"> 69 </label> 70 <label for=""> 71 郵箱地址: <input type="email" placeholder="請輸入郵箱地址"> 72 </label> 73 <label for=""> 74 所屬學院: <input type="text" list="course" placeholder="前端與移動開發學院"> 75 <datalist id="course"> 76 <option value="前端與移動開發"></option> 77 <option value="PHP"></option> 78 <option value="JAVA"></option> 79 <option value="Android"></option> 80 <option value="IOS"></option> 81 <option value="UI設計"></option> 82 <option value="C++"></option> 83 </datalist> 84 </label> 85 <label for=""> 86 入學成績: <input type="number" max="100" id="score" step="10" value="80"> 87 </label> 88 <label for=""> 89 基礎水平: <meter min="0" max="100" low="60" high="80" value="80" id="level"></meter> 90 </label> 91 <label for=""> 92 入學日期: <input type="date" value="2016-01-01"> 93 </label> 94 <label for=""> 95 畢業時間: <input type="date" value="2016-05-01"> 96 </label> 97 <label for=""> 98 課程進度: <progress min="0" max="100" value="10"></progress> 99 </label> 100 <label for="" class="btn"> 101 <input type="submit" value="保存"> 102 </label> 103 </fieldset> 104 </form> 105 <script> 106 var score = document.getElementById(‘score‘); 107 var level = document.getElementById(‘level‘); 108 109 score.oninput = function () { 110 level.value = this.value; 111 } 112 </script> 113 </body> 114 </html>
純css制作學生入學表單