<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>HelloWorld</title>
<style>
* {
margin: 0;
padding: 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 0;
padding-left: 5px;
border-radius: 4px;
border: 1px solid #cccccc;
outline: none;
box-sizing: border-box;
font-size: 16px;
}
form > fieldset > meter {
padding-left: 0;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" id="userName" name="userName" placeholder="请输入用户名">
<label for="userPhone">手机号:</label>
<input type="text" id="userPhone" name="userPhone" pattern="^(\+86)?\d{11}">
<label for="userEmail">邮箱地址</label>
<input type="email" id="userEmail" name="userEmail" required>
<label for="academy">所属学院:</label>
<input type="text" placeholder="请选择" id="academy" name="academy" list="aList">
<datalist id="aList">
<option value="PHP"></option>
<option value="Java学院"></option>
<option value="C++学院"></option>
</datalist>
<label for="score">入学成绩</label>
<input type="number" name="score" id="score" min="0" max="100" value="0">
<label for="level">基础水平:</label>
<meter id="level" name="level" min="0" low="59" high="90" max="100" value="0" optimum="95"></meter>
<label for="enrollment-date">入学日期:</label>
<input type="date" name="enrollment-date" id="enrollment-date">
<label for="graduation-date">毕业日期:</label>
<input type="date" name="graduation-date" id="graduation-date">
<input type="submit" value="提交">
</fieldset>
</form>
<script>
let score = document.getElementById("score");
score.oninput = function () {
let level = document.getElementById("level");
level.value = this.value;
};
</script>
</body>
</html>
html-学生档案案例
最新推荐文章于 2024-07-08 12:47:01 发布