<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>总结案例：学生档案案例</title>
<link rel="stylesheet" type="text/css" href="../css/studentFileForm.css" />
</head>
<body>
<form action="">
<fieldset id="">
<legend>学生档案</legend>
<laber for="userName">姓名：</laber>
<input type="text" name="userName" id="userName" placeholder="请输入用户名">
<laber for="userPhone">手机号码：</laber>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}&">
<laber for="email">邮箱地址：</laber>
<input type="email" required name="email" id="email">
<laber for="college">所属学院：</laber>
<input type="text" name="college" id="college" list="clist" placeholder="请选择">
<datalist id="clist">
<option value="前端移动开发学院"></option>
<option value="Android学院"></option>
<option value="iOS学院"></option>
<option value="php学院"></option>
</datalist>
<laber for="score">入学成绩：</laber>
<input type="number" id="score" max="100" min="0" value="0">
<laber for="level">基础水平：</laber>
<meter id="level" max="100" min="0" low="59" high="90"></meter>
<laber for="inTime">入学日期：</laber>
<input type="date" id="inTime" name="inTime">
<laber for="outTime">毕业日期：</laber>
<input type="date" id="outTime" name="outTime">
<input type="submit" />
</fieldset>
</form>
<script type="text/javascript">
// 入学成绩与基础水平,联动
document.getElementById("score").oninput = function() {
document.getElementById("level").value = this.value;
}
</script>
</body>
</html>*{
padding: 0;
margin: 0;
}
form{
width: 600px;
margin:20px auto;
}
form > fieldset {
padding: 10px;
}
form > fieldset > meter,
form > fieldset > input {
width: 100%;
height: 30px;
line-height: 30px;
margin: 10px 0;
border: none;
border: 1px solid #ccc;
border-radius:4px ;
padding-left: 5px;
font-size: 16px;
/*width=内容+padding+border */
box-sizing: border-box;
}
// 覆盖上面的样式padding-left内容
form > fieldset > meter {
padding-left: 0px;
}studentFileForm.css
137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
