<!DOCTYPE html>
<html>
<head>
<title>宿舍人员统计——新源代</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
background-color: #006699;
color: #fff;
padding: 20px;
margin: 0;
font-size: 1.2rem;
line-height: 1.5;
text-align: center;
}
form {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f2f2f2;
box-shadow: 0 0 10px #ccc;
}
label {
display: block;
margin-bottom: 5px;
font-size: 0.9rem;
line-height: 1.5;
color: #333;
letter-spacing: 1px;
}
input[type="text"], select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
margin-bottom: 15px;
font-size: 0.8rem;
line-height: 1.5;
letter-spacing: 1px;
color: #666;
font-weight: bold;
}
input[type="radio"] {
margin-right: 5px;
font-size: 0.8rem;
line-height: 1.5;
margin-bottom: 10px;
}
label[for="male"],
label[for="female"] {
font-size: 0.9rem;
line-height: 1.5;
}
input[type="submit"] {
padding: 12px;
font-size: 0.9rem;
line-height: 1.5;
margin-top: 10px;
}
}
@media (max-width: 600px) {
form label,
input[type="text"],
select {
font-size: 1rem;
line-height: 1.5;
padding: 10px;
margin-bottom: 15px;
width: 100%;
}
label[for="male"],
label[for="female"] {
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 10px;
}
input[type="radio"] {
margin-right: 5px;
font-size: 0.8rem;
line-height: 1.5;
margin-bottom: 10px;
}
input[type="submit"] {
padding: 12px;
font-size: 0.9rem;
line-height: 1.5;
margin-top: 10px;
width: 100%;
}
}
</style>
</head>
<body>
<h1>宿舍人员统计</h1>
<form action="submit.php" method="post">
<label for="name">姓名：</label>
<input type="text" name="name" id="name" placeholder="请输入姓名" required>
<label for="student-id">学号：</label>
<input type="text" name="student-id" id="student-id" placeholder="请输入学号" required>
<label for="class">班级：</label>
<select name="class" id="class" required>
<option value="">请选择班级</option>
<option value="2019">2019级</option>
<option value="2020">2020级</option>
<option value="2021">2021级</option>
<option value="2022">2022级</option>
</select>
<fieldset>
<legend>性别：</legend>
<input type="radio" name="gender" id="male" value="male" required>
<label for="male">男</label>
<input type="radio" name="gender" id="female" value="female" required>
<label for="female">女</label>
</fieldset>
<input type="submit" value="提交">
</form>
</body>
</html>
