最近在複習HTML5，手寫了一個表單案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 表單小案例</title>
<!--引入JQuery-->
<script src="plugin/jquery-3.1.1.min.js"></script>
<style>
form{
width: 50%;
/*上下是10，左右居中*/
margin: 10px auto;
}
form fieldset input{
width: 100%;
height: 35px;
line-height: 30px;
margin: 10px 0;
/*加border-radius屬性會出現內浮雕的情況，需要 先設置成none，再設置一個*/
border: none;
border: 1px solid gainsboro;
border-radius: 2px;
font-size: 15px;
padding-left: 10px;
/*由於剛剛設置了padding-left input往右邊挪了一點，需要設置下面*/
box-sizing: border-box; /* 這個把padding也算在了width之內*/
}
form fieldset{
padding: 20px;
}
select{
display: block;
margin: 10px 0;
}
meter{
width: 100%;
height: 20px;
margin: 10px 0;
}
</style>
<script>
function changeMeter(){
var value = $("#scoreInput").val();
$("#socreMeter").val(value);
}
</script>
</head>
<body>
<div>
<form action="#">
<fieldset>
<legend>學生檔案</legend>
<label for="nameInput">用戶名：</label>
<input type="text" name="userName" id="nameInput" placeholder="輸入用戶名" autofocus="autofocus" autocomplete="on" required="required"/>
<label for="telInput">手機號：</label>
<!--這裏的tel input還加了正則表達式驗證-->
<input type="tel" name="tel" id="telInput" placeholder="輸入手機號" autocomplete="on" pattern="^1\d{10}$" required="required"/>
<label for="emailInput">郵箱地址：</label>
<input type="email" name="email" id="emailInput" />
<label for="gradeInput">年級：</label>
<select name="grade" id="gradeInput">
<option value="大一">大一</option>
<option value="大二">大二</option>
<option value="大三">大三</option>
<option value="大四">大四</option>
</select>
<label for="scoreInput">入學成績：</label>
<input name="score" type="number" id="scoreInput" min="0" max="100" oninput="changeMeter()" required="required"/>
<label for="scoreMeter">基礎水平：</label>
<meter id="socreMeter" min="0" max="100" low="59" high="90" ></meter>
<label for="dateInput">入學日期</label>
<input type="date" id="dateInput" name="date" required="required"/>
<input type="submit" />
</fieldset>
</form>
</div>
</body>
</html>