H5更多知識請移步博客：https://lg666kkk.github.io/tags/
本文參考自黑馬程序員培訓視頻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type='text/css'>
*{
margin:0;
padding: 0;
}
#ee{
width: 600px;
margin: 30px auto;
/* background-color: red; */
}
#ff > fieldset{
width:400px;
padding: 20px;
}
#ff input{
height: 20px;
width: 96%;
}
#ff p {
margin-bottom: 10px;
}
#ff label{
margin-bottom:5px;
}
meter{
height: 20px;
width: 96%;
}
</style>
</head>
<body>
<div id="ee">
<form id="ff" action="" autocomplete="on">
<fieldset>
<legend>學生檔案</legend>
<p>
<label>姓名: </label>
<input type="text" placeholder="請輸入姓名" autofocus required>
</p>
<p>
<label>手機號碼: </label>
<input type="tel" autofocus required>
</p>
<p>
<label>郵箱地址:</label>
<input type="email" autofocus>
</p>
<p>
<label>所屬學院: </label>
<input type="text" name="school" autofocus list="data" placeholder="請選擇">
<datalist id="data">
<option value="物理學院"></option>
<option value="計算機學院"></option>
<option value="材料學院"></option>
</datalist>
</p>
<p>
<label>入學成績</label>
<input type="text" placeholder="0" id="score">
</p>
<p>
<label for="level">基礎水平</label>
<meter high="90" low="60" max="100" min="0" id="level"></meter>
</p>
<p>
<label for="intime">入學日期</label>
<input type="data">
</p>
<p>
<label for="leavetime">畢業日期</label>
<input type="data">
</p>
<p>
<input type="submit" name="submit">
</p>
</fieldset>
</form>
</div>
<script type='text/javascript'>
var score = document.getElementById("score").oninput = function(){
document.getElementById("level").value = this.value;
}
</script>
</body>
</html>
