用html5做一个学生表可以查询学号,姓名,性别,班级编码
时间: 2023-12-23 12:05:27 浏览: 181
html5学习-学生信息表
以下是一个简单的HTML5代码示例,包括一个表单和一个表格,可以输入学生信息并查询:
```html
<!DOCTYPE html>
<html>
<head>
<title>学生表查询</title>
<meta charset="UTF-8">
<style>
table {
border-collapse: collapse;
margin-top: 20px;
}
td, th {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>学生表查询</h1>
<form>
<label for="sno">学号:</label>
<input type="text" id="sno" name="sno">
<label for="sname">姓名:</label>
<input type="text" id="sname" name="sname">
<label for="gender">性别:</label>
<select id="gender" name="gender">
<option value="">请选择</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
<label for="classno">班级编码:</label>
<input type="text" id="classno" name="classno">
<button type="submit">查询</button>
</form>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>班级编码</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>张三</td>
<td>男</td>
<td>1001</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>女</td>
<td>1002</td>
</tr>
</tbody>
</table>
</body>
</html>
```
在这个示例中,我们使用了`<form>`元素来包含输入框和一个提交按钮,用于向服务器提交查询请求。在这里我们并没有使用真正的服务器,而是使用了HTML5中的`<table>`元素来模拟一个表格,并在其中添加了两条学生信息。
当用户在输入框中输入查询条件并点击“查询”按钮时,浏览器会将这些数据打包成一个HTTP请求发送给服务器。服务器根据请求中的参数进行查询,并将查询结果返回给浏览器。如果使用真正的服务器,可以使用PHP、Node.js等后端语言来实现查询功能。
阅读全文