1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表單案例</title> 6 <link rel="stylesheet" href="../css/formcss.css"> 7 </head> 8 <body> 9 <form action=""> 10 <fieldset> 11 <legend>學生檔案</legend> 12 <label for="userName">姓名：</label> 13 <input type="text" name="userName" placeholder="請輸入用戶名" id="userName"> 14 <label for="userPhone">手機號碼：</label> 15 <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"> 16 <label for="userEmail">郵箱地址：</label> 17 <input type="email" name="userEmail" id="userEmail" required > 18 <label for="col">所屬學院：</label> 19 <input type="text" id="col" list="School" placeholder="請選擇"> 20 <datalist id="School"> 21 <option value="前端學院"></option> 22 <option value="Java學院"></option> 23 <option value="C++學院"></option> 24 <option value="人工智能學院"></option> 25 </datalist> 26 <label for="score">入學成績：</label> 27 <input type="number" max="100" min="0" id="score"> 28 <label for="level">基礎水平：</label> 29 <meter id="level" value="0" max="100" min="0" low="59" high="90"></meter> 30 <label for="inTime">入學日期：</label> 31 <input type="date" id="inTime"> 32 <label for="leaveTime">畢業日期</label> 33 <input type="date" id="leaveTime"> 34 <input type="submit"> 35 </fieldset> 36 </form> 37 38 <script> 39 document.getElementById("score").oninput = function () { 40 document.getElementById("level").value=this.value; 41 42 } 43 document.getElementById("userPhone").oninvalid=function () { 44 this.setCustomValidity("請輸入11位手機號！") 45 } 46 </script> 47 </body> 48 </html>
1 *{ 2 padding:0px; 3 margin: 0px; 4 } 5 form{ 6 width: 300px; 7 margin: 0px auto; 8 } 9 form >fieldset{ 10 padding:10px; 11 } 12 form > fieldset >meter, 13 form > fieldset >input{ 14 width:100%; 15 height:30px ; 16 line-height: 30px; 17 margin:10px 0; 18 border: none; 19 border:1px solid #ccc; 20 border-radius: 4px; 21 box-sizing: border-box; 22 font-style: 16px; 23 } 24 form > fieldset >meter{ 25 padding:0px; 26 }