学生信息
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
form{
width: 600px;
margin:20px auto;
}
form>fieldset{
padding: 10px;
}
form>fieldset>meter,
form>fieldset>input{
width: 100%;
height:40px;
line-height: 40px;
margin:10px auto;
border-radius: 4px;
font-size: 16px;
padding-left: 5px;
box-sizing: border-box;
}
</style>
</head>
<body>
<form action="" method="">
<fieldset>
<legend>学生信息</legend>
<label for="userName">姓名：</label>
<input type="text" name="userName" id="userName" placeholder="请输入用户名">
<label for="userPhone">手机号码：</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$">
<label for="email">电子邮箱：</label>
<input type="email" name="email" id="email" required="required">
<label for="collage">所属学院：</label>
<input type="text" name="collage" id="collage" list="clist" placeholder="请选择学院">
<datalist id="clist">
<option value="前端开发学院"></option>
<option value="c++学院"></option>
</datalist>
<label for="score">入学成绩：</label>
<input type="number" name="score" id="score" max="100" min="0" value="0">
<label for="level">基础水平：</label>
<meter id="level" max="100" min="0" low="59" high="90"></meter>
<label for="inTime">入学日期</label>
<input type="date" id="inTime" name="inTime">
<label for="leaveTime">毕业日期</label>
<input type="date" id="leaveTime" name="leaveTime">
<input type="submit" name="">
</fieldset>
</form>
<script type="text/javascript">
document.getElementById('score').oninput=function(){
document.getElementById('level').value = this.value;
}
</script>
</body>
</html>
