<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生信息录入</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
padding: 20px;
margin: 0;
}
h1, h2 {
color: #333;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 4px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 6px;
}
select, input[type="text"], input[type="password"], textarea {
width: 200px;
padding: 6px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
}
select {
height: 30px;
}
input[type="file"] {
margin-top: 10px;
}
input[type="submit"] {
margin-top: 10px;
padding: 8px 16px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
img {
display: block;
margin-top: 10px;
max-width: 200px;
}
</style>
<script>
function showPhoto(event) {
var reader = new FileReader();
reader.onload = function(e) {
var imgElement = document.getElementById("preview");
imgElement.src = e.target.result;
};
reader.readAsDataURL(event.target.files[0]);
}
</script>
</head>
<body>
<div style="max-width: 400px; margin: 0 auto;">
<h1>学生信息录入</h1>
<!-- 登录表单 -->
<div>
<h2>登录</h2>
<form action="/login" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required><br>
<input type="submit" value="登录">
</form>
</div>
<!-- 用户信息表单 -->
<div>
<h2>用户信息</h2>
<form action="/save" method="post">
<label for="gender">性别:</label>
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select><br>
<label for="interests">兴趣:</label><br>
<input type="checkbox" id="interest1" name="interests" value="足球">
<label for="interest1">足球</label><br>
<input type="checkbox" id="interest2" name="interests" value="篮球">
<label for="interest2">篮球</label><br>
<input type="checkbox" id="interest3" name="interests" value="音乐">
<label for="interest3">音乐</label><br>
<label for="education">学历:</label>
<select id="education" name="education">
<option value="本科">本科</option>
<option value="硕士">硕士</option>
<option value="博士">博士</option>
</select><br>
<label for="resume">个人简历:</label><br>
<textarea id="resume" name="resume" rows="4" cols="35"></textarea><br>
<label for="photo">照片:</label>
<input type="file" id="photo" name="photo" οnchange="showPhoto(event)"><br>
<img id="preview" src="#" alt="预览照片"><br>
<input type="submit" value="保存">
</form>
</div>
</div>
</body>
</html>