<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
form{
width: 600px;
margin: 20px auto;
}
form>fieldset{
padding: 10px;
}
form>fieldset>input,form>fieldset>meter{
width: 100%;
height: 40px;
line-height: 40px;
margin: 10px 0;
border: none;
border: 1px solid #CCCCCC;
border-radius: 4px;
font-size: 16px;
padding-left: 5px;
box-sizing: border-box;/*width = 内容+padding+border*/
}
form>fieldset>meter{
padding-left: 0px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>学生档案</legend>
<!--姓名-->
<label for="userName">姓名</label>
<input type="text" id="userName" name="userName" value="" placeholder="请输入用户名" />
<!--手机号码-->
<label for="userPhone">手机号码</label>
<input type="tel" id="userPhone" name="userPhone" value="" />
<!--邮箱地址-->
<label for="userEmail">邮箱地址</label>
<input type="email" id="userEmail" name="userEmail" value="" required=""/>
<!--所属学院-->
<label for="school">所属学院</label>
<input type="text" id="school" name="school" value="" list="schoolList" placeholder="请选择" />
<datalist id="schoolList">
<option value="web开发学院"></option>
<option value="java开发学院"></option>
<option value="php开发学院"></option>
</datalist>
<!--入学成绩-->
<label for="score">入学成绩</label>
<input type="number" max="100" min="0" value="0" id="score" />
<!--基础水平-->
<label for="">基础水平</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" id="submit" name="" value="提交"/>
</fieldset>
</form>
<script>
document.getElementById("score").oninput = function(){
document.getElementById("level").value = this.value;
};
</script>
</body>
</html>
网友评论